Saltearse al contenido

Analizar el tamaño del empaquetado

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

Receta

Sección titulada Receta

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

  1. Instala rollup-plugin-visualizer:

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

  2. Agrega 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 compilación:

    Ventana de terminal
    npm run build

  4. Encuentra el(los) archivo(s) stats.html de tu proyecto.

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

    Si tu proyecto de Astro usa renderizado bajo demanda, 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 obtener orientación sobre cómo interpretar estos archivos o configurar opciones específicas.

Contribuir Comunidad Patrocinador