La réduction de la taille du bundle d'une application Vue.js est cruciale pour améliorer les performances de charge des pages et l'expérience utilisateur. Une taille de bundle plus petite mène à des téléchargements plus rapides, à moins d'analyse et à des heures de démarrage d'application plus rapides. Il existe plusieurs stratégies et meilleures pratiques pour y parvenir, allant de l'optimisation des dépendances à l'utilisation d'outils et de techniques de construction avancés.
Utilisez une étape de construction avec des tremblements d'arbres
L'un des moyens les plus efficaces de réduire la taille du bundle consiste à utiliser des outils de construction modernes qui prennent en charge la partage d'arbres. La partage d'arbres est un processus qui élimine le code inutilisé du bundle final. Les API de Vue et de nombreuses bibliothèques JavaScript modernes sont conçues pour être taies tairs lorsqu'elles sont correctement groupées. Par exemple, les composants Vue inutilisés comme le `` intégré ne seront pas inclus dans les builds de production s'ils ne sont pas utilisés. Les modèles de pré-compilation pendant les délais de construction évitent également l'expédition du compilateur Vue au navigateur, ce qui peut économiser environ 14 Ko de JavaScript minifié et gzippé, réduisant les coûts d'exécution.
Gérer et analyser les dépendances
Les dépendances contribuent souvent de manière significative à la taille du faisceau. Il est important de:
- Choisissez des dépendances qui offrent des formats de module ES et qui sont conviviales en partage d'arbres (par exemple, «Lodash-ES» au lieu de «Lodash»).
- Audit régulièrement vos dépendances à l'aide d'outils comme «WebPack-Bundle-Analyzer» pour identifier les packages grands ou inutiles.
- Supprimez les dépendances inutilisées à l'aide d'outils comme «Depcheck» ou «NPM Prune».
- Remplacez les grandes dépendances par des alternatives plus petites et plus ciblées. Par exemple, le remplacement d'une bibliothèque de cartographie lourde comme «Echarts» avec une plus petite comme Chartist.js peut réduire considérablement la taille du bundle.
Routes et composants de chargement paresseux
Le chargement paresseux est une stratégie où le code pour les itinéraires ou les composants n'est chargé que lorsque cela est nécessaire, au lieu de tout regrouper dès le départ. Le routeur Vue prend en charge les voies de chargement paresseuses en important dynamiquement des composants, divisant le bundle en morceaux plus petits qui améliorent les performances de charge initiale. Cette méthode réduit considérablement la taille du bundle principal et répand la charge de code au fil du temps lorsque les utilisateurs naviguent dans l'application.
Utiliser la division du code et les importations dynamiques
WebPack, qui est couramment utilisé dans les projets VUe, prend en charge la division de code via des instructions dynamiques `import () '. Cela signifie que certaines parties de votre application peuvent être divisées en faisceaux séparés qui sont chargés de manière asynchrone. L'utilisation de la division du code aide correctement à gérer la taille du bundle en chargeant uniquement le code requis à la demande.
Minification et compression
La minification réduit la taille des fichiers JavaScript en supprimant les espaces blancs, les commentaires et le raccourcissement des noms de variables. Des outils comme UglifyJS ou TERSER (souvent intégrés dans les processus de construction modernes) minigent automatiquement le code pendant l'étape de construction de production. De plus, la compression de gzipping ou de brotli réduit encore la taille des actifs servis aux utilisateurs.
Utilisez des alternatives plus petites pour des cas d'utilisation spécifiques
Pour les projets où le cadre complet Vue.js peut être trop lourd, en particulier pour les cas d'amélioration progressif, envisagez d'utiliser des alternatives plus légères comme Petite Vue, qui n'a que environ 6 kb. Ceci est utile si le projet ne nécessite pas l'écosystème complet de Vue.
Portée et importation uniquement les parties nécessaires des bibliothèques
De nombreuses grandes bibliothèques comme Bootstrap Vue ou Lodash permettent d'importer uniquement des composants ou des fonctions spécifiques plutôt que la bibliothèque entière. Par exemple, au lieu d'importer toute la bibliothèque Bootstrap Vue, n'importez que les composants dont vous avez besoin, ce qui réduit la taille du bundle en excluant les pièces inutilisées. De même, Importer Lodash fonctionne modulant (`importe la carte de 'Lodash / Map' 'au lieu de l'ensemble de Lodash).
Évitez les styles en ligne et les grands cadres CSS si ce n'est pas nécessaire
Les cadres CSS comme le bootstrap ajoutent à la taille du bundle. Évaluez si vous avez vraiment besoin de l'ensemble du cadre et envisagez des alternatives comme le vent arrière CSS pour des faisceaux CSS plus flexibles et plus petits. Pensez également à supprimer les importations de style inutilisées ou à héberger CSS à l'extérieur si possible.
Rendu côté serveur et génération de sites statiques
Le déplacement d'un rendu vers le serveur via SSR (rendu côté serveur) ou SSG (génération de site statique) réduit la quantité de JavaScript nécessaire du côté client, abaissant efficacement la taille du bundle. Cela transforme les responsabilités de rendu au serveur, en envoyant un HTML pré-construit au client avec un JS minimal pour l'interactivité.
Optimiser les images et autres actifs
Bien que cela n'affecte pas directement la taille du faisceau JavaScript, l'optimisation des images, des polices et des actifs contribue aux performances globales de la charge de page, ce qui complète les améliorations JavaScript.
Utilisez judicieusement les fonctionnalités JavaScript modernes et les polyfills
L'utilisation de la syntaxe JavaScript moderne peut conduire à des faisceaux plus petits lorsqu'il est combiné avec des outils de construction modernes. Évitez les polyfills inutiles à moins de cibler les navigateurs plus anciens et envisagez des polyfills conditionnels en fonction des capacités du navigateur d'utilisateurs.
Résumé des pratiques pour réduire la taille du faisceau Vue.js
- Utilisez des outils de construction avec des tremblements d'arbres (par exemple, WebPack, Vite).
- Modèles Vue pré-compiles.
- Analyser le contenu du bundle avec des outils comme «WebPack-Bundle-Analyzer».
- Retirez ou remplacez les dépendances lourdes.
- Importer uniquement les composants ou fonctions nécessaires à partir des bibliothèques.
- Implémentez le chargement paresseux pour les itinéraires et les composants.
- Utilisez le fractionnement du code et les importations dynamiques.
- appliquer une minification et une compression.
- Considérez des alternatives plus petites comme Petite Vue pour des applications spécifiques.
- Optimiser l'utilisation CSS et éviter d'importer des cadres entiers inutilement.
- Utilisez SSR ou SSG pour réduire la taille du faisceau côté client.
- Optimiser les actifs et utiliser attentivement les fonctionnalités JavaScript modernes.