利维坦PC脚手架耗时分析及优化

利维坦PC脚手架耗时分析及优化.md

脚手架耗时分析及优化

未参与分析的

• html-webpack-pldugin

优化结果

耗时已是跑了多次项目的大概均值。热重启场景均是只增删一两个字符串。

热重启：

冷·耗时(s)	热·耗时(s)	场景
349.972（~6min）	26.3s [26,27,26]	初始化
178.877（~3min）	-	去除case-sensitive-paths-webpack-plugin
203.049s（~3min）	-	添加thread-loader
107.103s（1min47s）	14.3s [15,15,13]	移除speed-measure-webpack-plugin

build构建

耗时(s)	场景
274.85 (~4min30s)	使用hard-source-webpack-plugin和thread-loader多线程
123.55s(~2min4s)	thread-loader，不使用hard-source-webpack-plugin

详细数据：

• 默认场景 冷重启: 349.972s

 
 
  SMP  ⏱  
 General output time took 4 mins, 34.24 secs
 
  SMP  ⏱  Plugins
 CaseSensitivePathsPlugin took 3 mins, 4.97 secs
 IgnorePlugin took 40.3 secs
 HotModuleReplacementPlugin took 4.8 secs
 ManifestPlugin took 1.18 secs
 WatchMissingNodeModulesPlugin took 0.004 secs
 ModuleNotFoundPlugin took 0.001 secs
 InterpolateHtmlPlugin took 0 secs
 DefinePlugin took 0 secs
 
  SMP  ⏱  Loaders
 babel-loader took 4 mins, 20.19 secs
   module count = 3030
 css-loader, and 
 postcss-loader, and 
 less-loader took 3 mins, 41.61 secs
   module count = 368
 url-loader took 1 min, 42.36 secs
   module count = 75
 modules with no loaders took 14.35 secs
   module count = 58
 file-loader took 9.76 secs
   module count = 7
 css-loader, and 
 postcss-loader took 6.38 secs
   module count = 9
 style-loader, and 
 css-loader, and 
 postcss-loader, and 
 less-loader took 1.014 secs
   module count = 368
 html-webpack-plugin took 0.082 secs
   module count = 1
 style-loader, and 
 css-loader, and 
 postcss-loader took 0.032 secs
   module count = 7
 

根据耗时得知，耗时关键路径：

1. case-sensitive-paths-webpack-plugin
2. babel-loader
3. 样式loader

优化步骤

1. 去除case-sensitive-paths-webpack-plugin ，后打包耗时178.877s

 SMP  ⏱  
General output time took 2 mins, 19.3 secs

 SMP  ⏱  Plugins
IgnorePlugin took 23.71 secs
HotModuleReplacementPlugin took 2.48 secs
ManifestPlugin took 0.94 secs
WatchMissingNodeModulesPlugin took 0.001 secs
ModuleNotFoundPlugin took 0 secs
InterpolateHtmlPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
babel-loader took 2 mins, 7.18 secs
  module count = 3030
css-loader, and 
postcss-loader, and 
less-loader took 1 min, 56.79 secs
  module count = 368
url-loader took 48.76 secs
  module count = 75
modules with no loaders took 9.9 secs
  module count = 58
file-loader took 5.47 secs
  module count = 7
css-loader, and 
postcss-loader took 4.049 secs
  module count = 9
style-loader, and 
css-loader, and 
postcss-loader, and 
less-loader took 0.688 secs
  module count = 368
style-loader, and 
css-loader, and 
postcss-loader took 0.031 secs
  module count = 7
html-webpack-plugin took 0.023 secs
  module count = 1

2. 多进程

happypack vs hard-source-webpack-plugin vs thread-loader

​ 2.1. 添加thread-loader (203.049s)

 SMP  ⏱  
General output time took 2 mins, 36.71 secs

 SMP  ⏱  Plugins
IgnorePlugin took 26.061 secs
HotModuleReplacementPlugin took 2.85 secs
ManifestPlugin took 1.072 secs
WatchMissingNodeModulesPlugin took 0.002 secs
InterpolateHtmlPlugin took 0.001 secs
ModuleNotFoundPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
thread-loader, and 
babel-loader took 2 mins, 16.19 secs
  module count = 1501
css-loader, and 
postcss-loader, and 
less-loader took 2 mins, 13.38 secs
  module count = 368
thread-loader, and 
style-loader, and 
css-loader, and 
postcss-loader, and 
less-loader took 1 min, 52.73 secs
  module count = 368
babel-loader took 1 min, 51.18 secs
  module count = 1529
url-loader took 1 min, 9.65 secs
  module count = 75
modules with no loaders took 13.88 secs
  module count = 58
file-loader took 7.47 secs
  module count = 7
css-loader, and 
postcss-loader took 5.24 secs
  module count = 9
thread-loader, and 
style-loader, and 
css-loader, and 
postcss-loader took 5.2 secs
  module count = 7
html-webpack-plugin took 0.037 secs
  module count = 1

build 构建

• 使用hard-source-webpack-plugin和 hread-loader多线程

  耗时 274.85，约4分30秒

• 移除hard-source-webpack-plugin , 只使用 thread-loader多线程

  耗时 123.55s，约2分钟4秒