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

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

Instala rollup-plugin-visualizer:
- npm
- pnpm
- Yarn
```
  npm install rollup-plugin-visualizer --save-dev
```
```
  pnpm add rollup-plugin-visualizer --save-dev
```
```
  yarn add rollup-plugin-visualizer --save-dev
```

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",
    })]
}
});

Ejecuta el comando de compilación:
- npm
- pnpm
- Yarn
```
  npm run build
```
```
  pnpm build
```
```
  yarn build
```
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.

:::noteDado el enfoque único de Astro para la hidratación, la compilación no representa necesariamente el empaquetadoque recibirá el cliente.

El visualizador de Rollup muestra todas las dependencias utilizadas en todo el sitio, pero no desglosa el tamaño del empaquetado por página.:::

Contribuir Comunidad Patrocinador