在 Webpack 4 中，官方推荐使用 SplitChunksPlugin 插件来进行代码的分割和优化。通过将公共代码抽离成单独的文件，可以减小文件的体积，提升应用的加载速度。
本文将对 SplitChunksPlugin 的常用配置进行详细介绍，并提供示例代码和学习指导。
什么是 SplitChunksPlugin
SplitChunksPlugin 是一个 Webpack 插件，用于抽离公共代码到单独的文件中。通过配置 SplitChunksPlugin，可以将应用中共享的代码提取出来，减小打包后的文件大小，缩短应用的加载时间，提升用户体验。
常用的配置选项
chunks
chunks 用来指定需要优化的代码块。该选项可以设置为字符串、数组和函数。
当设置为字符串时，可选值有： 'initial'、'async' 和 'all'。其中，'initial' 用于提取入口模块的公共代码，'async' 用于提取异步加载模块的公共代码，而'all' 则同时提取两者的公共代码。
当设置为数组时，可配置多个值。对于每个块，Webpack 会生成对应的代码块。例如：['a', 'b'] 将会创建一个名为 'a' 的代码块和一个名为 'b' 的代码块。
当设置为函数时，函数将会接收一个参数，该参数为 module 对象，函数需要返回一个值，表示该模块所处的代码块。
下面是一个示例代码：
-- -------------------- ---- -------
------------- -
------------ -
------- ------
------------ -
-------- ------
------- -
----- ---------------
----- ----------
------- -----
-
-
-
-在上面的配置代码中，chunks 被设置为了 'all'，表示提取所有代码块的公共代码。同时，通过 cacheGroups 配置项，将 node_modules 中的代码提取到一个名为 'vendors' 的代码块中。
minSize
minSize 用来指定被抽离出来的代码块的最小体积。当被抽离出来的代码块的体积小于该值时，不会被分割。
maxSize
maxSize 用来指定被抽离出来的代码块的最大体积。当被抽离出来的代码块的体积大于该值时，会尝试进一步分割。
minChunks
minChunks 用来指定引用次数。如果一个模块被引用的次数不超过该值，则不会被抽离成公共代码块。
maxAsyncRequests
maxAsyncRequests 用来指定异步加载的代码块的最大数量。当异步加载的代码块数量超过该值时，将不会进行分割。
maxInitialRequests
maxInitialRequests 用来指定入口代码块的最大数量。当入口代码块的数量超过该值时，将不会进行分割。
automaticNameDelimiter
automaticNameDelimiter 用来指定自动生成的文件名中，用于分隔不同部分的字符串。例如，如果该值为 '_'，则生成的文件名可能为：vendors~main_index_bundle.js
下面是一个示例配置：
-- -------------------- ---- -------
------------- -
------------ -
------- ------
------------ -
-------- ------
-------- ------
------- -
----- ---------------
----- ---------
------- ------
-------- ----
--
------- -
---------- --
----- ---------
------- --------
--------- ----
------------------- -----
-------- ----
-
-
-
-在上面的配置中，首先将 chunks 设置为 'all'，表示将所有代码块中的公共代码抽离出来。然后通过 cacheGroups 配置项，定义了两个代码块：vendor 和 common。
vendor 代码块用于将 node_modules 中的代码提取到一个单独的文件中。由于 vendors 和默认的 cacheGroups 中都会匹配 node_modules 中的代码，因此需要将 default 和 vendors 设置为 false。
common 代码块用于将模块中的第三方依赖（被至少两个模块引用）提取到一个公共文件中，并设置了一些自定义选项，例如设置 priority 为 -10 以防止将 vendor 和 common 中的公共代码合并到一起。
总结
SplitChunksPlugin 是一个非常有用的 Webpack 插件，能够将多个代码块中共享的代码提取到单独的文件中，缩小应用的体积，提升应用的加载速度。在使用 SplitChunksPlugin 时，应根据自己的应用场景和需求，选择合适的配置选项，以达到最佳的优化效果。
示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
----- ----------------
------- --------
--
------- -
--------- ------------------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
------------ -
-------- ------
-------- ------
------- -
----- ---------------
----- ---------
------- ------
-------- ----
--
------- -
---------- --
----- ---------
------- --------
--------- ----
------------------- -----
-------- ----
-
-
-
--
-------- -
--- -------------------------------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538d3ba7d4982a6eb1f04cd