在前端开发中，随着项目越来越庞大，项目的构建时间也会逐渐增加。这时候我们就需要对构建流程进行优化，提高构建速度，提高开发效率。Webpack 是一个非常强大的构建工具，在这篇文章中，我们将详细介绍如何通过以下三个绝招来优化 Webpack 的构建速度。
1. 使用 DllPlugin 进行预编译
DllPlugin 是 Webpack 3 中引入的插件，它可以打包一份第三方库文件并缓存起来，让每一次的构建过程中都可以直接使用。这样构建过程中就无需重复打包第三方库，从而大幅提高构建速度。
步骤
1.创建 webpack.config.dll.js。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
------- --------- ------------ ----------
--
------- -
----- ----------------------- ----------
--------- ----------------
-------- -------------
--
-------- -
--- -------------------
----- ----------------------- -------------------------------
----- -------------
---
--
--2.运行构建命令，生成 vendor.dll.js 和 vendor-manifest.json。
webpack --config webpack.config.dll.js
3.修改 webpack 配置文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------- - ---------------------------- -----------------------------
-------------- - -
------ -
---- -----------
--
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
- ----- -------- -------- --------------- ------- -------------- --
--
--
-------- -
--- -------------------------------------
----- ----------
---
--- ----------------------------
-------- -------------------- ----------
--------- ---------------
---
--
--效果
使用 DllPlugin 插件进行预编译可以大幅提高构建速度。
2. 使用 HappyPack 进行多线程构建
Webpack 的构建是单线程的，因此构建速度会受到 CPU 的限制。使用 HappyPack 可以将 Webpack 的构建过程变为多线程构建，从而提高构建速度。
步骤
1.安装 HappyPack。
npm install --save-dev happypack
2.修改 webpack 配置文件。
-- -------------------- ---- -------
----- --------- - ---------------------
----- -- - --------------
----- --------------- - ---------------------- ----- ---------------- ---
-------------- - -
------- -
------ -
-
----- --------
---- -------------------
-------- ---------------
--
--
--
-------- -
--- -----------
--- -----
----------- ----------------
-------- -
-
------- ---------------
-------- -
-------- --------------------- ----------------
-------- ------------------------------------------- ---------------------------------------
--
--
--
---
--
--使用 HappyPack 进行多线程构建可以大幅提高构建速度。
3. 使用 cache-loader 进行缓存
Webpack 的缓存机制是基于文件内容的，因此每次构建的过程中都需要重新生成文件内容的 hash 值，导致构建时间变长。使用 cache-loader 可以将构建过程中产生的中间文件缓存起来，从而避免重新生成文件内容的 hash 值，提高构建速度。
步骤
1.安装 cache-loader。
npm install --save-dev cache-loader
2.修改 webpack 配置文件。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- ---------------
-------- -
-------- --------------------- ----------------
-------- ------------------------------------------- ---------------------------------------
--
--
--
-------- ---------------
--
--
--
--效果
使用 cache-loader 进行缓存可以大幅提高构建速度，特别是在项目文件较多的情况下。
总结
Webpack 优化之构建速度的三个绝招包括：
- 使用 DllPlugin 进行预编译
- 使用 HappyPack 进行多线程构建
- 使用 cache-loader 进行缓存
通过这些优化操作，可以大幅提高 Webpack 的构建速度，提高前端开发效率，在项目中得到广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64709667968c7c53b0ebacb3