vue项目瘦身之splitChunks

在vue.config.js中加入config.optimization.splitChunks({});后，再用Webpack Bundle Analyzer分析一下 pinyin.dict.js的确是被拆分出来了，但是还有其他的一些文件还是重复的。 主要是我们没有对于splitChunks进行配置，官网给我们举例的配置是

`config.optimization.splitChunks({ 
	  chunks: async,
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      }
 });`

进行配置之后我们就得到了满意的结果啦。

前面主要的问题就是maxAsyncRequests这个选项，它是按需加载时的最大并行请求数，可以理解为是每个import()它里面的最大并行请求数量，我查询了一下默认值是5。我们的项目超过5之后，就会发现还有重复的情况。pinyin.dict.js被拆分而area.js没被拆分是因为尺寸大的包会先被拆分。

cacheGroups也是一个很好地属性，你可以修改cacheGroups灵活的调整编译后的结构