SplitChunksPlugin 配置参数 2

我们继续上篇，探索一下splitChunks 的配置。

我们在项目的 src 下新建一个文件 test.js 导出一个很少的内容，如下。

export default {
    name: 'Me a Test'
}

然后我们将入口index.js 文件改为这样：

import test from './test'
console.log(test.name)

运行打包命令，由于webpack.config.js 中 optimizaiton.splitChunks.minSize 为 30000（30kb），因此肯定是不会进行代码分割的。

我们将minSize 设为 0. 打包，发现，仍无法将test.js 分割。

这是因为，对于同步引入代码，会继续往下查看配置，到cacheGroups, 而cacheGroups 中test.js 不符合vendors 组的要求（test 不匹配），那么它会转向default，但我们default 配置的是false 。因此test.js 就无法知道它的去向了。因此，我们配置一下default ，将官网default 的配置拷贝下来(不用minChunks)。如下。

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: "vendors.js"
        },
        default: {
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },

运行打包命令，结果如下。

test.js 就打包在default～main.js 中。

同理，也可以给它一个filename 属性，让它都打包到common.js 文件里，如下。

      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: "vendors.js"
        },
        default: {
          priority: -20,
          reuseExistingChunk: true,
          filename: "common.js"
        }
      }

下一个属性，maxSize，它是对要分割的代码，进行大小判断，如果该文件大小大于它的值，webpack 就尝试对该文件再进行分割。

下一个属性，minChunks，它代表一个模块至少用到多少次的时候才会对其进行分割。

下一个属性，maxAsyncRequests，它代码同时加载的最大模块数。当webpack 遇到这个参数时，假设它为5，那么在打包过程中遇到前5个需要分割的文件，它会进行分割，后面的就不进行分割了。

下一个属性，maxInitialRequests，它代表整个网站首页进行加载的时候，或者入口文件进行加载的时候，入口文件中可能会引入其他的js 文件或库，那么入口文件进行代码分割它的可分割数为该项配置值。

下一个属性，automaticNameDelimiter，它代码名字之间的连接符。

下一个属性，cacheGroups，缓存组。当我们不配置这个属性时，当我们import 多个库，比如jquery, lodash 时，进行代码分割，是会分别放入两个文件中的。但我们配置了cacheGroups 时，如上。它就会在打包时，先将要分割的代码缓存到vendor 组或者default 组，再一起打包成一个文件。其中 priority 属性，是指，当一个文件满足两个以上的组的时候，那个组的priority 越大那么它的优先级越高，就会判断进那个组。其中 reuseExistingChunk 属性，是指，当一个模块已经被打包过，那么它在其他文件中需要再次引入时，可以复用之前打包的文件。