WARNING in asset size limit: 静态资源过大

最新推荐文章于 2024-03-15 19:08:57 发布

原创最新推荐文章于 2024-03-15 19:08:57 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

npm 同时被 2 个专栏收录

2 篇文章

订阅专栏

nuxt

1 篇文章

订阅专栏

本文指导如何解决Nuxt项目npm run build时出现的过大资源和入口文件警告，提供配置webpack性能优化的解决方案，包括maxEntrypointSize和maxAssetSize设置，以及使用assetFilter进行JS文件特定提示。

nuxt项目 npm run build 时，有时会出现如下错误：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
…/dist/bundle/index.js (329 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (329 KiB)
…/dist/bundle/index.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

错误原因，资源(asset)和入口起点超过指定文件限制，需要在 nuxt.config.js 文件内做如下配置：

configureWebpack: {
    //关闭 webpack 的性能提示
    performance: {
      hints:'warning',
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  }