前言
Webpack 是现代前端开发中重要的构建工具之一，但是在项目不断壮大的过程中，Webpack 也可能会遇到一些性能问题。特别是当项目较大时，Webpack 的构建时间会变得非常漫长。因此对于 Webpack 性能的优化就显得非常重要。
本文将介绍一些 Webpack 的性能优化策略和配置分析。
Webpack 性能配置分析
查看打包分析
在分析 Webpack 性能之前需要了解其中做的事情，可以使用 webpack-bundle-analyzer 分析打包后的文件：
npm install webpack-bundle-analyzer --save-dev
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};然后在执行 npm build 后将会启动一个 web 服务显示运行效果，
从图中我们可以看到整个打包后的文件产生了多大，以及每一个模块占用的大小和所占百分比，这对于查找打包文件体积过大和不必要依赖的模块很有用。
优化 loader
现代前端开发越来越依赖于 CSS 预处理器和 JavaScript 的高级语法，这些特性为开发带来了极大的方便，同时也带来了一些不可避免的性能问题。
使用 thread-loader
打包时需要处理的资源过多时比较耗费时间，并且大多数 loader 是 I/O 密集型的，因此我们可以使用 thread-loader 使一些耗时的 loader 在一个单独的 worker 池中运行，并行执行多个任务，以提高构建性能。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
----------------
---------------
--
--
--
--
--缓存 loader
借助 cache-loader 可以在一个 worker 中运行一个 loader 并缓存结果，之后的每次构建将会跳过这个 loader。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
---------------
---------------
--
--
--
--
--优化插件
Webpack 插件可以在打包的不同阶段执行任务，通常插件会增加 build 时间，因此应该常常检查已使用插件的可用性。
减少 plugin 使用次数
Webpack 插件在不同的构建阶段发挥不同的作用，如果某个插件被多次使用，则可以考虑减少其使用次数以提高构建性能。
// webpack.config.js
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin(),
],
};以上配置就将 HtmlWebpackPlugin 使用了两次，我们可以减少使用次数。
优化 plugin 开销
Webpack 插件内部的代码也有可能会影响 build 性能，因此在开发和维护插件时应该注意这一点。如果需要开发一个新插件，可以考虑使用钩子函数编写更为简洁高效的代码。
优化构建目标
只打包所需模块
Webpack 的 all 打包模式会将所有模块全部打包，这会增加资源消耗，可以通过 webpack-parallel-uglify-plugin 插件来按需打包。
// webpack.config.js
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
plugins: [
new ParallelUglifyPlugin(),
],
};CDN 加载
如果我们引用的第三方库都存储在公共 CDN 服务器上，可以在 webpack 配置 externals 属性中声明，这能够提高构建速度。
// webpack.config.js
module.exports = {
externals: {
'jquery': 'jQuery',
},
};总结
优化 Webpack 性能需要从多个方面入手，我们可以优化 loader 和 plugin，查看打包分析，以及优化构建目标。同时，我们需要根据实际情况量身定制优化方案，通过不断实践和总结，才能学以致用应用到项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495ebf348841e98942ec4ae