Webpack4 优化之 SplitChunksPlugin 配置详解
随着前端项目越来越庞大，模块化程度越来越高，打包构建工具的优化越来越被重视。其中，Webpack 是目前最流行的前端打包工具之一。在 Webpack 中，提供了一个插件 SplitChunksPlugin，旨在优化打包后的文件体积，得到更好的用户体验。
- 什么是 SplitChunksPlugin？
SplitChunksPlugin 是 Webpack 提供的一个插件，用于分割代码块，实现对共享模块的抽离，将公共部分分离成单独的文件。这样，用户在打开网页时只需要下载需要的代码，而不需要重复下载公共代码，有效减少了网页加载时间，提高了用户体验。
- 如何配置 SplitChunksPlugin？
在 Webpack 4 中，SplitChunksPlugin 提供了默认的配置项，可以直接在 Webpack 配置文件中使用。如下：
-- -------------------- ---- -------
------------- -
------------ -
------- --------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-上面的配置项可以分为两部分，一部分为针对所有模块的通用配置，另一部分为指定打包后的文件名称、路径等配置。
（1）通用配置项说明
① chunks：表示从哪些模块中抽取共享代码块，可选值为 all、async、initial，默认为 async。
② minSize：表示当抽离的模块大小（以 bytes 为单位）达到这个值时才会被抽取成一个新的 chunk。
③ maxSize：表示当抽离的模块大小超过这个值时，将尝试分成更小的 chunks。默认为 0，表示不限制最大大小。
④ minChunks：表示被提取公共代码块的最小复用次数，默认为 1。
⑤ maxAsyncRequests 和 maxInitialRequests：异步和非异步加载的最大并行请求数量，默认为 5 和 3。
⑥ automaticNameDelimiter：自动生成的名称的连接符。
⑦ name：表示拆分出来文件的名称，默认为 true，表示自动生成名称。
⑧ cacheGroups：用于覆盖和修改 chunkGroups 中属性的默认值。
（2）cacheGroups 配置项说明
cacheGroups 用于对代码块进行规则匹配，实现对共享模块的抽离。这里提供了两个默认的 cacheGroups：vendors 和 default。
① vendors: 代码来自 node_modules，优先级为 -10，表示先抽离出来。test 表示匹配的文件路径，priority 表示权重，权重越大，优先级越高。
② default: 默认规则，指定模块最少被使用多少次才会被拆分成 chunk。reuseExistingChunk 表示是否复用已经存在的 chunk。
- SplitChunksPlugin 的实践
下面给出一个实践例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
---- -----------------
------ ----------------
--
-------- -
--- -------------------
------ ----- ----------
--
--
------------- -
------------ -
------- ------
----- --------
-
--
------- -
--------- ------------------------
----- ----------------------- -------
-
--上面的例子中，我们以两个入口文件 app 和 print 为例，通过配置 optimization.splitChunks 实现共享模块的抽离，生成 common.js 文件。
这里需要特别注意的是，为了实现部分缓存，生成的文件名使用 chunkhash 而非 hash。这是因为只有相同的 hash 才会被缓存，而每个文件的 hash 值是不同的，这会使得缓存失效。
- 总结
通过本文的介绍，我们了解了 SplitChunksPlugin 的作用及详细配置项。在实际项目开发中，合理配置 SplitChunksPlugin 可以显著改善网页性能，缩短用户等待时间，提高用户体验。
参考链接：
Webpack SplitChunksPlugin：https://webpack.js.org/plugins/split-chunks-plugin/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cea95968c7c53b0f71dd6