Webpack--- Code Splitting 之 SplitChunks

Webpack 4废弃了之前不怎么好用的 CommonsChunk，取而代之的是 SplitChunks。

首先 webpack 总共提供了三种办法来实现 Code Splitting，如下：

1）入口配置：entry 入口使用多个入口文件；

2）抽取公共代码：使用 SplitChunks 抽取公共代码；

3）动态加载：动态加载一些代码。我们这里只说 SplitChunks。

SplitChunks

首先我们所说的 SplitChunks 是由 webpack 4 内置的 SplitChunksPlugin 插件提供的能力，可直接在 optimization 选项中配置。

cacheGroups

cacheGroups 才是我们配置的关键。它可以继承/覆盖上面 splitChunks 中所有的参数值，

除此之外还额外提供了三个配置，分别为：test, priority 和 reuseExistingChunk。

test: 表示要过滤 modules，默认为所有的 modules，可匹配模块路径或 chunk 名字，当匹配的是 chunk 名字的时候，其里面的所有 modules 都会选中；
priority：表示抽取权重，数字越大表示优先级越高。因为一个 module 可能会满足多个 cacheGroups 的条件，那么抽取到哪个就由权重最高的说了算；
reuseExistingChunk：表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。