Analyze Bundle Size

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

Section titled 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:

   npm

   npm install rollup-plugin-visualizer --save-dev

   pnpm

   pnpm add rollup-plugin-visualizer --save-dev

   Yarn

   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:

   npm

   npm run build

   pnpm

   pnpm build

   Yarn

   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 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.