Un rapport de couverture JavaScript indique quel code a été exécuté pendant une période d’observation. Le code non exécuté au chargement peut être nécessaire à un menu, au passage de commande ou à une autre route. Utilisez le rapport pour choisir un point à examiner, puis vérifiez les parcours concernés avant de modifier le bundle.
Commencez par la ressource et les conditions
Lancez Milten JS Scanner sur la page à examiner. Conservez l’URL, la date et les conditions de test avec le résultat. Le scanner observe un chargement de page sans clic ni défilement. Il relève le chargement des scripts, leur couverture et les erreurs JavaScript ; il ne prouve pas qu’un fichier est inutile sur l’ensemble du site.
Comparez les données de chargement du fichier à celles de son exécution. Un volume de transfert élevé, une exécution longue et une forte proportion de code non exécuté sont des observations distinctes. Un script peut se télécharger rapidement tout en occupant longtemps le thread principal. Un fichier non chargé ne fournit aucune mesure d’exécution exploitable pour cet essai.
Suivez un exemple de paiement illustratif
Supposons que app.js contienne le code de la page de destination et celui du passage de commande. La fonction de commande ne s’exécute pas à l’ouverture de la page de destination. Il s’agit d’un exemple pédagogique, et non d’un résultat mesuré chez un client.
Repérez l’URL de la ressource et la façon dont la page l’importe. Ouvrez le parcours de commande, utilisez le menu et visitez les autres pages qui partagent le bundle. Notez les actions testées. Dans Chrome DevTools Coverage, l’enregistrement peut se poursuivre pendant les interactions. Cette observation couvre davantage qu’un scan limité au chargement initial.
Si le parcours de commande a besoin de ce code, le supprimer casserait une fonction utile. Il peut être pertinent de charger cette fonction lorsque l’utilisateur arrive à cette étape. La décision dépend de l’application et de l’effet sur l’interaction suivante.
Utiliser les source maps disponibles
Une source map relie un bundle généré à ses modules sources. La vue des modules de Milten nécessite une source map valide, prise en charge et lisible par le scanner. Sans elle, cette partie du rapport reste incomplète. Les informations sur les ressources et les erreurs peuvent néanmoins orienter la recherche.
Sans source map exploitable, examinez le chemin d’importation de la ressource et la sortie du build. L’absence de vue des modules ne prouve pas que tout le code a été exécuté. Le guide MDN sur les source maps explique le lien entre le code généré et le code original.
Effectuez un changement et testez le parcours concerné
Choisissez une opportunité confirmée, comme séparer une fonctionnalité rarement utilisée ou retarder une intégration facultative. Gardez le changement suffisamment petit pour pouvoir comparer. Vérifiez que la fonctionnalité requise fonctionne toujours, qu'aucune nouvelle erreur de console n'apparaît et que le réseau charge les fichiers prévus.
Utilisez Speed Scanner pour examiner le chargement et INP Scanner pour étudier une interaction lente. Le TBT et les tâches longues au chargement ne mesurent pas la même chose que l’INP des visites réelles. Si des objets s’accumulent après des navigations répétées, utilisez Memory Leaks et reproduisez le parcours signalé.
Comparez les exécutions comparables
Répétez la même URL dans les mêmes conditions de périphérique, de réseau et de cache. Conservez les deux rapports et enregistrez les interactions que vous avez testées manuellement. Vérifiez la version de production après avoir publié la modification du code ; un bundle de développement peut se comporter différemment.
Puis-je supprimer chaque octet non exécuté ?
Non. Le résultat décrit une période d’observation, pas tous les états possibles de l’application. Testez les actions concernées et les routes qui partagent le bundle avant de supprimer du code.
Un bundle plus petit garantit-il une page plus rapide ?
Non, l'ordre de chargement, la réponse du serveur, l'exécution et les interactions ultérieures comptent également. Comparez le parcours utilisateur ainsi que la taille du fichier.
Analyser le JavaScript d'une page. Pour le contexte de chargement plus large, lisez vitesse du site Web et référencement.
