Saltar al contenido

Analizar el tamaño del bundle

Entender qué es parte de un bundle de Astro es importante para mejorar el rendimiento del sitio. Visualizar el bundle puede dar pistas sobre dónde se pueden hacer cambios en tu proyecto para reducir el tamaño del bundle.

Receta

Sección titulada “Receta”

La librería rollup-plugin-visualizer te permite visualizar y analizar tu bundle de Rollup para ver qué módulos están ocupando espacio.

  1. Instala rollup-plugin-visualizer:

    Ventana de la terminal
    npm install rollup-plugin-visualizer --save-dev

  2. Añade el plugin al archivo astro.config.mjs:

    // @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. Ejecuta el comando de build:

    Ventana de la terminal
    npm run build

  4. Encuentra los archivos stats.html de tu proyecto.

    Este estará en la raíz de tu directorio dist/ para sitios completamente estáticos y te permitirá ver qué está incluido en el bundle.

    Si tu proyecto de Astro usa renderizado on-demand, tendrás dos archivos stats.html. Uno será para el cliente, y el otro para el servidor, y cada uno estará ubicado en la raíz de los directorios dist/client y dist/server/.

    Consulta la documentación de Rollup Plugin Visualizer para guía sobre cómo interpretar estos archivos, o configurar opciones específicas.

Contribuir Comunidad Patrocinar