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?