在现代化的前端开发中，模块打包工具是必不可少的。Webpack 是一个流行的模块打包工具，它能将多个 JavaScript 模块打包成一个或多个 JavaScript 包，以优化应用程序的加载和性能。Webpack4 作为 Webpack 的最新版本，引入了 SplitChunksPlugin 插件，用于将 JavaScript 包中的公共代码提取到一个单独的文件中。本文将会详细解析 SplitChunksPlugin 插件，以及如何使用它来优化应用程序。
SplitChunksPlugin 介绍
SplitChunksPlugin 是 Webpack4 自带的插件，用于将 JavaScript 包中重复的、公共的代码提取到一个单独的文件中，以便多个入口文件可以共享它们。这有助于减少应用程序的加载时间和减少重复的代码。
在默认情况下，SplitChunksPlugin 只会提取重复的代码到一个单独的文件中。但是，我们可以通过指定一些选项来进一步控制哪些代码可以被拆分、如何拆分、以及拆分后的文件名。
SplitChunksPlugin 参数
SplitChunksPlugin 插件有一些可用的参数来控制如何拆分和命名文件以及其他功能，以下是最常用的参数：
- chunks：指定拆分代码的范围。默认为 async，表示只会对异步导入的模块进行拆分。如果想要对所有模块进行拆分，可以传入 all。
- minSize：指定拆分出来的公共模块最小大小。默认是 30000（30KB）。
- minChunks：指定使用次数大于等于这个数的模块才会被拆分为公共模块。默认是 1。
- maxAsyncRequests：异步模块并发请求数的最大值。默认是 5 次。
- maxInitialRequests：入口模块并发请求数的最大值。默认是 3 次。
- automaticNameDelimiter：自动生成的拆分的块的名称中的连接符。默认是 ~。
- cacheGroups：缓存组，可以进行更细粒度的拆分和定制。
如何使用 SplitChunksPlugin
在 webpack.config.js 中配置 SplitChunksPlugin 插件。以下是一个示例的配置：
-- -------------------- ---- -------
-------------- - -
-----
------------- -
------------ -
------- ------
-------- ------
---------- --
----------------- --
------------------- --
----------------------- ----
------------ -
--------------- -
----- -------------------------
--------- ----
------------------- ----
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--以上配置将会生成两个拆分的文件。第一个文件包含从 node_modules 目录中导入的所有第三方库，第二个文件包含所有应用程序的公共代码。两个文件名中间的连接符是 ~。
您可以使用 SplitChunksPlugin 插件的默认设置，即创建一个包含所有公共代码的某些文件。只需将以下行添加到 webpack.config.js 文件的 optimization 属性中：
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'all'
}
}
};这会在所有模块中寻找相同的、或者模块的公共部分，并将这些部分移至独立的块。
使用缓存组进一步优化
缓存组是 SplitChunksPlugin 插件的一种强大特性。它可以进一步地自定义拆分代码的行为。每个缓存组是一个对象，它可以具有以下属性：
- test：一个函数，用于决定哪些模块属于这个缓存组。
- priority：一个数字，用于确定多个缓存组应该如何共享模块。
- reuseExistingChunk：允许在拆分代码块时复用现有的代码块，而不是创建一个新的。
以下示例为 SplitChunksPlugin 插件添加了两个缓存组，来自于 node_modules 目录和公共代码：
-- -------------------- ---- -------
------------- -
------------ -
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
----- ----------
----- ----------------
-------- ------
---------- --
------------------- ----
-
-
-
-缓存组 vendors 的 test 属性用于筛选导入自 node_modules 目录的模块。默认的缓存组使用这个规则定义了其自己的 test 属性。
缓存组 commons 的 test 属性用于筛选出项目中的模块。minChunks 表示模块在多少个地方出现才会拆分，minSize 表示要拆分出来的文件的最小大小。名称属性使您可以定义拆分文件的名称，而不是使用生成的名称。reuseExistingChunk 属性允许对于不需要再次拆分的块重用现有的块。
结论
SplitChunksPlugin 插件是 Webpack4 中一个强大的优化工具，可以将公共代码从 JavaScript 包中提取出来，在多个入口文件中共享使用。缓存组功能可以进一步定制拆分代码的行为。使用它，我们可以避免大型 JavaScript 包的加载时间延迟和冗余代码的产生，为 Web 应用程序提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670750a4d91dce0dc866a536