Optimiser le processus de compilation

Pendant le développement, vous exécutez un serveur de développement avec rechargement à chaud. Pour publier votre app, vous créez une version de production optimisée : un ensemble de fichiers statiques optimisés pour la rapidité et la faible taille, prêts à être déployés sur n'importe quel hébergeur.

La commande standard compile votre app pour la production. Vite (l'outillage par défaut de Vue 3) compile, regroupe et optimise tous les éléments.

La compilation écrit les fichiers optimisés dans un dossier dist : un fichier index.html, des paquets JavaScript et CSS dont les noms contiennent un condensat, ainsi que vos ressources statiques. C'est ce dossier que vous déployez.

La minification supprime les espaces, les commentaires et raccourcit les noms de variables afin que les fichiers soient téléchargés plus rapidement. Les compilations de production minifient automatiquement JavaScript et CSS.

L'élagage de l'arbre supprime le code que vous n'utilisez jamais. Si vous importez une seule fonction d'une bibliothèque, le regroupeur supprime le reste. Utilisez des importations nommées de modules ES pour permettre l'élagage de l'arbre.

Les noms des fichiers générés contiennent un condensat du contenu, comme index-a1b2c3.js. Lorsque le code change, le condensat change également : les navigateurs récupèrent ainsi le nouveau fichier tout en mettant agressivement en cache ceux qui n'ont pas changé.

Pour voir ce qui compose votre paquet, utilisez une extension de visualisation. Elle produit un graphique interactif indiquant quels modules occupent le plus d'espace et vous aide à orienter votre optimisation.

Une dépendance volumineuse que vous utilisez à peine est un signal d'alerte. L'analyse peut révéler une bibliothèque lourde de gestion des dates ou des graphiques que vous pourriez remplacer par une alternative plus légère ou charger à la demande.

Vite expose les variables d'environnement préfixées par VITE_ via import.meta.env. Utilisez-les pour configurer les URL d'API et les indicateurs de fonctionnalité selon l'environnement.

Vite charge .env.production pendant npm run build et .env.development pendant npm run dev afin que chaque environnement reçoive automatiquement la configuration appropriée.

Avant le déploiement, lancez une prévisualisation locale de la compilation de production pour confirmer qu'elle fonctionne comme prévu avec les véritables fichiers optimisés.

Évaluez vos connaissances sur le processus de compilation.

Exécutez npm run build pour produire un dossier dist optimisé contenant des ressources minifiées, élaguées et dont les noms contiennent un condensat du contenu. Analysez la taille des paquets pour réduire les dépendances volumineuses et utilisez les variables d'environnement VITE_ avec les fichiers .env pour configurer chaque environnement. Prévisualisez le résultat avant la publication. Vous allez maintenant déployer cette compilation sur une plateforme d'hébergement.