作者：京东科技 牛志伟
近期对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总结，有脱漏之处欢送评论留言探讨