Webpack 是前端开发的重要工具之一，它可以将多个模块打包成一个集合的 bundle.js 文件，使得前端开发和部署变得更加简单。但是，Webpack 打包的速度有时候会很慢，这会影响我们的开发效率。因此，在这篇文章中，我将为大家总结一些优化 Webpack 打包速度的技巧，以提高我们的工作效率。
1. 使用输入和输出路径的绝对路径
在 Webpack 配置文件中，我们通常需要配置输入和输出路径，例如：
module.exports = {
// ...
input: './src/index.js',
output: './dist/bundle.js',
// ...
}但是，这里的输入和输出路径是相对路径，这会导致 Webpack 每次都需要根据相对路径计算真实路径，从而增加了打包的时间。因此，我们应该使用输入和输出路径的绝对路径，例如：
const path = require('path');
module.exports = {
// ...
input: path.resolve(__dirname, './src/index.js'),
output: path.resolve(__dirname, './dist/bundle.js'),
// ...
}这样，在打包的时候，Webpack 就可以直接使用绝对路径，从而减少打包时间。
2. 使用 Happypack 加速打包
Happypack 是一个 Webpack 插件，它可以将 Webpack 的 loader 处理过程变成多线程并发处理。这样就可以加快打包速度，特别是对于大型的项目。使用 Happypack 的方法如下：
首先安装 Happypack：
npm install happypack --save-dev
然后在 Webpack 配置文件中进行配置：
-- -------------------- ---- -------
----- --------- - ---------------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -------------------
-------- ---------------
--
--
--
-------- -
--- -----------
-------- -----------------
---
--
-- ---
-3. 使用 DllPlugin 和 DllReferencePlugin 加速打包
DllPlugin 是一个 Webpack 插件，它可以将特定的依赖项（比如第三方库）拆分成一个单独的文件，并把它们缓存起来。这样，我们就不用每次都在打包的时候重新编译这些依赖项，从而加快了打包的速度。
使用 DllPlugin 的方法如下：
首先在一个单独的 Webpack 配置文件中进行配置，将需要拆分出来的依赖项放在一个数组中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- --------- ------------ -------- ---------------
--
------- -
----- -------------------- --------
--------- ----------------
-------- -----------------
--
-------- -
--- -------------------
----- -------------------- ------- ------------------------
----- -----------------
---
--
--然后在主 Webpack 配置文件中，使用 DllReferencePlugin 引用这些依赖项：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------- - ---------------------------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
----- -------------------- --------
--------- --------------------------
--
-------- -
--- ----------------------------
--------- ---------------
---
--
--这样，在进行打包的时候，Webpack 只需要编译我们的实际代码，而不用重新编译第三方库，从而加快了打包的速度。
4. 使用 Tree Shaking 删除无用代码
Tree Shaking 是 Webpack 2 中新增的一个功能，它可以移除 JavaScript 中的无用代码，从而减小代码体积。这是一种非常有效的优化方式，可以大大提高我们的应用性能。
使用 Tree Shaking 的方法非常简单，只需要在 Webpack 配置文件中添加以下配置：
module.exports = {
// ...
optimization: {
usedExports: true,
},
// ...
}然后在打包的时候，Webpack 就会自动进行 Tree Shaking。但是要注意的是，Tree Shaking 只能处理 ES6 模块化引入的代码，因此我们需要把我们的代码转换成 ES6 模块化的格式。
结论
以上就是一些优化 Webpack 打包速度的技巧总结。这些技巧不仅可以提高我们的工作效率，还可以加快我们的应用性能，从而提高用户体验。当然，还有很多其他的优化方式，我们需要根据具体情况进行选择和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64952edc48841e9894271c11