如何分析Webpack构建耗时？Vue项目HMR重建慢排查求助

我使用vue-cli创建了一个包含25个入口的小型Vue项目，开发阶段开启HMR后，当前重建耗时约10秒。我通过--profile --progress参数启动webpack-dev-server，输出内容如下：

webpack: Compiling...
308ms building modules
50ms sealing
0ms optimizing
0ms basic module optimization
6ms module optimization
3ms advanced module optimization
53ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
0ms module and chunk tree optimization
0ms chunk modules optimization
1ms advanced chunk modules optimization
13ms module reviving
0ms module order optimization
5ms module id optimization
6ms chunk reviving
3ms chunk order optimization
10ms chunk id optimization
44ms hashing
5ms module assets processing
76ms chunk assets processing
39ms additional chunk assets processing
0ms recording
418ms additional asset processing
0ms chunk asset optimization
8396ms asset optimization
95% emitting
DONE Compiled successfully in 9512ms + 52 hidden assets
[466] (webpack)/hot nonrecursive ^./log$ 170 bytes {5} [built] [] -> factory:1ms dependencies:0ms = 1ms
[499] ./node_modules/moment/locale ^./.*$ 2.88 kB {5} [optional] [built] [] -> factory:0ms building:0ms dependencies:1ms = 1ms
[1048] ./src/module/user/userCredit/userCredit.vue 1.57 kB {7} [built] [] -> factory:0ms building:1ms dependencies:5318ms = 5319ms
[1050] ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-4eeb260f","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/sass-resources-loader/lib/loader.js?{"resources":"/Users/linxi/Develop/maitao/h5-refactor/src/common/scss/variables.scss"}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/module/user/userCredit/userCredit.vue 4.01 kB {7} [built] [] -> factory:0ms building:0ms dependencies:1ms = 1ms
[1060] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/module/user/userCredit/userCredit.vue 5.69 kB {7} [built] [] -> factory:1ms building:44ms dependencies:14ms = 59ms
[1061] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-4eeb260f","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/module/user/userCredit/userCredit.vue 3.15 kB {7} [built] [] -> factory:1ms building:58ms = 59ms

• 1156 hidden modules

我不清楚asset optimization阶段具体在执行什么操作，请问有没有可以查看该阶段内部流程的选项？

首先得说，asset optimization阶段是Webpack处理各类静态资源（图片、字体、编译后的样式文件等）的核心环节，会执行资源压缩、哈希打标、资源合并、以及各类资源处理插件的优化任务。要深挖这个阶段的内部执行细节，你可以试试这几个方法：

• 添加--verbose参数获取详细日志：
  启动dev-server时加上--verbose，它会展开编译流程中每个子步骤的具体执行内容和耗时，包括asset optimization阶段里每个插件的操作。执行命令如下：

  vue-cli-service serve --profile --progress --verbose
  

  日志里会明确显示哪个插件在这个阶段做了什么，耗时多久，能帮你快速定位瓶颈。

• 开启Webpack Debug模式查看底层细节：
  如果需要更底层的执行日志，可以通过设置环境变量DEBUG=webpack:*来触发Webpack的调试输出，它会打印每个阶段的内部函数调用、插件执行细节。命令如下：

  DEBUG=webpack:* vue-cli-service serve --profile --progress
  

  你可以把输出内容过滤出asset optimization相关的部分，就能看到这个阶段的完整执行链路。

• 结合插件排查资源处理瓶颈：
  因为你用的是vue-cli，默认集成了url-loader、css-loader、postcss-loader这类资源处理插件，asset optimization耗时久大概率和这些插件的批量处理有关——比如大量图片的无损压缩、全局样式变量的重复解析（从你的日志看，单个Vue文件的依赖处理耗时也很高，可能和sass-resources-loader全局导入变量有关）。你可以临时注释掉vue.config.js中部分资源处理配置，对比编译耗时，来定位具体是哪个插件拖慢了速度。

• 用Profile数据配合分析工具：
  --profile参数会生成编译性能数据，你可以把这些数据导入到Webpack官方的性能分析工具，或者本地的webpack-bundle-analyzer插件，可视化查看资源处理的各个环节耗时，进一步拆解asset optimization的执行流程。

另外，从你的日志里注意到[1048]这个Vue模块的依赖处理耗时超过5秒，这可能和全局导入的SCSS变量导致每个样式文件重复解析有关，这个点也可能间接影响到asset optimization阶段的速度，建议你同步排查下这个问题。

内容的提问来源于stack exchange，提问作者xi.lin