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