Analyzer les tailles des 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

Titre de la section 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.

1. Installez rollup-plugin-visualizer:

   npm

   npm install rollup-plugin-visualizer --save-dev

   pnpm

   pnpm add rollup-plugin-visualizer --save-dev

   Yarn

   yarn add rollup-plugin-visualizer --save-dev

2. Ajoutez le plugin 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",
       })]
   }
   });

3. Exécutez la commande de construction :

   npm

   npm run build

   pnpm

   pnpm build

   Yarn

   yarn build

4. 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 du Rollup Plugin Visualizer pour savoir comment interpréter ces fichiers, ou configurer des options spécifiques.

Note

Compte 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 paquet par page.