前言
Webpack 是一个强大的前端构建工具，但是当项目变得越来越庞大时，Webpack 的构建速度和性能问题就日益显著。如何优化 Webpack 构建的速度和性能，无疑是每一个前端开发者都需要解决的问题。本文将探讨 Webpack 进行性能优化的方法和指导，达到提升项目性能的目的。
优化思路
Webpack 进行性能优化的思路通常可以分为以下几个方面：
1. 减少模块的数量
Webpack 在构建时采用模块化编译，模块的数量越多，构建的时间就会越长。因此，我们需要有效地减少模块数量。
2. 优化 loader
使用合适的 loader 能够显著地减少构建时间，所以对于每一个 loader，我们需要优化和选择合适的配置。
3. 优化插件
Webpack 插件能够对代码和资源进行更深度的处理，但也会增加构建时间。因此，在使用插件时，需谨慎选择，并进行适当的配置。
4. 使用 DllPlugin
在 Webpack 中可以使用 DllPlugin 将第三方模块提前打包，达到减少模块数量和提升构建速度的目的。
5. 使用 Webpack 打包分析工具
Webpack 提供了丰富的打包分析工具，通过分析打包产物，可以找到代码中的瓶颈，并进行合理的优化。
优化方法
1. 减少模块的数量
1) 缩小搜索范围
Webpack 默认会遍历整个项目目录来查找模块，这个过程会造成不必要的时间浪费。我们可以通过缩小搜索范围，减少 Webpack 的查找时间。
通过配置 resolve.alias 来指定常用的模块路径，这样 Webpack 就可以直接在指定位置找到它们，而不需要在整个项目目录下搜索。
例如：
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
},
extensions: ['.js', '.json', '.vue', '.scss', '.css']
}@表示项目的根路径extensions表示在引入模块时省略后缀名的配置
2) 使用 exclude 和 include 配置
使用 exclude 和 include 配置能够让 Webpack 只处理需要的文件，而不需要处理不必要的文件，避免了不必要的性能浪费。
例如：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-3) 移除不必要的依赖
在开发过程中，我们常常会添加一些不必要的依赖，这些依赖会增加 Webpack 的处理时间。因此，我们应该仔细审视项目依赖，移除不必要的依赖。
2. 优化 loader
1) 避免不必要的 loader
Webpack 在读取文件时，会根据文件的后缀名来选择相应的 loader 进行处理，如果一个文件不需要任何 loader 处理，我们则应该在配置中将这个 loader 移除。
例如：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------- ----------------
-
-
-2) 开启 loader 缓存
许多 loader 都支持缓存，我们可以将缓存开启，以避免重复编译的情况。
例如：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
--------------- ----
-
-
-
-
-3) 使用 HappyPack
HappyPack 是一个多线程 loader 转换器，它可以让 Webpack 在多个子进程中并行处理任务。使用 HappyPack 之后可以显著地减少构建时间。
例如：
-- -------------------- ---- -------
----- --------------- - ---------------------- ----- ---------------- ---
------- -
------ -
-
----- --------
------- -------------------------
-------- ---------------
-
-
--
-------- -
--- -----------
--- -----
----------- ----------------
-------- ---------------- ----------------
--
-3. 优化插件
1) 移除不必要的插件
Webpack 插件能够对代码和资源进行更深度的处理，但也会增加构建时间。因此，在使用插件时，需谨慎选择，并进行适当的配置。
例如：
plugins: [ new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.CommonsChunkPlugin() ]
2) 开启 Scope Hoisting
Scope Hoisting 是一种将所有模块的代码封装到一个函数中，从而减少编译后代码体积的优化方式。开启 Scope Hoisting 可以显著地减少代码体积以及运行时间。
例如：
new webpack.optimize.ModuleConcatenationPlugin()
3) 开启 ParallelUglifyPlugin
ParallelUglifyPlugin 是一款并行压缩 JS 资源的插件。它利用了负载均衡的思想，将一个大文件分成多个小文件，采用多线程并行压缩，减少了单线程压缩的时间。
例如：
-- -------------------- ---- -------
-------------- - -
-------- -
--- ----------------------
--------- ----------
--------- -
------- -
--------- -----
--
--------- -
--------- ------
------------- -----
-------------- -----
------------ ----
-
-
--
-
--4. 使用 DllPlugin
Webpack 中可以使用 DllPlugin 将第三方模块提前打包，达到减少模块数量和提升构建速度的目的。
例如：
-- -------------------- ---- -------
----- --------- - ---------------------------------
-------------- - -
------ -
------- --------- ------------ --------- -------
--
------- -
----- ----------------------- ---------
--------- ----------------
-------- ----------------
--
-------- -
--- -----------
----- -----------------
----- ----------------------- -----------------------------
--
-
--5. 使用 Webpack 打包分析工具
Webpack 提供了丰富的打包分析工具，通过分析打包产物，可以找到代码中的瓶颈，并进行合理的优化。
我们可以使用 Webpack 内置的 stats 配置或者第三方的 BundleAnalyzerPlugin 插件进行分析。
1) stats 配置
在配置中添加 stats 配置，将构建结果输出到指定的文件中，然后在浏览器中查看结果。
例如：
{
"scripts": {
"build:stats": "webpack --config webpack.config.js --profile --json > stats.json",
"build:open": "webpack-bundle-analyzer stats.json"
}
}2) BundleAnalyzerPlugin 插件
BundleAnalyzerPlugin 会生成一个 HTML 文件，其中包含有关运行时文件大小的可视化报告，从而让我们更好地了解哪些组件占用了最多的空间。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};结论
通过对 Webpack 进行性能优化，我们可以有效地减少构建时间，提高项目的性能。我们可以通过这些技巧来优化我们的 Webpack 构建，发挥出 Webpack 的最大性能。最后，优化 Webpack 还要结合项目实际情况，不断调整和改进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736eb610bc820c5825719df