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/