在前端开发中，Webpack 是一个非常常用的工具。它可以将多个 JavaScript、CSS、图片等文件打包到一个或多个文件中，方便浏览器加载。但是，随着项目越来越大，Webpack 打包的时间会越来越长，而且生成的文件也会越来越大，这对于项目的开发和后期维护都会带来一定的影响。因此，我们可以通过一些方式来优化 Webpack 的打包过程，其中一种方式就是分离等体积较大的额外模块，本文将介绍如何实现该优化方式。
什么是分离等体积较大的额外模块？
通常情况下，我们会将所有的 JavaScript、CSS、图片等资源都打包到一个或多个文件中，这样可以减少 HTTP 请求和资源的加载时间。但有些情况下，某些模块的体积较大，它们的加载时间过长，会导致页面响应速度变慢。例如，我们使用了一些第三方库，这些库的体积可能会比较大，如果将它们打包到一个文件中，会导致该文件体积过大，加载速度过慢。因此，我们需要将这些等体积较大的额外模块从主应用程序中分离出来。
如何实现分离等体积较大的额外模块？
Webpack 提供了两个插件来实现分离等体积较大的额外模块：CommonsChunkPlugin 和 SplitChunksPlugin，我们将会分别介绍它们的使用方法。
使用 CommonsChunkPlugin 插件
CommonsChunkPlugin 插件可以将指定的模块抽离出来，生成一个单独的文件。使用该插件需要在 Webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
------- ---------- -- -- ------ --
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- -------- -- - ------ ------
--
-
--在上面的代码中，我们将 lodash 模块抽离出来，生成一个名为 vendor 的文件。Webpack 会将 vendor 文件和 app 文件分别打包输出，这样可以减小 app 文件的体积。但是，如果我们引入的第三方库过多，每次都手动添加时会比较麻烦。因此，可以使用 CommonsChunkPlugin 插件的更高级的用法来实现自动抽离。
先看下面的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- ---------
---------- -------- -------- -
-- ------------ --------- -
------ -------------- -- -------------------------------------- --- ---
-
--
-
--在上面的代码中，我们抽离了所有来自 node_modules 目录下的模块，并生成一个名为 common 的文件。minChunks 函数用来控制抽离的模块数量，这里我们抽离了所有来自 node_modules 目录下的模块。
使用 SplitChunksPlugin 插件
除了 CommonsChunkPlugin 插件外，Webpack4 还提供了一个新的插件 SplitChunksPlugin，它可以抽离出更多的公共模块，包括来自应用程序和第三方库中的模块。使用该插件需要在 Webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
-------- ------ -- ------ ---- -----
-
-
--在上面的代码中，我们使用了 SplitChunksPlugin 插件，将所有的公共模块抽离出来，生成一个 vendors 的文件。chunks: 'all' 表示抽离所有的公共模块，包括来自应用程序和第三方库中的模块。minSize 指定了模块体积大于 20KB 才会被抽离。
总结
分离等体积较大的额外模块是优化 Webpack 打包过程的一种方式。我们可以使用 CommonsChunkPlugin 或 SplitChunksPlugin 插件来实现该优化方式。除了这种方式外，我们还可以从其他方面入手，例如动态导入、使用 CDN 等来优化 Webpack 打包过程。希望本文能对您的前端开发工作有所帮助！
示例代码
以下代码提供了一个完整的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
-- -- ------
--- -------------------------------------
----- ---------
---------- -------- -------- -
------ -------------- -- -------------------------------------- --- ---
-
---
-- -- ------- -------
--- -------------------------------------
----- ----------
--
--
------------- -
------------ -
-- ------
------- ------
-------- ------
-- --------------------------------
-- -----------
----- -----
------------ -
-------- -
---------- --
--------- ----
------------------- -----
--
------- -
----- -------------------------
--------- ---
-
-
-
-
--在上面的代码中，我们抽离了 vendor 和 Webpack 运行时文件，并通过 SplitChunksPlugin 插件将所有的公共模块抽离出来，最终生成了三个文件：manifest.bundle.js、vendor.bundle.js、app.bundle.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c22c4968c7c53b074db58