How to profile time consuming part in webpack build

Question

I have a small VUE project with 25 entries which is created by vue-cli.

During the development, when HMR is on, the rebuild time is about 10s now.

I use --profile --progress to start webpack-dev-server and the output is as following:

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

I have no idea what's going on during asset optimization phase.

Is there any options that can reveal the inner procedures?

Thanks.

Answer 1

I am a bit late to the party but I debugged it with webpackers ProfilingPlugin https://webpack.js.org/plugins/profiling-plugin/. You enable it quickly by suppling these flags --plugin webpack/lib/debug/ProfilingPlugin