关于webpack5: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 总结，有脱漏之处欢送评论留言探讨