Couverture: Trouver les fichiers JavaScript et CSS inutilisés

Kayce basque
Kayce basque

L'onglet "Couverture" des outils pour les développeurs Chrome peut vous aider à trouver du code JavaScript et CSS inutilisé. Supprimer le code inutilisé peut accélérer le chargement de la page et économiser les données mobiles des utilisateurs d'appareils mobiles.

Analyse de la couverture de code...
Figure 1 : Analyse de la couverture de code...

Présentation

Dans le domaine du développement Web, l'envoi de code JavaScript ou CSS inutilisé est un problème courant. Supposons par exemple que vous souhaitiez utiliser le composant Button d'amorçage sur votre page. Pour utiliser le composant Button, vous devez ajouter un lien vers la feuille de style Bootstrap dans votre code HTML, comme ceci:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Cette feuille de style ne contient pas seulement le code du composant Button. Il contient le code CSS de tous les composants de Bootstrap. Mais vous n'utilisez aucun des autres composants d'amorçage. Votre page télécharge donc beaucoup de CSS dont elle n'a pas besoin. Ce CSS supplémentaire pose problème pour les raisons suivantes:

  • Ce code supplémentaire ralentit le chargement de la page. Consultez la page CSS bloquant le rendu.
  • Si un utilisateur accède à la page depuis un appareil mobile, le code supplémentaire consomme ses données mobiles.

Ouvrir l'onglet "Couverture"

  1. Ouvrez le menu de commande.
  2. Commencez à saisir coverage, sélectionnez la commande Show Coverage (Afficher la couverture), puis appuyez sur Entrée pour exécuter la commande. L'onglet Couverture s'ouvre dans le panneau.
Onglet &quot;Couverture&quot;
Figure 2. Onglet Couverture

Enregistrer une couverture de code

  1. Cliquez sur l'un des boutons suivants dans l'onglet Couverture :
    • Cliquez sur Start Instrument Coverage And Reload Page (Démarrer la couverture et actualiser la page) Actualiser si vous souhaitez afficher le code nécessaire pour charger la page.
    • Cliquez sur Couverture des instruments Enregistrer si vous souhaitez voir le code utilisé après avoir interagi avec la page.
  2. Cliquez sur Stop Instrument Coverage And Show Results (Arrêter l'instrumentation de la couverture et afficher les résultats) Arrêter lorsque vous souhaitez arrêter d'enregistrer la couverture de code.

Analyser la couverture du code

Le tableau de l'onglet Couverture indique les ressources analysées et la quantité de code utilisée dans chacune d'elles. Cliquez sur une ligne pour ouvrir la ressource concernée dans le panneau Sources et afficher la répartition ligne par ligne du code utilisé et du code inutilisé. Les lignes de code inutilisées sont précédées d'une ligne rouge.

Rapport de couverture de code
Figure 3 : Rapport de couverture de code
  • La colonne URL contient l'URL de la ressource analysée.
  • La colonne Type indique si la ressource contient du code CSS, JavaScript ou les deux.
  • La colonne Total Bytes (Nombre total d'octets) indique la taille totale de la ressource en octets.
  • La colonne Octets inutilisés indique le nombre d'octets non utilisés.
  • La dernière colonne sans nom est une visualisation des colonnes Total Bytes (Nombre total d'octets) et Unused Bytes (Octets inutilisés). La partie rouge de la barre correspond à des octets inutilisés. La section verte correspond aux octets.