玩转 webpack 之性能篇（调优编译时间）
webpack 是前端开发中最常用的打包工具之一，它能够将多个 JavaScript 文件、CSS 文件、图片等资源打包成一个或多个文件，实现对前端代码的优化和压缩，提高页面加载速度。然而，在实际开发中，webpack 编译时间的长短成为了很多开发者关注的焦点。本文将介绍如何通过调节 webpack 配置来优化编译时间。
- 避免不必要的编译
在实际开发中，有很多情况下并不需要对所有的代码进行编译。比如，我们可以通过配置 exclude 和 include 属性来避免对某些文件或目录进行编译。
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- --------
-------- ---------------
-------- ----------------------- -------
---- --------------
-
-
-
-上面的配置将排除 node_modules 目录下的所有 JavaScript 文件，只对 src 目录下的 JavaScript 文件进行编译。这样可以避免不必要的编译，提高编译效率。
- 使用 HappyPack 多线程编译
webpack 默认是单线程编译，这意味着在编译大型项目时，编译时间会非常长。为了提高编译效率，我们可以使用 HappyPack 插件，将编译任务分配到多个子进程中执行，从而实现多线程编译。
-- -------------------- ---- -------
----- --------- - ---------------------
----- -- - --------------
-------------- - -
-----
-------- -
--- -----------
--- -----
-------- -----------------
-------- ---------------- - -
--
--
------- -
------ -
-
----- --------
-------- ---------------
-------- ----------------------- -------
---- ------------------------
-
-
-
-上面的配置中，我们使用了 HappyPack 插件，并将编译任务分配到了多个子进程中执行。这样可以大幅度缩短编译时间，提高开发效率。
- 使用 DllPlugin 和 DllReferencePlugin 预编译
DllPlugin 和 DllReferencePlugin 是 webpack 提供的两个插件，它们可以将一些不常更新的第三方库（如 jQuery、React 等）预编译成一个单独的文件，从而避免每次编译时都重新打包这些库，提高编译效率。
首先，我们需要创建一个单独的 webpack 配置文件，用于预编译第三方库：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
-------- ---------- -------- ------------
--
------- -
----- -------------------- -------
--------- ----------------
-------- --------
--
-------- -
--- -------------------
----- -------------------- ----------------------------
----- ---------
-------- ---------
--
-
--上面的配置中，我们通过 entry 属性指定了需要预编译的第三方库，然后通过 DllPlugin 插件将其打包成一个单独的文件，并生成一个 manifest 文件，用于在后续的编译中引用。
然后，在主 webpack 配置文件中，我们可以使用 DllReferencePlugin 插件引用预编译的第三方库：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
-----
-------- -
--- ----------------------------
--------- --------------------------------------
--
-
--上面的配置中，我们使用了 DllReferencePlugin 插件，并通过 manifest 属性引用了预编译的第三方库。这样可以避免每次编译时都重新打包这些库，提高编译效率。
总结
通过以上三种方式，我们可以优化 webpack 的编译时间，提高开发效率。当然，还有很多其他的优化方式，如使用缓存、压缩代码等，读者可以根据实际情况选择合适的优化方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658246add2f5e1655dd6ba56