vue项目瘦身之splitChunks

当你加载一个庞大的项目的时候，进入首页需要十几秒甚至一分钟，那简直就是一个灾难！
我们先引入项目瘦身的好帮手Webpack Bundle Analyzer来看看优化空间
我们从Webpack Bundle Analyzer的分析结果来看，pinyin.dict.js在多处chunk中出现，这只是截图中的一部分，还有其他js也在chunk中重复出现，这就是造成项目庞大的原因！
我们马上想到了SplitChunksPlugin

在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灵活的调整编译后的结构