performance - 如何在 webpack 构建中分析耗时的部分

Question

我有一个由 vue-cli 创建的包含 25 个条目的小型 VUE 项目。

在开发过程中，当HMR开启时，现在重建时间约为10s。

我用 --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 期间发生了什么|阶段。

是否有任何选项可以揭示内部程序？

谢谢。

Answer 1

我参加聚会有点晚了，但我用 webpackers ProfilingPlugin 调试了它 https://webpack.js.org/plugins/profiling-plugin/ .您可以通过提供这些标志来快速启用它 --plugin webpack/lib/debug/ProfilingPlugin