search

webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
MIT License
12.56k stars 483 forks source link

FoamTree color stability #500

Closed CreativeTechGuy closed 2 years ago

CreativeTechGuy commented 2 years ago

Issue description

It's currently impossible to compare two outputs side-by-side since the boxes can shift around and the colors are seemingly random. I'd like a way to be able to compare differences between two bundle analysis and the easiest way I can think of achieving that is to make the colors deterministic rather than random.

Technical info

Not really an issue, more of a suggestion.

From the FoamTree docs, we could use groupColorDecorator and attach the color to each item in the list of groups. (See the "Colors defined in the data model" section of the docs). To ensure stability between different runs, the colors should be based on the file name of the chunk. Webpack's chunks are in the form of <id>.<hash>.<ext> so we should only consider the first part of that when determining the color since the hashes will change.

I believe the id numbers of each chunk also are in a finite range (cannot confirm but just from testing) so we could translate the 1-999 ids with a percent in the hsl color space. This should give us an easy way to map between chunks and colors and would give a pretty decent spread of colors.

For chunks with names rather than numbers as their ids, we could come up with a similar hashing algorithm which turns the characters into a color.

Debug info

N/A

valscion commented 2 years ago

Nice idea! This could indeed be useful. And even if the color grouping would sometimes not work correctly, even getting it right 99% of cases could be useful.

Webpack's chunks are in the form of <id>.<hash>.<ext>

I think that's only the default chunk name and can be changes by the user. So it would require more work to do this or another solution. Maybe the ID numbers could indeed work?

It's likely that this feature would not be done by me or @th0r so feel free to create a PR as a proof of concept to show if this feature would be possible to make with an OK enough maintenance cost.

CreativeTechGuy commented 2 years ago

You were totally right about the lack of uniformity in the chunk names. I was so used to my naming scheme I forgot it was customizable.

I think you'll be happy with the solution I came up with as it can handle any format the user tries and has a nice fallback even if nothing fancy can be determined.