当我们在开发前端应用程序时，Webpack 是其中一个重要的构建工具。但是，Webpack 打包时间过长却是一个常见的问题。所以，我们需要学会优化 Webpack 的性能，以提升打包速度。
1. 最小化编译范围
如果我们只需要构建特定的文件（例如，我们只需要构建 src 目录下的 JavaScript 文件），那么我们可以通过配置 loader 或使用 Webpack resolve-alias 来只编译需要的文件。这样做可以减少不必要的构建时间和资源消耗。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- -- --- ---- ---------- ------
------- -
------ -
-
----- --------
-------- ------
---- --------------
-
-
-
--- -------------------- ---- -------
-- ---- ------------- -------
-------------- - -
-------- -
------ -
---- ----------------------- ------
-
-
-2. 合理使用 loader 和插件
Webpack 根据指定的 loader 转换文件。然而，有些 loader 会导致性能下降，特别是在多个 loader 堆叠的情况下。所以，我们需要避免使用不必要的 loader 和插件。
此外，使用一些比较轻量级的插件也可以有效地提升 Webpack 的性能，例如 HardSourceWebpackPlugin和 cache-loader。HardSourceWebpackPlugin 会在第一次构建后生成缓存文件，并在未更改文件时重用缓存。而 cache-loader 会在每个 loader 中添加缓存机制，减少运行时间。
3. 合并代码
Webpack 通过代码分离和按需加载，可以帮助我们更好地管理应用程序的 JavaScript 代码。但是，当我们在生产环境中构建应用程序时，代码合并是必要的，因为它可以减少 HTTP 请求的数量。
我们可以通过 Webpack 的 SplitChunksPlugin 来实现代码合并。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}4. 使用 Tree Shaking
Tree Shaking 是一种通过删除未使用的代码来减少 JavaScript 文件大小的技术。我们可以使用 Webpack 的 uglifyjs-webpack-plugin 或 terser-webpack-plugin 来完成这个过程。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin()]
}
}5. 开启缓存
如果我们在开启缓存后多次更改了代码，Webpack 将只编译已更改的文件。因此，开启缓存可以极大地提高 Webpack 的构建速度。我们可以通过 cache: true 开启缓存。
module.exports = {
// 开启缓存
cache: true
}结论
我们经常需要考虑提高应用程序的性能，为用户提供更好的用户体验。通过以上几个优化步骤，我们可以有效地提升 Webpack 打包速度，降低资源消耗。当开始优化性能时，要注意深入理解每个优化方案及其影响-没有银弹。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67761da36d66e0f9aa0a4a50