如何在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