理解 minChunks

minChunks 表示一个模块至少应被指定个数的 chunk 所共享才能分割。默认为1。

对 splitChunks 做以下修改，其他使用默认配置：

chunks: 'all',
minChunks: 2

对 index.js 稍作修改：

// index.js
import 'vue'

构建结果如下：

原因分析：

因为 minChunks 为 2，所以只有当 vue 至少被2个 chunk 所共享时，才会被拆分出来。

思考题

请问如下代码，构建结果是什么？

chunks: 'all',
minChunks: 2

// index.js
import 'vue'
import './a'

// a.js
import 'vue'
console.log('a')

理解 cache groups

cacheGroups 继承 splitChunks 里的所有属性的值，如 chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、automaticNameDelimiter、name ，我们还可以在 cacheGroups 中重新赋值，覆盖 splitChunks 的值。另外，还有一些属性只能在 cacheGroups 中使用：test、priority 、reuseExistingChunk。

通过 cacheGroups，我们可以定义自定义 chunk 组，通过 test 条件对模块进行过滤，符合条件的模块分配到相同的组。

cacheGroups 有两个默认的组，一个是 vendors，将所有来自 node_modules 目录的模块；一个 default，包含了由两个以上的 chunk 所共享的模块。

前面的例子中，你可能注意到了怎么有的拆分出的chunk名字这么奇怪，例如 vendors~app（默认由 cacheGroups 中组的 key + 源chunk名组成）。我们看一下如何自定义拆分出的chunk名。

首先找到该chunk所属的分组，该例为 vendors 分组，作如下修改，其他使用默认配置:

chunks:'all',
cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: "customName",
      priority: -10
    }
}

对 index.js 稍作修改：

// index.js
import 'vue'

构建结果如下：

原因分析：

vue 来自 node_modules 目录，被分配到了默认的 vendors 组中，如果不指定 name 的话，会使用默认的chunk名，这里我们指定了 name，因此最终的chunk名为customName。

模块还可以分配到多个不同的组，但最终会根据 priority 优先级决定打包到哪个 chunk。

新增一个分组：

chunks:'all',
cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: "customName",
      priority: -10
    },
    customGroup: {
      test: /[\\/]node_modules[\\/]/,
      name: "customName1",
      priority: 0
    }
}

构建结果：

原因分析：

虽然 vendors 和 customGroup 这个两个组的条件都符合，但由于后者的优先级更高，所以最终将 vue 打包到了 customName1.js 中。

总结

讲解到这里，想必你对 webpack 如何进行代码分割有了深刻地理解了。对于文章开头的问题，可以给出你的答案了吧？