Analyser les performances avec l’onglet Performance de Vue DevTools

Avant d'optimiser, vous devez savoir où le temps est consacré. Vue DevTools comprend une vue des performances et de la chronologie qui enregistre les rendus des composants, afin que vous puissiez trouver le travail inutile au lieu de le deviner.

Installez l'extension de navigateur ou exécutez l'application autonome. Dans les projets Vite, le module d’extension vite-plugin-vue-devtools ajoute un inspecteur intégré à l'application.

Ouvrez l'onglet de chronologie et de performances de DevTools, puis appuyez sur le bouton d'enregistrement et interagissez avec votre application. Arrêtez l'enregistrement pour capturer l'activité de rendu pendant cette période.

Chaque rendu de composant apparaît comme un événement dans la chronologie. Vous pouvez voir quand un composant a été rendu à nouveau et combien de temps son rendu a pris.

Une validation correspond à une mise à jour groupée du DOM. Le graphe des validations montre chacune d'elles ainsi que les composants qui y ont été rendus, ce qui vous permet de repérer les validations qui touchent bien plus de composants que prévu.

Le graphique en flammes empile les durées de rendu des parents et des enfants. Les barres larges correspondent à des rendus lents ; les empilements profonds montrent comment le rendu se propage dans l'arborescence.

Un rendu inutile est celui d'un composant qui a été rendu à nouveau mais a produit la même sortie. Ils apparaissent sous forme d'événements de rendu répétés dont le résultat n'a pas modifié le DOM.

Une cause fréquente consiste à transmettre comme propriété un objet nouvellement créé ou une fonction fléchée en ligne à chaque rendu, ce qui empêche la mémoïsation. L’enfant est de nouveau rendu même si sa sortie visible est identique.

Déclarez les constantes en dehors du composant ou enveloppez les données dérivées dans computed afin de transmettre la même référence lors des rendus successifs.

La chronologie enregistre également les événements de la souris et du clavier. Faites correspondre une mise à jour lente à l’interaction qui l’a déclenchée pour trouver le chemin de code exact à optimiser.

L’inspecteur de composants peut mettre en évidence les composants lorsqu’ils sont mis à jour. Observer un compteur clignoter à chaque changement d’état sans rapport révèle immédiatement les rendus excessifs.

Que représente le graphe des mises à jour dans l’onglet des performances ?

Utilisez l’onglet des performances et de la chronologie de Vue DevTools pour enregistrer les rendus. Le graphe des mises à jour affiche chaque mise à jour du DOM ainsi que les composants rendus, tandis que le graphique en flammes révèle les rendus lents. Repérez les rendus inutiles : des composants rendus de nouveau sans modification de leur sortie, souvent à cause de références de propriétés instables ; corrigez-les avec des constantes déclarées en dehors du composant ou avec computed.