在前端开发中，我们通常会使用 Webpack 来进行代码打包和构建。而在大型项目中，随着代码量的增加，公共代码也会变得越来越多，这时候就需要考虑如何将公共代码分离出来，以减少打包后的文件大小，提高页面加载速度。
Webpack 提供了多种方式来实现公共代码分离，本文将介绍其中两种常用的方法：使用 splitChunks 和使用 DllPlugin。
使用 splitChunks
splitChunks 是 Webpack 4 中提供的新特性，它可以将公共代码分离出来，生成一个独立的文件。使用 splitChunks 非常简单，只需要在 Webpack 配置文件中添加以下代码：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}上述代码中，optimization 是 Webpack 4 中的一个新选项，用于配置代码优化相关的内容。在 optimization 中，我们可以使用 splitChunks 来配置公共代码分离。chunks: 'all' 表示将所有的模块中的公共代码都提取出来。
除了 chunks，splitChunks 还提供了很多其他的选项，例如 minSize、maxAsyncRequests、maxInitialRequests 等，可以根据实际情况进行配置。
使用 DllPlugin
除了 splitChunks，Webpack 还提供了 DllPlugin 来实现公共代码分离。DllPlugin 的原理是将公共代码打包成一个独立的文件，然后在页面加载时单独引入这个文件，从而减少页面加载时间。
使用 DllPlugin 需要分两步进行：
第一步，需要创建一个公共代码的清单文件（manifest）。在 Webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- -------------------
----- -------------------- ------ ------------------------
----- ----------------
--
-
-上述代码中，DllPlugin 的 path 选项指定了清单文件的输出路径，name 选项指定了清单文件中的变量名。
第二步，需要在页面中引入公共代码的清单文件和公共代码文件。在 HTML 文件中添加以下代码：
<!-- 清单文件 --> <script src="./dll/vendor-manifest.json"></script> <!-- 公共代码文件 --> <script src="./dll/vendor.dll.js"></script>
上述代码中，src 属性指定了清单文件和公共代码文件的路径。
使用 DllPlugin 可以将公共代码分离出来，从而减少页面加载时间。但是需要注意的是，每次修改公共代码时，都需要重新打包和引入清单文件和公共代码文件，否则页面可能会出现错误。
总结
本文介绍了 Webpack 中两种常用的公共代码分离方法：使用 splitChunks 和使用 DllPlugin。使用这两种方法可以有效地减少页面加载时间，提高用户体验。但是需要根据实际情况进行选择和配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f291382b3ccec22fb23624