前言

前几天手动搭建了框架，在运行npm run build时候，提示

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

一开始以为是自己的main.js没有拆分彻底，于是使用bundleAnalyzerReport查看了一下打包分析，

image.png

以为是vconsole.js过大，于是使用splitChunks将分离了出来，然后打包，此时vconsole已经从vendor.js中分离出来，

image.png

可很悲催，还是提示

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 (251 KiB)
      js/0.34c48baf0fd5c4c1e719.js
      js/2.1d61c0f081cc46e6105f.js
      js/main.a3a4c3ed7a8d332462ad.js

于是不得不修改performance的属性，

image.png

• maxEntrypointSize
  入口起点的最大体积，这个参数代表入口加载时候最大体积，也是自己将vconsole.js分离出来不生效原因，自己直接将其改为了1M，
• maxAssetSize
  此选项根据单个资源体积，控制 webpack 何时生成性能提示，自己将其改成了200kb
• assetFilter
  属性允许 webpack 控制用于计算性能提示的文件，通过覆盖原有属性，将其改成只对js文件进行性能测试。
  最后改成如下配置：

performance: {
        maxEntrypointSize: 1000000,
        maxAssetSize: 200000,
        assetFilter: function(assetFilename) {
            return assetFilename.endsWith('.js');
        }
    }

当然要是嫌弃太麻烦，可以直接配置hints为false，但是官方强烈不建议，毕竟对网页性能很不友好。

总结

通过一句warn提示，主要配合使用bundleAnalyzerReport修改webpack的performance、splitChunks对框架性能性能进行了优化，webpack优化之路还很长，还需继续加油