如何在webpack构建中描述耗时的部分

时间:2018-01-03 11:25:05

标签: performance webpack vue.js webpack-hmr vue-loader

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

在开发过程中,当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阶段发生了什么。

有没有可以揭示内部程序的选项?

感谢。

1 个答案:

答案 0 :(得分:1)

我参加聚会有点晚了,但是我使用webpackers ProfilingPlugin https://webpack.js.org/plugins/profiling-plugin/对其进行了调试。您可以通过提供这些标志--plugin webpack / lib / debug / ProfilingPlugin

来快速启用它