Supprimer le code inutilisé

Avec npm, l'ajout de code à votre projet est un jeu d'enfant. Mais utilisez-vous vraiment tous ces octets supplémentaires ?

Des registres tels que npm ont transformé l'univers JavaScript en permettant à n'importe qui de télécharger et d'utiliser facilement 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 afin de détecter le code inutilisé. Supprimez ensuite les bibliothèques unused et inutiles.

Impact sur les métriques Core Web Vitals

En supprimant le code inutilisé, vous pouvez améliorer les métriques Core Web Vitals de votre site Web. Largest Contentful Paint, par exemple, peut être affecté par du code inutilisé en raison d'un conflit accru de bande passante causé par des éléments plus volumineux que nécessaire. 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 au LCP en retardant le chargement de ces ressources.

D'autres métriques telles que First Input Delay (FID) et Interaction to Next Paint (INP) peuvent également être affectées par du code inutilisé, 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 vous aidera à gérer le code inutilisé de votre projet en vous montrant comment analyser le codebase de votre projet et à éliminer le code inutilisé des éléments JavaScript que vous envoyez à vos utilisateurs en production.

Analyser votre lot

Les outils de développement vous permettent de voir facilement 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 Désactiver le cache.
  4. Actualisez la page.

Panneau "Réseau" avec demande de groupe

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

Couverture de code dans les outils de développement

En spécifiant une configuration complète de Lighthouse via sa CLI de nœud, un audit "JavaScript non utilisé" peut également être utilisé pour suivre la quantité de code inutilisé qui est envoyé avec votre application.

Audit JS Lighthouse inutilisé

Si vous utilisez webpack comme bundler, l'analyseur de bundle Webpack vous aidera à examiner 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.

Analyseur de bundle Webpack

L'utilisation de cette visualisation vous permet d'identifier les parties de votre bundle qui sont plus grandes que d'autres et d'avoir une meilleure idée de toutes les bibliothèques que vous importez. 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';

Il est important de souligner que ce processus est beaucoup plus complexe pour les applications plus volumineuses.

Pour le package à l'aspect 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 nécessaire pour le chargement initial de la page, déterminez si elle peut être chargée de manière différée.

Et 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 facilement divisées en parties et importées de manière sélective. Dans ces scénarios, déterminez si la bibliothèque pourrait être entièrement supprimée. Il est toujours judicieux d'envisager la création d'une solution personnalisée ou l'utilisation d'une solution plus légère. Toutefois, il est important d'évaluer la complexité et les efforts requis pour ces deux opérations avant de supprimer complètement une bibliothèque d'une application.