正文
原文出处
RIP CommonsChunkPlugin.md · GitHub
webpack 4用两个新的配置选项(
optimization.splitChunks
and
optimization.runtimeChunk
)替代了CommonsChunkPlugin。本文介绍这两个新选项的用法。
默认值
默认情况下会做一些优化，对多数用户都是合适的。
注意，默认值只会影响按需加载的块，因为要修改初始（initial）块会影响HTML中的
script
标签。如果你可以自己处理（比如根据入口配置生成
script
标签的时候），那可以对初始化也应用这些默认的优化：
optimization.splitChunks.chunks: "all"
。
webpack根据如下条件自动拆分块：
-
新块可以共享或者模块来自
node_modules
文件夹
-
新块会大于30kb（min+gz以前）
-
按需加载块之时最大的并行请求数小于等于5
-
页面初次加载时最大的并行请求数小于等于3
为尽力满足后两个条件，块的体积可以更大。
下面看几个例子。
例1
// entry.js
import("./a");
// a.js
import "react";
// ...
结果
：会创建一个独立的包含React的块。在执行
import
调用时，这个块会随着包含
./a
的块并行加载。
为什么：
-
条件1：这个块包含的模块来自
node_modules
-
条件2：react大于30kb
-
条件3：在执行
import
调用时，并行请求数是2
-
条件4：不影响页面初次加载
为什么应该这样拆分？
react可能不会像应用代码那样经常变更。把它挪到一个独立的块，浏览器就可以缓存它（假设你使用了长期缓存配置：chunkhash、records、Cache-Control）。
例2
// entry.js
import("./a");
import("./b");
// a.js
import "./helpers";
// helpers有40kb
// ...
// b.js
import "./helpers";
import "./more-helpers";
// more-helpers也有40kb
// ...
结果
：会创建一个独立的包含
./helpers
的块。在执行
import
调用时，这个块会与原始的块并行加载。
为什么：
-
条件1：这个块由两个
import
调用共享
-
条件2：helpers大于30kb
-
条件3：在执行
import
调用时的并行请求数为2
-
条件4：不影响页面初次加载
为什么应该这样拆分？
让helpers代码保留在每个块中意味着用户要下载它两次，而独立出来以后，则只需下载一次。实际上这也是有代价的，因为会多一次请求。这也是为什么有最小30kb的限制的原因。
With
optimizations.splitChunks.chunks: "all"
the same would happend for initial chunks. Chunks can even be shared between entrypoints and on-demand loading.
配置
对于喜欢折腾的用户，还有很多选项可供使用。
声明：不要在没有度量的情况下手工优化。默认值考虑了最佳实践和Web性能。
缓存组
这个选项将模块分配到缓存组（
cacheGroups
）。
默认是将
node_modules
中的所有模块都分配到一个叫
vendors
的缓存组，将至少在2个块中重复出现的模块分配到另一个叫
default
的缓存组。
一个模块可以被分配到多个缓存组。这个优化通过
priority
选项或构成较大块的模块来优先选择缓存组。
条件
在满足所有条件的情况下，来自相同块和缓存组的模块会构成一个新块。
有4个选项可以用于配置条件：
-
minSize
(default: 30000) 块的最小大小
-
minChunks
(default: 1) 拆分前共享一个模块的最小块数
-
maxInitialRequests
(default 3) 一个入口最大并行请求数
-
maxAsyncRequests
(default 5) 按需加载时最大行行请求数
命名
要控制拆分后新块的名字，可以使用
name
选项。
注意：如果给不同的块指定了相同的名字，结果就是这些块会被合并成一个。这样配置可以把所有
vendor
模块拆分为一个由所有入口点/拆分点共享的块，但我不建议这样用。因为这会导致下载的代码变多。
魔术值
true
会自动根据块和缓存组的键选择一个名字。另外，除给这个选项传一个字符串，也可以传一个函数。
如果名字与入口点名字相同，则删除入口点。
选择块
通过
chunks
选项可以选择块，有3个值：
"initial"
、
"async"
和
"all"
。分别用于选择初始块、按需加载的块和所有块。
reuseExistingChunk
选项用于配置在模块完全匹配时重用已有的块，而不是创建新块。
选择块可以针对每个缓存组分别设置。
选择模块
test
选项控制当前缓存组选择哪个模块。省略表示选择所有模块。值可以是RegExp、字符串或函数。
可以匹配绝对模块资源的路径或块名字。如果匹配的是块名字，则会选择该块中的所有模块。
配置缓存组
以下是默认配置：
