Recipe for analyzing bundle size

[Lehoczky]

📚 Subject area/topic

Recipes and Guides

📋 Suggested page

https://docs.astro.build/en/recipes/analyze-bundle-size/

📋 General description or bullet points (if proposing new content)

When using client-side JavaScript libraries, it is important to keep track of how much they will increase the final js bundle size. Knowing this, we can optimize our page performance by potentially removing, or lazy-loading our client-side code. An official guide on how to analyze/visualize our page's js budle would be super helpful to do this.

For reference, some other frameworks have guides on how to do this:

• https://nextjs.org/docs/pages/building-your-application/optimizing/package-bundling#analyzing-javascript-bundles
• https://nuxt.com/docs/api/nuxt-config#analyze
• https://remix.run/docs/en/main/guides/performance#bundle-analysis

🖥️ Reproduction of code samples in StackBlitz

No response

[sarah11918]

Hey @Lehoczky this is a super cool idea!

We are a little stretched for writing resources at the moment (and have been for a while!) as we're writing a ton of new docs for our 5.0 beta release and all the changes/new features. But, I think this could be an interesting guide and would welcome anyone who wants to attempt writing one!

Putting a "help wanted" label on this one! Who's interested?

[sarah11918]

Just bumping this one for freshness and saying that I think the idea sounds cool if anyone wants to write something!

Will also note that things that aren't "issues" with docs will eventually be closed, since it's not something to "fix", but we do keep track of recipe ideas in this GitHub discussion for recipe ideas, to provide one place for people to look for inspiration about what to write, or to respond to let us know what would be popular! I'll link this idea there, too!

[branberry]

Hey Sarah! I'd be interested in contributing/helping out with this. I'm not 100% familiar with the topic, and I'd need to do some research, but I'd be happy to take a try at it!

[sarah11918]

Hi @branberry , thank you! Perhaps the easiest thing to do is post your thoughts/ideas here as you have them, then others can help with the collective knowledge! You could start by posting an outline of what should be included, and often others will participate and add ideas too. Feel free to use this space as a living conversation/draft! 💜

[branberry]

Sounds great! I'll be heading to Japan for the next two weeks, so I'll be stepping away for a bit. When I come back, I'll work on posting an outline and share as soon as I can! Thank you for the input, really excited!

[sarah11918]

Have a wonderful trip! Looking forward to seeing what you get up with here when you're back!

[branberry]

I'm back!

For an initial iteration, I was looking at using the Rollup visualizer plugin which is commonly used as a plugin for Vite to visualize bundle sizes. This works, but the main drawback with this is that Astro, from what I understand, is a MPA as opposed to a SPA. This means that the bundle generated here doesn't necessarily reflect the bundle for all pages.

I did a little bit of searching, but I couldn't find anything specific to Astro for checking bundle sizes. I'll continue to dig around a bit, but I thought I would share the Rollup visualizer at least. Any thoughts on how I could tailor this to be Astro specific?

[sarah11918]

Welcome back! Hope you had a wonderful trip. Maybe @bluwy has an idea of where to point you here?

[bluwy]

Yeah rollup-plugin-visualizer is decent here and is usually what I recommend to use. You can put it in vite.plugins in the astro config and it should just work.

The tricky thing perhaps is that Astro does two Vite builds, the server and the client build, so there would be two visualizer outputs. Its readme shows an example of SvelteKit that also has multiple builds itself, so maybe it also works well for Astro.