webpack-bundle-analyzer icon indicating copy to clipboard operation
webpack-bundle-analyzer copied to clipboard

Published 20 hours ago • verified publisher icon webpack-contrib

Bundle diff view

Open deanshub opened this issue 4 years ago • 6 comments

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 avatar Dec 03 '20 12:12 deanshub

This is how it looks like image 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

deanshub avatar Dec 10 '20 13:12 deanshub

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.

slavafomin avatar Feb 16 '21 12:02 slavafomin

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: image

can be simple to understand like that: image

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?

deanshub avatar Feb 16 '21 13:02 deanshub

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.

valscion avatar Feb 17 '21 07:02 valscion

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

fireridlle avatar Mar 16 '21 11:03 fireridlle

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

deanshub avatar Mar 16 '21 16:03 deanshub

@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

azerafati avatar Nov 09 '22 13:11 azerafati

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

deanshub avatar Nov 10 '22 07:11 deanshub

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:

  • https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/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.

valscion avatar Nov 10 '22 07:11 valscion

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

kebot avatar Nov 21 '22 22:11 kebot