Des registres comme npm ont transformé l'univers JavaScript en permettant à n'importe qui de télécharger et d'utiliser plus d'un demi-million de packages publics. Mais nous incluons souvent des bibliothèques que nous n’utilisons pas complètement. Pour résoudre ce problème, analysez votre bundle pour détecter le code inutilisé, puis supprimez les bibliothèques non utilisées et inutiles.
Impact sur les métriques Core Web Vitals
En supprimant le code inutilisé, vous pouvez améliorer le rapport Core Web Vitals de votre site Web. Le Largest Contentful Paint, par exemple, peut être affecté par du code inutilisé lorsque des éléments inutilement volumineux se disputent la bande passante avec d'autres ressources. Le LCP peut également être affecté si des éléments JavaScript volumineux qui n'affichent le balisage que sur le client contiennent des références à des candidats LCP en retardant le chargement de ces ressources.
Le code inutilisé peut également affecter l'Interaction to Next Paint (INP), car même les codes JavaScript inutilisés doivent être téléchargés, analysés, compilés, puis exécutés. Le code inutilisé peut entraîner des retards inutiles dans le temps de chargement des ressources, l'utilisation de la mémoire et l'activité du thread principal, qui contribuent à une mauvaise réactivité de la page.
Ce guide explique comment analyser le codebase de votre projet à la recherche de code inutilisé et propose des stratégies pour éliminer le code inutilisé des éléments JavaScript que vous envoyez en production.
Analyser votre lot
Les outils de développement peuvent vous indiquer la taille de toutes les requêtes réseau:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Réseau.
- Cochez la case Désactiver le cache.
- Actualisez la page.
L'onglet Couverture des outils de développement vous indique également la quantité de code CSS et JS qui n'est pas utilisée dans votre application.
En spécifiant une configuration Lighthouse complète via sa CLI Node, vous pouvez exécuter l'audit "Réduit les scripts JavaScript inutilisés" pour suivre la quantité de code inutilisé envoyé avec votre application.
Si vous utilisez webpack comme bundler, l'analyseur de bundle Webpack peut vous aider à identifier les éléments qui composent le bundle. Incluez le plug-in dans votre fichier de configuration Webpack comme n'importe quel autre plug-in:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Bien que Webpack soit couramment utilisé pour créer des applications monopages, d'autres bundles, tels que Parcel et Rollup, disposent également d'outils de visualisation que vous pouvez utiliser pour analyser votre bundle.
Si vous actualisez l'application avec ce plug-in, une carte proportionnelle de l'ensemble de votre bundle s'affiche.
Cette visualisation montre quelles parties de votre bundle sont plus volumineuses que les autres, ce qui vous permet de mieux comprendre le nombre et la taille des bibliothèques importées par votre application. Cela peut vous aider à déterminer si vous utilisez des bibliothèques inutilisées ou inutiles.
Supprimer les bibliothèques inutilisées
Dans l'image de carte proportionnelle précédente, plusieurs packages sont présents dans un même domaine @firebase. Si votre site Web n'a besoin que du composant de base de données Firebase, mettez à jour les importations pour récupérer cette bibliothèque:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Pour le paquet mystérieux dont vous êtes certain qu'il n'est utilisé nulle part, prenez du recul et voyez quelles dépendances de niveau supérieur l'utilisent. Essayez de trouver un moyen d’importer uniquement les composants dont vous avez besoin. Si vous n'utilisez pas de bibliothèque, supprimez-la. Si la bibliothèque n'est pas requise pour le chargement initial de la page, envisagez un chargement différé.
Si vous utilisez webpack, consultez la liste des plug-ins qui suppriment automatiquement le code inutilisé des bibliothèques populaires.
Supprimer les bibliothèques inutiles
Les bibliothèques ne peuvent pas toutes être divisées en parties et importées de manière sélective. Dans ces scénarios, déterminez si vous pouvez supprimer complètement la bibliothèque. Il est toujours judicieux d'envisager la création d'une solution personnalisée ou l'utilisation d'une alternative plus légère. Toutefois, il est important d'évaluer la complexité et les efforts requis pour l'une ou l'autre de ces stratégies avant de supprimer complètement une bibliothèque de votre application.