在 Web 前端开发中，我们通常会使用 webpack 来打包和管理我们的代码。而在 webpack3 及之前的版本中，常常使用 CommonsChunkPlugin 插件来实现公共模块的提取和代码分离。但是随着 webpack4 的发布，CommonsChunkPlugin 被废弃了，取而代之的是新的插件 splitChunks。
为什么要废弃 CommonsChunkPlugin？
在 webpack3 及之前的版本中，CommonsChunkPlugin 插件虽然能够实现公共模块的提取和代码分离，但是存在以下缺点：
- 在多页面应用中，无法对每个页面进行单独的优化。
- 当有多个入口文件时，会产生重复代码。
- 配置比较繁琐。
这些问题使得 CommonsChunkPlugin 插件在实际使用中存在一些困难和限制。
splitChunks 插件的优势
与 CommonsChunkPlugin 插件相比，splitChunks 插件具有以下优势：
- 可以对每个入口文件进行单独的优化。
- 可以自动去除重复代码。
- 配置更加简单。
同时，splitChunks 插件还支持更多的选项，可以更加细粒度地控制公共模块的提取和代码分离。
如何使用 splitChunks 插件？
下面是一个简单的示例，演示如何使用 splitChunks 插件实现公共模块的提取和代码分离：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
--------- ------------
----- --------- - -------
--
------------- -
------------ -
------------ -
-------- -
----- ----------
------- ----------
---------- -
-
-
-
-
-在上面的示例中，我们首先定义了两个入口文件 page1.js 和 page2.js。然后通过 optimization.splitChunks 配置项来指定公共模块的提取规则。其中 cacheGroups.commons 表示一个缓存组，用于定义公共模块的名称、作用范围和提取条件等信息。在这个示例中，我们将所有被两个或以上入口文件引用的模块提取到 commons.js 文件中。
总结
CommonsChunkPlugin 插件虽然在过去被广泛使用，但是它存在一些限制和问题。在 webpack4 及之后的版本中，推荐使用新的插件 splitChunks 来替代它，以便更好地实现公共模块的提取和代码分离。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27510