Webpack-bundle-analyzer: Bundle diff view

[deanshub]

Feature Suggestion

Bundle diff view

I implemented a diff view on top of webpack-bundle-analyzer which helped us a lot and was thinking you might be interested in a PR that allows this within the package.

Technical info

Basically allow the analyzer to receive 2 stats files and show just the diff between them.
Other suggestions are welcome.

[deanshub]

This is how it looks like

where the arrows (🔺🔻) indicate increase\ decrease in size of existing groups\ entries,
the 🆕 means a new file added to the bundle
and the ❎ means this file was removed from the bundle

[slavafomin]

This is awesome. I was thinking about such a tool recently. It will be very handy to control bundle size during the course of the app development. It will be nice to also visually display how much the size of each module actually differs. However, I'm not sure if this would generate a lot of visual clutter.

[deanshub]

So just to keep things clear before I work on the PR,
this feature will allow receiving 2 webpack-stats files (and maybe a flag?)
it'll open webpack-bundle-analyzer in diff mode to see only the changes between the 2

so things like that:

can be simple to understand like that:

hover data is only the diff, so if in the first stats, the bundled weighed 1MB and in the second it weighed 1.4MB, the user will see +400KB on hover data

Everyone's cool with that?

[valscion]

Thanks for the idea!

I'm not sure if it fits well with webpack-bundle-analyzer as it currently stands. It has been simpler to maintain a codebase which does not consider itself of anything else than the current state of the bundle. I can imagine that maintaining this feature in the long run could turn out to be more than we have time for.

[fireridlle]

hi @deanshub . where can I find your plugin?)

[deanshub]

You can't but I'll just paste the code here and maybe in the future I'll fork and add it