在前面的文章中，我们已经学习了 webpack 的基本使用方法和一些常用的配置项。但是，当我们的项目越来越大，构建时间越来越长时，我们就需要对 webpack 进行一些优化配置，以提高构建速度和性能。
1. 开启多线程构建
在 webpack 构建项目时，一般只会使用一个 CPU 核心，这样会导致构建速度缓慢。我们可以使用 thread-loader 或 HappyPack 等插件来开启多线程构建，以加快构建速度。
1.1 thread-loader
thread-loader 可以将一些耗时的操作（如 babel 转译）放到 worker 池中运行，从而实现多线程构建。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ----------------
-------- -
-------- -- -- -----
--
--
---------------
--
--
--
--
--1.2 HappyPack
HappyPack 可以将 loader 的执行过程放到子进程中，从而实现多线程构建。
-- -------------------- ---- -------
-- -----------------
----- --------- - ---------------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- -------------------
-------- -
--- -----
--
--
--
--
--
--
-------- -
--- -----------
--- -----
-------- -----------------
---
--
--2. 使用 DllPlugin 和 DllReferencePlugin 预编译资源
当我们的项目中引用了一些体积较大的第三方库（如 React、Vue 等），每次构建时都需要重新打包这些库，导致构建时间变长。我们可以使用 DllPlugin 和 DllReferencePlugin 预编译这些库，以加快构建速度。
2.1 创建 Dll 文件
首先，我们需要创建一个 webpack.dll.js 配置文件，用于打包需要预编译的库。
-- -------------------- ---- -------
-- --------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- --------- -------------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- -------------
--
-------- -
--- -------------------
----- -------------
----- ----------------------- ----------------------------
---
--
--其中，entry 中的 vendor 数组为需要预编译的库名，output 中的 library 为生成的 Dll 文件对外暴露的变量名，plugins 中的 DllPlugin 用于生成一个 manifest 文件，记录了 Dll 文件中每个模块的信息。
然后，我们在命令行中执行以下命令，生成 Dll 文件和 manifest 文件：
webpack --config webpack.dll.js
2.2 引入 Dll 文件
接下来，我们需要在项目中引入生成的 Dll 文件和 manifest 文件。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- ----------------------- ----------------------------
---
--
--其中，DllReferencePlugin 用于将 Dll 文件中的模块映射到当前的模块中。
3. 使用 tree shaking
tree shaking 是一个用于剔除无用代码的技术，可以大幅减小打包后的文件体积。在 webpack 中，我们可以使用 UglifyJSPlugin 和 OptimizeCSSAssetsPlugin 来实现 tree shaking。
-- -------------------- ---- -------
-- -----------------
----- -------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
-- ---
------------- -
---------- -
--- ----------------
------ -----
--------- -----
---------- -----
---
--- ----------------------------
--
--
--4. 使用缓存和持久化缓存
当我们对代码进行构建时，webpack 会生成一些中间文件，以及一些用于记录构建过程的数据。这些数据可以被缓存起来，以便下次构建时可以直接使用缓存，从而减少构建时间。
4.1 使用缓存
在 webpack 中，我们可以使用 cache-loader 来实现缓存。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- ---------------
--
--
--
--
--
--4.2 使用持久化缓存
在 webpack 4 中，我们可以使用 cache 选项来开启持久化缓存。
// webpack.config.js
module.exports = {
// ...
cache: {
type: "filesystem",
cacheDirectory: path.resolve(__dirname, ".webpack_cache"),
},
};其中，type 为缓存类型，cacheDirectory 为缓存目录。
5. 使用 splitChunks 进行代码分割
在项目中，我们可以将一些公共代码（如第三方库、公共组件等）提取出来，打包成一个单独的文件，以便浏览器可以缓存这些文件，从而减少页面加载时间。在 webpack 中，我们可以使用 splitChunks 进行代码分割。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
--
-------- -
---------- --
--------- ----
------------------- -----
--
--
--
--
--其中，chunks 为需要分割的代码块类型，cacheGroups 用于配置分割的规则。
结语
本文介绍了一些 webpack 的优化配置，包括开启多线程构建、使用 DllPlugin 和 DllReferencePlugin 预编译资源、使用 tree shaking、使用缓存和持久化缓存以及使用 splitChunks 进行代码分割。这些技术可以帮助我们提高构建速度和性能，让我们的项目更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da624ea941bf713425de1a
