在使用 Webpack 构建大型项目时，我们经常会使用多个 Entry 来区分不同的业务逻辑或入口点，但随着代码量的增加，Chunk 的数量也会越来越多，导致打包后的文件体积过大，影响页面加载速度。因此，将多个 Entry 合并为一个 Chunk 是一种优化性能的有效方法。
什么是 Chunk？
在 Webpack 中，Chunk 是由模块组成的代码块，它可以是一个单独的文件，也可以是多个模块的集合体。Webpack 会根据各个模块之间的依赖关系，将它们打包到不同的 Chunk 中，从而实现代码的按需加载和优化。
为什么需要合并 Chunk？
当我们使用多个 Entry 时，Webpack 会为每个 Entry 单独生成一个 Chunk，即使它们之间存在相同的模块依赖关系，仍然会被重复打包，导致代码体积过大，而且在加载时也会造成额外的网络请求，影响页面的渲染速度。
因此，为了减少代码的体积和网络请求的次数，我们需要将相同的模块依赖关系合并到一个 Chunk 中，这样就可以减少 Chunk 的数量，优化页面加载速度。
如何将多个 Entry 合并为一个 Chunk？
Webpack 提供了几种方式来实现 Chunk 的合并，下面分别介绍一下。
使用 CommonsChunkPlugin 插件
CommonsChunkPlugin 是 Webpack 提供的一个插件，它可以将多个 Chunk 中的共同模块提取到一个公共的 Chunk 中，从而实现 Chunk 的合并。我们可以在 Webpack 的配置文件中使用如下代码来配置：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------- ----------
--
------- -
--------- -------------------
----- --------- - -------
--
-------- -
--- -------------------------------------
----- -------- -- ---- ----- ---
--
-
--上面的配置中，我们将 pageA 和 pageB 两个 Entry 的公共依赖关系提取到了 common Chunk 中，其中 vendor 是一个用于指定第三方库的 Entry。
使用 SplitChunksPlugin 插件
由于 CommonsChunkPlugin 插件在 Webpack 4.x 版本中已经被废弃，取而代之的是 SplitChunksPlugin 插件。它提供了更为灵活的配置，可以根据不同的条件来自动实现 Chunk 的合并。我们可以在 Webpack 的配置文件中使用如下代码来配置：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
------- ----------
--
------- -
--------- -------------------
----- --------- - -------
--
------------- -
------------ -
------- ------ -- ---------
------------ -
------- -
----- --------- -- ---- ----- ---
---------- -- -- ---------------
--------- - -- ---------------
--
------- -
----- --------- -- ------ ----- ---
----- -------------------------
--------- -- -- ---------------
-
-
-
-
--上面的配置中，我们使用 splitChunks 配置项来配置 Chunk 的分离规则，其中 test 选项用于指定需要分离的模块匹配的规则，minChunks 选项用于指定需要提取的模块最小引用次数，priority 选项用于指定分离的优先级，数字越大越优先。
总结
通过将多个 Entry 合并为一个 Chunk，可以有效地优化代码的体积和页面加载速度。对于小型项目来说，可以直接使用 CommonsChunkPlugin 插件来实现 Chunk 的合并，而对于大型项目来说，则可以使用 SplitChunksPlugin 插件来实现更为灵活的配置。
在实际的开发过程中，我们可以根据项目的实际情况来选择合适的方法来实现 Chunk 的合并，从而提高页面的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469b019968c7c53b09891b9