前言
Webpack 作为前端项目构建工具，已经成为了众多前端工程师日常开发中不可或缺的一部分。然而，由于项目变得越来越复杂，Webpack 打包构建速度也逐渐变得越来越缓慢，对于团队的整体开发效率和开发体验造成了不小的影响。本文主要介绍如何优化 Webpack 的打包速度，以提高开发效率。
优化策略
以下为优化 Webpack 打包速度的一些常见策略：
1. 缩小打包范围
Webpack 打包速度与打包范围成正比，因此我们应该尽可能减小 Webpack 打包的范围。例如，可以只打包当前正在开发的模块或页面，或者将代码分为多个模块，让 Webpack 只打包需要的模块。
2. 使用 DLLPlugin
DLLPlugin 可以将开发过程中不经常变化的代码提取出来放在一个单独的 bundle 中，并在构建过程中复用。这样后续构建时，不需要再次处理这些代码，从而提升打包速度。我们可将经常使用的公共库如 React、lodash、jQuery 等打包成 DLL 文件，这些库相对比较庞大，以后也不经常改动，使用 DLLPlugin 可以大大提高 Webpack 的构建速度。
3. 利用缓存
如果同样的代码已经构建过，Webpack 可以理解成已经构建了一遍了，我们只要告诉它不要重复构建就好。通过在配置中启用 cache，Webpack 会缓存已经构建好的模块和 chunk，之后的构建过程 Webpack 会优先使用缓存。
4. 多进程构建
使用多进程构建是提升 Webpack 打包速度的一种有效方法，它可以充分利用主机多核 CPU 的特性，减少 Webpack 打包所需的时间。通过使用 happyPack 或 thread-loader 可以实现多进程并行构建。
5. Tree Shaking
Tree Shaking 可以帮你去除代码中未被使用的部分，减小包的体积，也可以加快 Webpack 的打包速度。可以通过在打包配置文件中开启 UglifyJSPlugin 的 deadcode 选项，以实现 Tree Shaking 的功能。
示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
---- -----------------
------- --------- -------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
-------- -
--- -------------------
-------- ----------
----- ----------------
----- ----------------------- -----------------------------
---
--- -------------------------------------
----- -----------
---------- ---------
---
--
--总结
以上是一些优化 Webpack 打包速度的策略，我们可以根据具体项目实际情况，选取几个或者全部使用。总之，优化 Webpack 打包速度能够让我们在增加代码复杂度的前提下，最大限度地提高开发效率，使前端项目更加高效、健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ad1d8968c7c53b0a4b3fd