Aller au contenu

Personnaliser le nom des fichiers dans la sortie de compilation

Par défaut, la commande astro build génère vos ressources générées à partir de la source de votre projet, comme les fichiers JavaScript et CSS situés dans le répertoire src/, dans un répertoire _astro avec des noms de fichiers hachés (par exemple _astro/index.DRf8L97S.js) qui sont excellents pour la mise en cache à long terme.

Bien que cela ne soit normalement pas nécessaire, vous pouvez personnaliser les noms des fichiers de sortie si nécessaire. Par exemple, cela peut être utile si vous avez des scripts dont les noms peuvent déclencher des bloqueurs de publicités (par exemple, ads.js) ou si vous souhaitez organiser vos ressources selon une convention de nommage particulière. En personnalisant les options de sortie de Rollup, vous bénéficiez d’un meilleur contrôle sur la structure compilée de votre projet, vous permettant ainsi de répondre à des exigences organisationnelles ou de déploiement spécifiques.

Recette

Section intitulée « Recette »

Cette recette configure vite.build.rollupOptions pour générer des ressources compilées avec la structure et le modèle de nommage suivants :

  • Fichiers d’entrée JavaScript (par exemple, scripts directement associés à vos pages ou mises en page) : dist/js/[name]-[hash].js
  • Morceaux de code JavaScript (par exemple, composants importés dynamiquement ou modules partagés) : dist/js/chunks/[name]-[hash].js
  • Autres ressources (par exemple, CSS, images, polices) : dist/static/[name]-[hash][extname] (par exemple, dist/static/styles-a1b2c3d4.css, dist/static/logo-e5f6g7h8.svg)

  1. Ajoutez les options de sortie Rollup de Vite.

    Modifiez votre fichier astro.config.mjs pour inclure la configuration vite.build.rollupOptions.output suivante. C’est ici que vous pouvez définir les modèles de nommage personnalisés pour vos ressources à l’aide des propriétés entryFileNames, chunkFileNames et assetFileNames de Rollup :

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    

    export default defineConfig({
      // ...
      vite: {
        build: {
          rollupOptions: {
            output: {
              // chemin relatifs à `outDir`
              entryFileNames: 'js/[name]-[hash].js',
              chunkFileNames: 'js/chunks/[name]-[hash].js',
              assetFileNames: 'static/[name]-[hash][extname]',
            },
          },
        },
      },
    });

    Cet exemple utilise les paramètres substituables de noms de fichiers suivants :

    • [name] : Le nom d’origine du fichier (sans l’extension et le chemin).
    • [hash] : Un hachage basé sur le contenu généré pour le fichier, essentiel pour contourner le cache. Vous pouvez également spécifier une longueur, par exemple [hash:8]. Cela garantit que lorsque vous mettez à jour un élément, le nom du fichier change, obligeant les navigateurs à télécharger la nouvelle version au lieu de diffuser une version en cache obsolète.
    • [extname] : L’extension du fichier d’origine, incluant le point initial (par exemple .js, .css, .svg).

    Pour une liste complète des paramètres substituables et des modèles avancés disponibles pour ces options, reportez-vous à la documentation de configuration Rollup.

  2. Compilez votre projet.

    Étant donné que ces personnalisations de nom de fichier s’appliquent uniquement à la sortie de compilation pour la production, vous devrez exécuter la commande de compilation de votre projet :

    Fenêtre du terminal
    npm run build

  3. Une fois la compilation terminée, inspectez votre répertoire de sortie (dist/ par défaut).

    Vérifiez que les ressources générées depuis le dossier src votre projet sont nommées et organisées selon les nouveaux modèles. (Les fichiers de votre répertoire public/ sont copiés directement dans le répertoire de sortie et ne sont pas affectés par les options de nommage de Rollup.)

    En fonction du contenu spécifique de votre projet, votre dossier de compilation ressemblera désormais à ceci :

    • Répertoiredist/
      • Répertoirejs/
        • index-a1b2c3d4.js
        • Répertoirechunks/
          • common-e5f6g7h8.js
      • Répertoireimg/
        • logo-i9j0k1l2.png
      • Répertoirefonts/
        • myfont-q2w3e4r5.woff2
      • Répertoirestatic_assets/
        • styles-m3n4o5p6.css
      • index.html
      • Répertoireabout/
        • index.html
      • … (autres fichiers HTML et ressources publiques)
Contribuer Communauté Parrainer