analyze-bundle-size.mdx

title	description	i18nReady	type
Analyze bundle size	Learn how to analyze the bundle generated by Astro using `rollup-plugin-visualizer`.	true	recipe

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Understanding what is a part of an Astro bundle is important for improving site performance. Visualizing the bundle can give clues as to where changes can be made in your project to reduce the bundle size.

Recipe

The rollup-plugin-visualizer library allows you to visualize and analyze your Rollup bundle to see which modules are taking up space.

1. Install rollup-plugin-visualizer:

   ```shell npm install rollup-plugin-visualizer --save-dev ``` ```shell pnpm add rollup-plugin-visualizer --save-dev ``` ```shell yarn add rollup-plugin-visualizer --save-dev ```

2. Add the plugin to the astro.config.mjs file:

   // @ts-check
   import { defineConfig } from 'astro/config';
   import { visualizer } from "rollup-plugin-visualizer";
   
   export default defineConfig({
   vite: {
       plugins: [visualizer({
           emitFile: true,
           filename: "stats.html",
       })]
   }
   });

3. Run the build command:

   ```shell npm run build ``` ```shell pnpm build ``` ```shell yarn build ```

4. Find the stats.html file(s) for your project.

    This will be at the root of your `dist/` directory for entirely static sites and will allow you to see what is included in the bundle.
    
    If your Astro project uses on-demand rendering, you will have two `stats.html` files. One will be for the client, and the other for the server, and each will be located at the root of the `dist/client` and `dist/server/` directories.
    
    See [the Rollup Plugin Visualizer documentation](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files) for guidance on how to interpret these files, or configure specific options.
   

:::note Given Astro's unique approach to hydration, the build isn't necessarily representative of the bundle that the client will receive.

The Rollup visualizer shows all dependencies that are used across the site, but it does not break down the bundle size on a per-page basis. :::