Profilazione con la scheda Performance di Vue DevTools

Prima di ottimizzare è necessario sapere dove viene impiegato il tempo. Vue DevTools include una vista delle prestazioni e della timeline che registra i rendering dei componenti, così è possibile individuare il lavoro inutile invece di procedere per supposizioni.

Installare l'estensione del browser oppure eseguire l'app standalone. Nei progetti Vite, il plugin vite-plugin-vue-devtools aggiunge un inspector all'interno dell'app.

Aprire la scheda timeline/prestazioni di DevTools e avviare la registrazione, quindi interagire con l'app. Arrestare la registrazione per acquisire l'attività di rendering relativa a quell'intervallo.

Ogni rendering di un componente appare come un evento nella timeline. È possibile vedere quando un componente è stato renderizzato nuovamente e quanto tempo ha richiesto il rendering.

Un commit è un singolo flush degli aggiornamenti al DOM. Il grafico dei commit mostra ogni commit e i componenti renderizzati al suo interno, consentendo di individuare i commit che coinvolgono molti più componenti del previsto.

Il flame chart dispone in pila le durate del rendering dei componenti padre e figlio. Le barre larghe indicano rendering lenti, mentre le pile profonde mostrano come il rendering si propaghi nell'albero.

Un rendering inutile si verifica quando un componente viene renderizzato nuovamente ma produce lo stesso output. Questi casi appaiono come eventi di rendering ripetuti il cui risultato non ha modificato il DOM.

Una causa comune consiste nel passare a ogni rendering un oggetto appena creato o una arrow function inline come prop, invalidando la memoizzazione. Il componente figlio esegue nuovamente il rendering anche se l'output visibile è identico.

Porti le costanti fuori dal componente oppure racchiuda i dati derivati in computed, in modo da passare lo stesso riferimento tra un rendering e l'altro.

La timeline registra anche gli eventi del mouse e della tastiera. Metta in corrispondenza un commit lento con l'interazione che lo ha attivato per individuare il percorso esatto del codice da ottimizzare.

L'inspector dei componenti può evidenziare i componenti mentre si aggiornano. Osservare un contatore che lampeggia a ogni modifica di stato non correlata rivela immediatamente un eccesso di rendering.

Che cosa rappresenta il grafico dei commit nella scheda delle prestazioni?

Utilizzi la scheda delle prestazioni/timeline di Vue DevTools per registrare i rendering. Il grafico dei commit mostra ogni flush del DOM e i componenti sottoposti a rendering, mentre il flame chart rivela i rendering lenti. Cerchi i rendering superflui, ovvero i componenti che eseguono nuovamente il rendering senza modificare l'output, spesso a causa di riferimenti instabili nelle prop, e li corregga con costanti portate fuori dal componente o con computed.