Recent searches
Search options
The esbuild website now has a bundle analyzer! It's already live here: https://esbuild.github.io/analyze/. Anyone using esbuild as a bundler should be able to use it. I needed one for a project of mine and then one thing led to another...
@evanw does or should compression factor into this?
context: reduction in size-after-gzip is not always proportional to the size of the module you end up "removing" to improve bundle size
(i get the whole parse-javascript-perf argument though)
@thewisenerd This tool doesn't visualize compressed sizes because the underlying data from esbuild doesn't report compressed sizes.
Reporting accurate compressed sizes for files in the bundle seems complicated though since compression is greater when everything is compressed together due to cross-file redundancy.
I guess you would have to manually parse the deflate bitstream and try to associate symbols in the stream with the files they contribute to? And then reimplement all that for Brotli?
@lil5 @ricard The website visualized here isn't mine. It's a code base I use for testing esbuild's bundling speed, and is the biggest and most complicated open-source TypeScript project I could find. 3MB is quite big for a website, but this is meant to be an internal web app (not user-facing) that you load once and then use for a while, so I don't fault them for having a website that big.
@evanw The sunburst is pretty!
It almost certainly doesn't matter, but since I know you like graphics: for purposes like these I often fall back on treemaps, which let you fit some text in the largest nodes regardless of where they fall on the hierarchy. See https://neugierig.org/software/chromium/bloat/ for a really old example for a similar use.
There are a few layout algorithms for treemaps but the greedy one I use there is simple enough that I remember it today. I think it might be from
https://www.win.tue.nl/~vanwijk/stm.pdf
@evmar This is why I added the flame chart in addition to the sunburst chart. The flame chart also lets you fit some text in the largest nodes regardless of where they fall on the hierarchy.
I personally prefer the 1D layout of a flame chart over a treemap. You can more easily see accurate relative size proportions, and zooming in and out with the trackpad is really quick. I'll admit I'm probably just used to @jlfwong's wonderful https://www.speedscope.app/ though.
Thanks for the algorithm link!