Pular para o conteúdo

Analyze bundle size

Este conteúdo não está disponível em sua língua ainda.

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:

    Terminal window
    npm install 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:

    Terminal window
    npm run 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.

Contribua Comunidade Sponsor