Analyser la taille du bundle

Il est important de comprendre ce qui fait partie d'un bundle Astro pour améliorer les performances du site. La visualisation du bundle peut donner des indices sur les modifications à apporter à votre projet pour réduire la taille du bundle.

Recette

La bibliothèque rollup-plugin-visualizer vous permet de visualiser et d'analyser votre bundle Rollup pour voir quels modules prennent de la place.

Installez 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
```

Ajoutez le module d'extension au fichier 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",
    })]
}
});

Exécutez la commande de compilation :
- npm
- pnpm
- Yarn
```
  npm run build
```
```
  pnpm build
```
```
  yarn build
```
Trouvez le(s) fichier(s) stats.html de votre projet.

Ce fichier sera à la racine de votre répertoire dist/ pour les sites entièrement statiques et vous permettra de voir ce qui est inclus dans le bundle.

Si votre projet Astro utilise le rendu à la demande, vous aurez deux fichiers stats.html. L'un sera pour le client, l'autre pour le serveur, et chacun sera situé à la racine des répertoires dist/client et dist/server/.

Voir la documentation de Rollup Plugin Visualizer pour savoir comment interpréter ces fichiers, ou configurer des options spécifiques.

:::noteCompte tenu de l'approche unique d'Astro en matière d'hydratation, le modèle n'est pas nécessairement représentatif du bundle que le client recevra.

Le visualisateur Rollup montre toutes les dépendances utilisées sur le site, mais il ne décompose pas la taille du bundle par page.:::

Contribuer Communauté Parrainer