Webpack5 构建性能优化：构建耗时从 150s 到 60s 再到 10s | 京东云技术团队

作者：京东科技 牛志伟

近期对 Webpack5 构建性能进行了优化，构建耗时从 150s 到 60s 再到 10s，下面详细讲解下优化过程。

优化前现状

1.历史项目基于 Vue3 + Webpack5 技术栈，其中 webpack 配置项由开发者自己维护（没有使用 @vue/cli-service），并且做了环境分离。

2.项目体量大约 5000 个 modules 左右，每次本地构建 build 时耗时约 150s 左右。

优化细节

环境分离

之前已经设计了环境分离，但是一些优化细节没有处理好：

•基础配置文件：webpack.base.js，主要配置了基础的 loader 和 plugin 等

•本地开发配置文件：webpack.dev.js，主要配置了 devServer 和样式、图片资源 loader 等，并 merge 基础配置

•生产环境配置文件：webpack.prod.js，主要配置了样式、图片资源 loader 以及资源压缩和样式抽离等，并 merge 基础配置

优化点：

•热加载相关配置，从 base 移到 dev 配置中，生产环境中不需要热更新

new webpack.HotModuleReplacementPlugin()

•dev 配置中 devtool 类型选择，inline-source-map 修改为 eval-cheap-module-source-map，map 文件使用内联方式构建速度更快。

devtool: 'eval-cheap-module-source-map'

•filename 调整：js/[name].[fullhash].js 去掉 hash，本地开发环境启用热更新，不需要 hash（生产环境需要 hash 刷新缓存）

output: {    filename: 'js/[name].js',    path: path.resolve(__dirname, '../dist'),    publicPath: '/',}

持久化缓存

base 配置中开启持久化缓存（Webpack5 新特性），首次构建耗时增加 15%左右，但是二次构建耗时减少 90%左右

cache: {    type: 'filesystem'}

Loader 相关优化

•尽量减少 loader，比如使用 Asset modules（Webpack5 新特性）替换 url-loader、file-loader、raw-loader

// 字体和小于8kb的图片{    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,    type: 'asset',    parser: {        dataUrlCondition: {            maxSize: 8 * 1024,        },    }}// 图片资源{    test: /\.(png|svg|jpg|gif|cur)$/,    type: 'asset/resource',    exclude: [path.resolve(__dirname, '../../../assets/svg')],}

•thread-loader 耗时任务开启多线程

{    test: /\.vue$/,    use: ['thread-loader', 'vue-loader'],},{    test: /\.(t|j)s$/,    exclude: /node_modules/,    use: ['thread-loader', 'babel-loader'],},{    test: /\.(sa|sc|c)ss$/,    use: ['thread-loader', 'style-loader', 'css-loader', 'sass-loader'},

•esbuild-loader 替换 babel-loader（由于改动较大，没有尝试）

Plugin 相关优化

•使用 speed-measure-webpack-plugin 分析各个 plugin、loader 编译时间

•尽量减少 plugin，比如 HotModuleReplacementPlugin 只在 dev 开启

•升级老旧 plugin，比如 terser-webpack-plugin 版本从 2 升级到 5，构建性能直接提升 50%左右，具体原因有了解的同学可以打在评论区。

优化后效果

•不启用缓存情况下耗时从 150s 减少到 60s 以内

•优化后 speed-measure-webpack-plugin 编译速度分析

•启用持久化缓存情况下，二次构建减少到 10s 以内

Webpack5 总结

以下是从基础、进阶、优化、插件使用以及打包原理几个方面做的 Webpack5 总结，有遗漏之处欢迎评论留言讨论