随着前端技术的不断发展，webpack 作为前端构建工具之一，在项目开发中越来越得到重视，但是 webpack 的构建速度较慢，成为了瓶颈。本文将详细介绍 webpack 构建速度优化方案，帮助开发者提升打包速度，提高开发体验。
1. 构建速度问题
webpack 构建速度慢的原因主要有以下几点：
- 复杂的配置：复杂的 webpack 配置会影响构建速度。
- 大量的文件：当有大量的文件需要处理时，webpack 会耗费更多的时间。
- source map：开启了 source map 会大大降低构建速度。
- babel：babel 的转换过程也会影响构建速度。
2. 优化方案
为了解决以上问题，可以从以下几个方面进行优化：
2.1 简化 webpack 配置
简化 webpack 配置是提高 webpack 构建速度的关键。优化 webpack 配置可以通过以下几种手段实现：
2.1.1 减少处理模块
减少处理模块是优化 webpack 构建速度的一种较为简单的方法。可以通过使用 exclude 和 include 来排除或包含文件或文件夹。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- --------------- -- -- ------------ ---
---- ---------------
--
-
----- ---------
-------- -------------------- ------- -- --- --- ----- --- --
---- ---------------- --------------
--
--
--
--2.1.2 使用插件
webpack 插件可以帮助我们优化构建速度。以下是一些常用的插件：
webpack.IgnorePlugin：用于排除某些模块。webpack.DllPlugin和webpack.DllReferencePlugin：用于分离出不变的代码和变化的代码，避免重复打包。webpack.HotModuleReplacementPlugin：用于热更新，提高开发体验。
2.1.3 使用缓存
使用缓存可以减少重复操作，提高 webpack 构建速度。webpack v5 以上的版本默认开启持久化缓存，但是如果需要手动配置缓存，可以通过以下方式：
module.exports = {
cache: {
type: "filesystem",
// 可自定义缓存目录，避免缓存冲突
cacheDirectory: path.resolve(__dirname, ".cache"),
},
// 其他配置
};2.2 处理 source map
开启 source map 可以帮助我们调试代码，但是它也会影响构建速度。以下是一些处理 source map 的方式：
2.2.1 禁用 source map
如果不需要调试、排错，可以将 devtool 设置为 false，关闭 source map。
module.exports = {
// 其他配置
devtool: false,
};2.2.2 生产环境不输出 source map
webpack 构建时会将 source map 输出到生成的文件中，可以在 output 中配置关闭。
module.exports = {
// 其他配置
output: {
filename: "[name].js",
sourceMapFilename: "", // 不输出 sourcemap
},
};2.2.3 使用 cheap-source-map
cheap-source-map 可以忽略源代码中的行信息，只保留行数的映射关系，提高构建速度。
module.exports = {
devtool: "cheap-source-map",
// 其他配置
};2.3 使用多线程或多进程构建
webpack 在构建时只使用单个线程，这会导致构建速度慢。使用多线程或多进程可以提高构建速度。以下是一些常用的插件：
thread-loader：用于对 loader 进行多线程构建。HappyPack：用于对 loader 进行多进程构建。ParallelUglifyPlugin：用于对 JS 进行多进程压缩。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ----------------
-------- -
-------- --
--
--
---------------
--
--
--
--
--2.4 使用缓存 loader
使用缓存 loader 可以避免重复操作，提高 webpack 构建速度。以下是一些常见的缓存 loader：
babel-loader：使用cacheDirectory选项启用缓存。css-loader：使用cacheDirectory选项启用缓存。cache-loader：用于对其他 loader 启用缓存。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
-------- -
--------------- ----- -- ----
--
--
--
--
-
----- ---------
---- -
-
------- ---------------
-------- -
--------------- ----- -- ----
--
--
-------------
--
--
--
--
--2.5 拆分 vendor
将不经常变化的依赖打包成单独的文件，可以避免重复打包，并提高构建速度。
-- -------------------- ---- -------
-------------- - -
------ -
----- -----------------
------- --------- ------------ -------- ---------------
--
-- ----
------------- -
------------ -
------------ -
------- -
------- ----------
----- ---------
----- ---------
-------- -----
--
--
--
--
--3. 总结
优化 webpack 构建速度是提高开发效率和体验的关键。通过简化 webpack 配置、处理 source map、使用多线程或多进程构建、使用缓存 loader、拆分 vendor 等方式，可以大幅提高 webpack 构建速度，让前端开发者体验更佳舒适。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ff0d448841e9894f7299f