Self-hosted bundle analyzer

evanw / esbuild

An extremely fast bundler for the web

https://esbuild.github.io/

MIT License

38.21k stars 1.15k forks source link

Self-hosted bundle analyzer #2847

Open fabiospampinato opened 1 year ago

fabiospampinato commented 1 year ago

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.

evanw commented 1 year ago

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

retorquere commented 1 year ago

Where does the source for the visualizer currently live?

lydell commented 1 year ago

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

fabiospampinato commented 1 year ago

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

acidoxee commented 2 months ago

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!

vzakharov-rxnt commented 2 months ago

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

vzakharov-rxnt commented 2 months ago

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.

fabiospampinato commented 2 months ago

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.

vzakharov-rxnt commented 2 months ago

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

Badisi commented 1 week ago

@vzakharov-rxnt,

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

adumesny commented 1 week ago

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"