Webpack 是一个强大的现代化 JavaScript 应用程序打包工具。它的优势在于可以打包各种类型的文件，并将它们转换为小型、优化和最终版。
然而，随着代码变得越来越复杂，Webpack 打包速度可能会慢下来。在这篇文章中，我们将介绍如何优化生产环境的 Webpack 配置，以获得更快的打包速度。
1. 压缩代码
在生产环境中，我们希望确保输出的 Webpack 包尽可能小。为此，我们可以使用 UglifyJSPlugin 来压缩 JS 代码，使用 OptimizeCSSAssetsPlugin 来压缩 CSS 代码。
这里是一个示例配置：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
-- ---
------------- -
---------- -
--- -----------------
--- -------------------------
-
-
--2. 利用缓存
当 Webpack 再次编译项目时，它必须重新读取所有文件，并执行所有配置和插件。这在大型项目中可能需要一些时间， 缓存可以帮助我们加速此过程。
在 Webpack 中使用 cache-loader 可以让 Webpack 在重启时使用缓存。 将其与 thread-loader 结合使用可以让 Webpack 以多线程的方式运行， 以进一步提高编译速度。
这是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
---------------
----------------
--------------
-
-
-
-
--3. 拆分代码
拆分代码是一种优化大型应用程序的方法。这里有两种 Webpack 插件对您有所帮助。
SplitChunksPlugin 允许您将公共代码拆分为一组文件， 从而使包体积更小。
MiniCssExtractPlugin 允许您将 CSS 代码从 JS 中提取出来， 并单独打包成一个文件，避免重复的 CSS 代码。
这是一个示例配置：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------------- -
------------ -
------- -----
-
--
-------- -
--- ----------------------
--------- --------------------
-------------- ----------
--
-
--4. 使用 resolve.modules 和 resolve.extensions
在 Webpack 配置中，您可以指定解析模板的文件夹和文件扩展名。 通过指定相对较短的搜索路径和较少的扩展名， 可以减少 Webpack 的搜索时间。
这是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-------- -
---------------
----------------------- ------
--
----------- ------- -------- ------- -------
-
--结论
通过上述技巧，可以极大地提高生产环境下 Webpack 打包速度。 它们的优点是缓存、压缩和拆分代码。 此外，优化搜索路径和文件扩展名也将减少 Webpack 的搜索时间，从而获得更快的编译速度。
希望这篇文章对您有所帮助，如果您需要更多 Webpack 相关内容，请继续关注我们的博客。以下是完整的示例代码，以供参考。
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
----- -------------------- - -----------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------------
--
------------- -
---------- -
--- -----------------
--- -------------------------
--
------------ -
------- -----
-
--
------- -
------ -
-
----- --------
---- -
---------------
----------------
--------------
-
--
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
-------- -
---------------
----------------------- ------
--
----------- ------- -------- ------- -------
--
-------- -
--- ----------------------
--------- --------------------
-------------- ----------
--
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c2d9914b275ea6fe7c339