Webpack 是前端开发中必不可少的工具，它可以将多个模块打包成一个或多个文件，并且提供了很多功能，如代码分割、懒加载、热更新等等。但是在项目变得越来越复杂时，Webpack 的打包速度可能会变得很慢，特别是在开发过程中反复构建时，构建速度的优化就显得尤为重要。在本文中，我们将会介绍如何优化 Webpack 的构建速度，并提供一些示例代码，帮助您尽快提高前端开发的效率。
1. 更换 loader 和 plugin
首先，我们需要检查项目中使用的 loader 和 plugin，是否有优化的空间。在多次构建过程中，loader 和 plugin 可能不仅仅只是用于完成工作，它们还可能会导致构建速度大幅下降。比如，我们可以通过更换 UglifyJSWebpackPlugin 和 TerserWebpackPlugin 来让打包速度提高5%-10%。
-- -------------------- ---- ------- ----- ------------ - --------------------------------- ----- ------------- - --------- ----- ---------- - --- -------------- --------- ----- ------ ------ ----- -- - -展开代码
2. 缓存加载
Webpack 4 中引入了一种新的持久化缓存机制，该机制可以减少耗时的磁盘 IO 操作。它将所有的模块和 chunk 打包到一个或多个文件中，并生成与内容相关的 hash。
我们只需要在配置文件中增加 cache 和 hard-source-webpack-plugin 即可达到缓存加载的效果。
-- -------------------- ---- ------- ----- ----------------------- - -------------------------------------- ----- -------------- - - ----- ------ ----- -------- - --- ------------------------- - --展开代码
3. 减少文件搜索
工程越来越大，Webpack 会搜索越来越多的文件进行构建，这也是导致构建速度变慢的一个原因。我们可以通过以下两种方式来解决这个问题。
3.1 减少 loader 的搜索范围
在配置 loader 的时候，我们可以使用 include 和 exclude 参数指定 loader 的搜索范围，只在必要时使用。以 babel-loader 为例：
-- -------------------- ---- ------- -------------- - - ----- ------- - ------ -- ----- -------- ------- --------------- -------- ----------------------- -------- -------- -------------- -- - -展开代码
3.2 减少文件搜索的次数
我们可以使用 resolve.alias 来避免大量的文件搜索。比如，我们可以指定 src 目录为项目中的主要代码，减少对 node_modules 目录的搜索：
module.exports = { //... resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }
4. 使用多核处理器
Webpack 也可以使用多核 CPU 来加速构建速度，可以使用 thread-loader 实现已经依赖的 loader 转化为 worker pools 中的 workers。我们可以在配置文件中添加 thread-loader：
-- -------------------- ---- ------- -------------- - - ----- ------- - ------ - - ----- -------- -------- ----------------------- ------- ---- - - ------- ---------------- -------- - -------- -- ------ -------- -- -- -- ----- ------- -- -- -- -- --展开代码
5. 构建分析
如果一切都做得很好，但仍然感觉构建速度太慢，则可能需要进行进一步的排查。Webpack 提供了一种方式来进行构建分析，用于查看打包过程中的某些慢操作或资源消耗。
我们可以安装 webpack-bundle-analyzer 进行构建分析，来找出可能需要进行优化的区域：
npm install --save-dev webpack-bundle-analyzer
在配置文件中添加：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //... module.exports = { //... plugins: [ new BundleAnalyzerPlugin() ] }
运行后可在 127.0.0.1:8888 中查看分析结果。
到此为止，我们已经了解了如何优化 Webpack 的构建速度，并且使用了一些示例代码帮助您提高前端开发的效率。希望这篇文章对您有所帮助，让您的项目能够更快地构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd822aa231b2b7ed008786
