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

[azerafati]

@deanshub The idea is awesome and I really wish we could have it in webpack-bundle-analyzer, It's very critical to me to compare if you want to "analyze" bundles, so for me this really fits in this library

[deanshub]

it turned into a whole product in my company, not so easy to share anymore...

[valscion]

Yeah this sounds like a tool that might be useful to have via another open source repository.

We support the analyzerMode: 'json' option and that option can be used to create a bundle size diff calculator:

• Added JSON output to the cli and webpack plugin #341

So I'll close this issue now as out of scope, as we won't be implementing this kind of feature directly to webpack-bundle-analyzer, not at least right now.

[kebot]

For people who wants a diff view maybe checkout bundle stats, it does the same thing but with a table view -> https://github.com/relative-ci/bundle-stats