近年来，随着前端技术的日新月异，前端构建工具也逐渐成为了我们开发中不可或缺的一部分。而 Webpack 作为其中最为强大的一款工具，已经成为了众多前端工程师的首选。然而随着项目规模和复杂度的增加，Webpack 可能会面临一些性能瓶颈。本文将介绍如何优化 Webpack 的前端构建流程，以提高构建速度和性能。
1. 代码分离
代码分离是 Webpack 中优化构建性能的一个重要方法。当项目体积很大时，在应用程序初始下载时请求所有的代码会导致性能问题。通过将代码分离成多个 bundle，可以实现按需加载，从而提高页面加载速度。
Webpack 中的代码分离有两种方式：手动代码分离和自动代码分离。手动代码分离需要使用 Webpack 提供的插件和符号来指定要分离的模块，而自动代码分离则是 Webpack 自动生成多个 bundle。
1.1 手动代码分离
手动代码分离需要使用 Webpack 提供的 SplitChunksPlugin 插件。该插件可以将公共模块提取到单独的 chunk 中，并将它们从应用程序的 bundle 中分离出来。我们可以在 Webpack 配置文件中使用该插件，如下所示：
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--splitChunks 配置选项可以控制 chunk 的生成方式和行为。其中 cacheGroups 可以用来将公共的模块抽离出来。如上代码所示，我们将 node_modules 目录中的所有模块都会提取到一个名为 vendors 的 chunk 中。同时，minChunks 属性也可以控制公共 chunk 的生成条件，使用两次以上的模块被视为共享模块。
1.2 自动代码分离
自动代码分离需要使用 Webpack 4 中的 optimization.splitChunks 配置项。与手动代码分离不同的是，自动代码分离会自动根据入口起点和代码中的动态导入语句来创建 chunk。我们只需要设置好 optimization.splitChunks 配置项即可：
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- --------
-------- ------
-------- --
---------- --
----------------- ---
------------------- ---
--------------------- ------
------------ -
--------------- -
----- -------------------------
--------- ----
------------------- ----
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
--2. 使用合适的 loader
Webpack 中的 loader 用于处理各种不同类型的模块。为了提高构建性能，我们需要使用合适的 loader，否则会造成加载性能下降的问题。
例如，在处理大量的 JavaScript 文件时，babel-loader 就是 Webpack 中最常用的 loader 之一。通常情况下，使用 babel-loader 处理 JavaScript 文件时，我们需要启用缓存选项，以提高构建性能：
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -----------------------------------
-------- --------------
-
-
-
--3. 使用 DllPlugin
DllPlugin 可以将第三方库等不需要经常更新的模块与应用程序的代码分离。与使用手动代码分离类似，使用 DllPlugin 也需要将公共的模块抽离出来，提高提度构建速度。
3.1 使用 DllPlugin
首先，我们需要创建一个包含库的清单文件，以便 Webpack 能够在运行时使用该文件进行快速的构建。在此之前，我们需要先将库打包成一个独立的 bundle，使用 DllPlugin：
-- ---------------------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -
------ --------- ------------
--
------- -
----- -------------------- ----------
--------- ----------------
-------- ----------------
--
-------- -
--- -------------------
----- -------------------- ------------------------
----- ----------------
--
-
--在上面的示例中，我们打包了 React 和 React-DOM 两个库，代码入口为 react，最终输出到 public 目录下，文件名为 react.dll.js。此外，我们还指定了 dll 文件的输出名称和全局变量名称。
打包完成后，Webpack 会生成一个名为 react-manifest.json 的清单文件，该文件包含导出的模块和模块的 ID 号。在后续的构建中，我们可以使用清单文件和 DllReferencePlugin 插件来引用打包好的第三方库，以便加快构建速度。
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- --------------------------------
--
-
--3.2 使用 DllPlugin 注意事项
要避免缺失文件的错误，最好将清单文件检查到 .gitignore 文件中。虽然清单文件是自动生成的，但是如果我们清除了所依赖库的某些版本，那么它可能会破坏构建过程，因此最好进行排除。
在使用 DllPlugin 时也需要注意，如果库的版本比清单早，那么可能会出现意外问题。因此，在生成清单文件之前，应该确保要导出的库处于最新状态。
4. 使用缓存
Webpack 的构建过程需要耗费大量的时间，使用缓存可以避免重复的构建或更快地执行增量构建。Webpack 内置了多种缓存模式，可以让我们选择最适合自己项目的一种方式。
4.1 使用缓存
在提高构建性能时，Webpack 内置的缓存机制是非常有用的。这是因为在多次运行构建过程后，大多数文件都没有改变。因此，通过使用缓存来避免重复的构建可以大大提高构建速度。
-- ----------------- -------------- - - -- --- ------ ---- --
将 cache 配置选项设置为 true 就可以开启缓存机制。这会在内存中存储已经构建过的内容，并在下次构建时尝试重用它们。
4.2 使用 hard-source-webpack-plugin
在使用 Webpack 内置的缓存机制时，如果重新启动开发环境或者 "clean output path" ，就会清除缓存。因此，我们也可以采用 cache-loader 和 hard-source-webpack-plugin 来实现更持久的缓存。
-- -----------------
----- ----------------------- - --------------------------------------
-------------- - -
-- ---
---------- -
---- -----
------ ----
--
------- -
------ -
-
----- --------
-------- ---------------- ----------------
-------- --------------
-
-
--
-------- -
--- -------------------------
-
--hard-source-webpack-plugin 插件可以为模块提供中介缓存，以此进行持久化，并加快构建速度。使用此插件时，我们不需要额外的配置或修改 webpack 配置。只需要将其作为插件使用即可。
结论
本文为您介绍了 Webpack 中的代码分离、选择合适的 loader、使用 DllPlugin 和缓存等方法来提高构建速度。我们可以在具体的项目中根据情况使用这些方法，从而达到优化构建性能的目标。当然，这些也只是提高构建速度的方法，还有很多其他的方面也会影响构建性能，例如项目结构、编码风格等。因此，我们需要在实践中积累更多经验，才能写出更加高效、优化的 Webpack 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6732d19d0bc820c5823f051f