esbuild icon indicating copy to clipboard operation
esbuild copied to clipboard
verified publisher icon evanw

Self-hosted bundle analyzer

Open fabiospampinato opened this issue 2 years ago • 9 comments

IMO the bundle analyzer should be self-hosted, and not reliant on a website, for a bunch of reasons:

  • If I have no internet connection it would be nice to still be able to use it. Alternatively the website could be made to work offline after the first load.
  • It'd be easier to automate the generation of bundle visualization. If I have to manually drag & drop a file to get it to work it gets a little more annoying to do. Alternatively a command could be added to esbuild to base64-encode the metadata file, maybe with compression also to squeeze it, encode it in the fragment of the url, and have the website read it from there.
  • As far as I know the mainstream alternatives for other bundlers (webpack-bundle-analyzer, rollup-plugin-visualizer) have the above capabilities, so it would be nice to close the gap.

fabiospampinato avatar Jan 19 '23 13:01 fabiospampinato

I agree. I think it makes the most sense for this to also be a part of esbuild's dev server eventually.

evanw avatar Jan 19 '23 15:01 evanw

Where does the source for the visualizer currently live?

retorquere avatar Apr 15 '23 09:04 retorquere

@retorquere See https://github.com/evanw/esbuild/issues/2926

lydell avatar Apr 16 '23 15:04 lydell

I've written a little CLI thing that basically implements this for quickly inspecting NPM packages: https://github.com/fabiospampinato/banal

fabiospampinato avatar Jul 17 '23 00:07 fabiospampinato

This would be great to have, for instance to host on GitHub Pages for every PR, or even to have a simple link with the metafile's content in the URL to be able to open the "official" analyzer with the proper data in just one click. I've already started working on a GitHub action to add PR comments to summarize changes (similar to esbuild-bundle-analyzer), but nothing beats the official analyzer for a deeper dive!

acidoxee avatar Sep 06 '24 12:09 acidoxee

I second. Would be great to have something that works with Angular 18.

vzakharov-rxnt avatar Sep 16 '24 16:09 vzakharov-rxnt

I've written a little CLI thing that basically implements this for quickly inspecting NPM packages: https://github.com/fabiospampinato/banal

What if I want to inspect my own site? Including node modules if they are referenced? Basically the final bundle.

vzakharov-rxnt avatar Sep 16 '24 17:09 vzakharov-rxnt

What if I want to inspect my own site? Including node modules if they are referenced? Basically the final bundle.

@vzakharov-rxnt npx banal ./path/to/whereever.js if you want a bundle analysis for a local thing. If that doesn't work for you (maybe you need custom plugins to bundle it?) please open an issue here.

fabiospampinato avatar Sep 16 '24 18:09 fabiospampinato

@fabiospampinato I want to analyze the whole project. Specifying path to main.js file does not work. Tech is Angular.

vzakharov-rxnt avatar Sep 18 '24 14:09 vzakharov-rxnt

@vzakharov-rxnt,

  1. Make sure to use the @angular-devkit/build-angular:application builder so that esbuild is used
  2. Build your Angular application with stats: ng build --configuration=production --stats-json
  3. Reference that file when using banal: npx banal --metafile=dist/your-app/stats.json

Badisi avatar Nov 10 '24 11:11 Badisi

FYI https://www.npmjs.com/package/esbuild-visualizer does a decent job visualizing things. not as good as webpack-bundle-analyzer but better than website (quick glance) and most importanly local.

my usage from NX for angular app:

    "size": "nx build --configuration=production --stats-json",
    "display": "npx esbuild-visualizer --metadata=dist/myngapp/stats.json --open=true"

adumesny avatar Nov 13 '24 00:11 adumesny