[BUG]: Loaders timing is definitely wrong

[DzmVasileusky]

Describe the bug When running the plugin on my Angular Nx project it is giving a totally wrong timing for the loaders. Probably 100 times larger. All Loaders time is 37966294.4253ms while the whole time is just 525251.3608ms. Probably loaders time should be divided by 100 but in this case 100000ms are untracked.

Expected behavior Plugins + loaders time = Webpack compile time

Screenshots

┌── time-analytics-webpack-plugin
│ Webpack compile takes [525251.3608](tel:5252513608) ms
├── Plugins
│ Plugin AngularWebpackPlugin takes 60096.3449 ms
│ Plugin LicenseWebpackPlugin takes 4395.1316 ms
│ Plugin SourceMapDevToolPlugin takes 3347.4182 ms
│ Plugin DevToolsIgnorePlugin takes 569.8797 ms
│ Plugin OccurrencesPlugin takes 552.3732 ms
│ Plugin CopyPlugin takes 169.9796 ms
│ Plugin MiniCssExtractPlugin takes 43.1402 ms
│ Plugin CommonJsUsageWarnPlugin takes 21.1667 ms
│ Plugin NamedChunksPlugin takes 2.1038 ms
│ Plugin ProgressPlugin takes 2.0933 ms
│ Plugin SuppressExtractedTextChunksWebpackPlugin takes 0.3548 ms
│ Plugin AnyComponentStyleBudgetChecker takes 0.2426 ms
│ Plugin StylesWebpackPlugin takes 0.1340 ms
│ Plugin DedupeModuleResolvePlugin takes 0.0623 ms
│ All plugins take 69200.4249 ms
├── Loaders
│ Loader sass-loader takes [36160633.8809](tel:361606338809) ms
│ Loader @angular-devkit/build-angular takes [1564120.7962](tel:15641207962) ms
│ Loader mini-css-extract-plugin takes [199025.3353](tel:1990253353) ms
│ Loader @ngtools/webpack takes 24519.6353 ms
│ Loader postcss-loader takes 6372.0846 ms
│ Loader resolve-url-loader takes 5982.7546 ms
│ Loader css-loader takes 5363.0943 ms
│ Loader source-map-loader takes 276.8440 ms
│ All loaders take [37966294.4253](tel:379662944253) ms

[ShuiRuTian]

May I ask whether speed-meaure-plugin give a more closely time? And if so, could you please provide a minimal repo to reproduce it?

And, surprisingly, "Plugins + loaders time = Webpack compile time" is not always correct.

I explain some reasons here: https://github.com/ShuiRuTian/time-analytics-webpack-plugin/tree/main/packages/time-analytics-webpack-plugin#output

I could promise at least we collect the start time and end time of each execution of loader, in fact, if they are not in pair, we will throw an exception.

[DzmVasileusky]

@ShuiRuTian Sure here is an output for the speed-measure-plugin

General output time took 9 mins, 24.091 secs
 SMP  ⏱  Plugins
SourceMapDevToolPlugin took 16.66 secs
LicenseWebpackPlugin took 5.67 secs
DevToolsIgnorePlugin took 0.733 secs
OccurrencesPlugin took 0.631 secs
CopyPlugin took 0.188 secs
CommonJsUsageWarnPlugin took 0.053 secs
NamedChunksPlugin took 0.043 secs
SuppressExtractedTextChunksWebpackPlugin took 0.037 secs
ProgressPlugin took 0.003 secs
AnyComponentStyleBudgetChecker took 0.001 secs
StylesWebpackPlugin took 0 secs
DedupeModuleResolvePlugin took 0 secs
 SMP  ⏱  Loaders
css-loader, and 
postcss-loader, and 
resolve-url-loader, and 
sass-loader took 8 mins, 21.86 secs
  module count = 558
@angular-devkit/build-angular, and 
@ngtools/webpack took 2 mins, 31.37 secs
  module count = 4519
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader, and 
resolve-url-loader, and 
sass-loader took 2 mins, 12.51 secs
  module count = 3
@angular-devkit/build-angular, and 
source-map-loader took 1 min, 43.57 secs
  module count = 2174
modules with no loaders took 23.01 secs
  module count = 666
source-map-loader took 3.58 secs
  module count = 34
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader took 2.94 secs
  module count = 2
css-loader, and 
postcss-loader took 0.92 secs
  module count = 7
✔ Browser application bundle generation complete.

So as you see your plugin is giving 602min for sass-loader while speed-measure-plugin 8min which is almost correct (in reality it takes ~ 6min, checked it by removing all the sass).

Sorry I don't have much time to make a reproduction since I was able to fix not supported speed-measure-plugin to work with Webpack5. So it is not critical to me. But I can give you some environment details:

macOS BigSur 11.2.3
node 16.15.0
stack Angular 15 + NX 16

[ShuiRuTian]

@DzmVasileusky Thanks a lot! The info is pretty helpful.

Sorry for the late response, I was busy setting on my new laptop. I will take a look at why SMP works.

[DzmVasileusky]

@ShuiRuTian no problem, sorry I can't make a sample repo for you.

[shaunhurryup]

I have also encountered the same issue. I wanted to analyze the time taken by my webpack build, but the final results left me astonished 😂. The webpack compile time was accurate, but the time spent on plugins and loaders far exceeded the actual time.

┌── time-analytics-webpack-plugin
│ Webpack compile takes 101458.8138 ms
├── Plugins
│ Plugin CaseSensitivePathsPlugin takes 370473.3764 ms
│ Plugin HtmlWebpackPlugin takes 134.7128 ms
│ Plugin MiniCssExtractPlugin takes 13.9417 ms
│ Plugin CleanWebpackPlugin takes 1.3843 ms
│ Plugin OptimizeCssAssetsWebpackPlugin takes 1.0331 ms
│ Plugin EnvironmentPlugin takes 0.1740 ms
│ Plugin Dotenv takes 0.0172 ms
│ All plugins take 370624.6394 ms
├── Loaders
│ Loader cache-loader takes 957043.9859 ms
│ Loader babel-loader takes 61932.0609 ms
│ Loader css-loader takes 16546.3289 ms
│ Loader postcss-loader takes 2883.7075 ms
│ Loader url-loader takes 486.2814 ms
│ Loader style-loader takes 196.9468 ms
│ Loader file-loader takes 9.2378 ms
│ Loader raw-loader takes 3.1674 ms
│ All loaders take 1039101.7165 ms

[bupaev]

Yep, I've noticed the same issue: compile time is correct (overall build time is about 31.6 sec), but loaders take some unrealistic amount of time

[ShuiRuTian]

@xincan1949 @bupaev Sorry for the late response, I am kind of busy this week.

I tried to reproduce this issue, but the result is not obvious, the progress is slow.

Would you mind create a repo which gives a more significant result like the screenshot?

[shaunhurryup]

I'm sorry. It's a company project. I can't do this. But I think this problem is highly reproducible, you can find any code on GitHub that can be built by yarn should be able to be reproducible

[ShuiRuTian]

Interesting, it might be related to package manager?

Will have a try