Visualize time spent inside plugins/loaders #126
Description
At ReactiveConf Tobias, Sean and I were asked multiple times "why is my build so slow". Also at other events I notice people don't know how to improve their webpack build time because they have no insights.
At the event we'd start explaining some basic performance optimizations, but also saying "it depends on what you're trying to do", or "make webpack do less work" (looking at you @TheLarkInn).
This lead me to think about bundle analyzer; this awesome tool allows us to visualize what's actually going in our bundle, size-wise. By giving these insights, you can actually tackle the problem that's resulting in huge builds.
What if we could do this, but for visualizing the build times? So instead of node packages you'd see "babel-loader", or "resolver plugin" or whatever takes up the most build time.
Some really spaceship ideas;
- Clicking on something like "babel-loader" would show more details, maybe files that took the most time?
- When hovering over default plugins of webpack, show an explanation how to improve performance with it
Feel free to close if this is really not something we want to do, but I wanted to just throw it out here and discuss. (not sure if this has been suggested before btw).
cc @sokra @CompuIves