Supprimer le code inutilisé

Les registres tels que npm ont a transformé l'univers JavaScript en permettant télécharger et utiliser plus d'un demi-million de packages publics. Mais nous incluons souvent bibliothèques que nous n'utilisons pas complètement. Pour résoudre ce problème, analysez votre lot. 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 les performances Core Web Vitals. Largest Contentful Paint, par exemple, peuvent être affectés par du code inutilisé lorsque des éléments inutilement volumineux en concurrence pour la bande passante avec d'autres ressources. Le LCP peut aussi être affecté Éléments JavaScript qui affichent le balisage uniquement sur le client qui contiennent des références à des candidats au LCP en retardant le chargement de ces ressources.

Le code inutilisé peut également avoir une incidence sur l'interaction avec le bouton Next Paint (INP), car même les scripts JavaScript inutilisés doivent être téléchargés, analysés, compilés, exécuté. Le code inutilisé peut entraîner des retards inutiles dans le chargement des ressources le temps passé, l'utilisation de la mémoire et l'activité principale du thread à l'origine de la mauvaise qualité de la page et de réactivité.

Ce guide explique comment analyser le codebase de votre projet pour identifier le code inutilisé. propose des stratégies pour éliminer le code inutilisé des éléments JavaScript que vous envoyez vos utilisateurs en production.

Analyser votre lot

Les outils de développement peuvent vous indiquer la taille de toutes les requêtes réseau:

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Réseau.
3. Cochez la case Disable cache (Désactiver le cache).
4. Actualisez la page.

<ph type="x-smartling-placeholder">

</ph>

L'onglet Couverture Les outils de développement vous indiquent également la quantité de code CSS et JS inutilisée dans votre application.

<ph type="x-smartling-placeholder">

</ph>

En spécifiant une configuration Lighthouse complète via sa CLI Node, vous pouvez exécuter l'audit "Réduire les ressources JavaScript inutilisées" pour suivre la quantité de code inutilisé envoyé avec votre application/

<ph type="x-smartling-placeholder">

</ph>

Si vous utilisez webpack comme bundler, Analyseur de bundle Webpack peut vous aider à identifier la composition de ce bundle. Incluez le plug-in dans votre 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 les regroupeurs, tels que Parcel et de consolidation, vous pouvez aussi disposer d'outils de visualisation pour analyser votre bundle.

En rechargeant l'application avec ce plug-in, vous affichez une carte proportionnelle l'ensemble du lot.

<ph type="x-smartling-placeholder">

</ph>

Cette visualisation montre quelles parties de votre lot sont plus grandes que afin 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 ou des bibliothèques inutiles.

Supprimer les bibliothèques inutilisées

Dans l'image de carte proportionnelle précédente, il y a plusieurs packages dans un même @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 package à l'allure mystérieuse dont vous êtes sûr qu'il n'est pas utilisé prenez du recul et identifiez les dépendances 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 chargement initial de la page, pensez au chargement différé

Si vous utilisez webpack, consultez la liste des plug-ins qui fonctionnent automatiquement supprimer le code inutilisé des bibliothèques populaires.

Supprimer les bibliothèques inutiles

Toutes les bibliothèques ne peuvent pas ê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. Créer une solution personnalisée ou utiliser une alternative plus légère doit toujours être les options qui valent la peine d'être envisagées. Cependant, il est important de peser le pour et le contre d'efforts requis pour l'une ou l'autre de ces stratégies avant de supprimer une bibliothèque depuis votre application.