Webpack 是前端构建工具中最受欢迎的之一，但是当项目变得越来越大，构建性能的问题也随之而来。这篇文章将介绍一些优化 Webpack 构建性能的方法，以便让你的项目更快地构建。
1. 合理使用 Loader
Loader 是 Webpack 处理文件的核心部分，它们负责将不同格式的文件转换为 JavaScript 模块。但是在使用 Loader 时，您需要考虑的是它们是否真正需要执行。因为每一个 Loader 的执行都会消耗一定的时间，因此可能会影响构建性能。
转换文件的时候，我们需要注意性能问题。举个例子，如果你要处理一份大文件，但只需要其中某些部分，你可以选择 expose-loader 或 ignore-loader 来确定哪些部分需要处理，哪些部分可以忽略。
-- -------------------- ---- ------- -- ----------------- -------------- - - -- --- ------- - ------ - - ----- ------------- -- -- ---- -- ------- --------------- - - - --展开代码
这个规则将忽略这个文件，从而减少了一些构建时间。
2. 使用 Parallel-webpack
Parallel-webpack 是一个能让 Webpack 执行多个任务的工具，以便加速构建过程。
安装 parallel-webpack：
npm install parallel-webpack --save-dev
并将其作为 Webpack 的插件：
-- -------------------- ---- ------- -- ----------------- ----- -------------------- - ------------------------------------------------- -------------- - - -- --- -------- - --- ---------------------- --------- - ------- - --------- ----- -- --------- - ------------- ---- - - -- - --展开代码
这样，你就可以在构建时间中获得明显的性能提升。
3. 使用缓存
我们可以使用 hard-source-webpack-plugin 对编译结果进行缓存。这个插件会缓存中间的编译结果，从而减少重复过程的时间，提高构建性能。
安装插件：
npm install hard-source-webpack-plugin --save-dev
并将其作为 Webpack 的插件：
// webpack.config.js const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports = { // ... plugins: [ new HardSourceWebpackPlugin() ] };
这个插件不仅适用于大型项目，也适用于中小型项目。
4. 拆分 chunks
Chunks 是 Webpack 中的小块，对于大型项目来说，这对于构建时间的影响非常大。在 Webpack 中，我们可以通过如下配置来优化它们：
- （new）CommonsChunkPlugin：将重复的模块提取到一个 “vendor” chunk 中，避免重复编译这些文件，此可以利用浏览器缓存，并提高加载速度。第三方依赖通常适合做成 commons chunk，因为不经常变动，并且可以被其他模块引用。
- （推荐）SplitChunksPlugin：自 Webpack 4 将移除 CommonsChunkPlugin，推荐使用 SplitChunksPlugin，它可以将公共的 chunk 提取出来，但是可以通过多种方式控制(chunk 分离)。
-- -------------------- ---- ------- -- ----------------- -------------- - - -- --- ------------- - ------------ - ------- ------ -------- -- ----- -------- - - --展开代码
采用以上配置你就可以将公共 chunk 提取出来了。
5. 合理运行 Webpack
有时候，我们只需要一部分代码做某些事情，而不是运行整个 Webpack 构建过程。在这种情况下，我们可以使用一些常见的工具来完成此操作，例如：
- Webpack CLI：提供了一些额外的选项，可以让你更好地控制 Webpack 的构建过程。
- Webpack-serve：一个为本地开发环境提供的 Webpack 服务器，内置了 HMR（热模块替换），可以快速开发。
- Webpack-dev-server：一个为本地开发环境提供的 Webpack 服务器，适合于开发静态网站和单页应用程序。
总结
以上是一些优化 Webpack 构建性能的方法。在实际使用中，你需要根据实际情况和项目需求做出决策，以获得最佳性能。除此之外，你还可以在不断地使用 Webpack 过程中慢慢积累经验，甚至去了解 Webpack 更深入的东西。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64574b62968c7c53b0a0f5dc
