Webpack 是前端开发中常用的模块打包工具，它能够将多个模块打包成一个或多个 bundle 文件，从而提高应用的性能和可维护性。但是，随着项目规模的增大和复杂度的提高，Webpack 构建的速度也会变得越来越慢，这极大地影响了开发效率。在本文中，我们将介绍一些实用的建议，帮助您优化 Webpack 4 的构建速度。
1. 使用多进程并行构建
Webpack 4 默认使用单进程构建，这导致构建速度较慢。可以通过使用多进程并行构建来提高构建速度。我们可以使用 thread-loader 来实现多进程构建，它可以将一些耗时的 loader 放到 worker 中执行。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ----------------
-------- -
-------- --
------------------- ---
--
--
---------------
--
--
--
--
--在上面的配置中，我们使用 thread-loader 将 babel-loader 放到 worker 中执行。其中，workers 指定了 worker 的数量，workerParallelJobs 指定了每个 worker 同时执行的任务数量。
2. 使用缓存
Webpack 4 默认开启了缓存，可以将构建结果缓存到硬盘中，下次构建时可以直接使用缓存，从而提高构建速度。我们可以使用 cache-loader 来实现缓存。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
---------------
---------------
--
--
--
--
--在上面的配置中，我们使用 cache-loader 将 babel-loader 的结果缓存到硬盘中。如果下次构建时，输入的文件和配置都没有改变，Webpack 将直接使用缓存，从而提高构建速度。
3. 减小文件搜索范围
Webpack 4 默认会搜索整个项目中的文件，这导致构建速度较慢。我们可以通过设置 resolve.modules 和 resolve.extensions 来减小文件搜索范围。
-- -------------------- ---- -------
-------------- - -
-------- -
-------- -
---------------
----------------------- -------
--
----------- ------- ---------
--
--在上面的配置中，我们将 node_modules 和 src 目录添加到了搜索路径中，同时指定了需要搜索的文件扩展名。这样做可以减小文件搜索范围，从而提高构建速度。
4. 使用 DllPlugin
DllPlugin 是一个用于分离第三方库的插件，可以将第三方库打包成单独的 bundle 文件，从而提高构建速度。我们可以先使用 DllPlugin 将第三方库打包成单独的 bundle 文件，然后在应用程序中引用该文件。
-- -------------------- ---- -------
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------ --------- -------------
------- -----------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- -----------------------------
---
--
--
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ----------------------------
--------- --------------------------------------
---
--- ----------------------------
--------- ---------------------------------------
---
--
--在上面的配置中，我们先使用 webpack.config.dll.js 文件打包第三方库，然后在 webpack.config.js 文件中引用该文件。在 webpack.config.js 文件中，我们使用 DllReferencePlugin 引用了 react.manifest.json 和 lodash.manifest.json 文件，这样 Webpack 就可以直接使用已经打包好的第三方库，从而提高构建速度。
结论
在本文中，我们介绍了一些实用的建议，帮助您优化 Webpack 4 的构建速度。这些建议包括使用多进程并行构建、使用缓存、减小文件搜索范围和使用 DllPlugin。通过使用这些建议，您可以提高项目的开发效率和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675fc23603c3aa6a56f89066