Profilowanie za pomocą karty Performance w Vue DevTools

Przed optymalizacją trzeba wiedzieć, gdzie zużywany jest czas. Vue DevTools zawiera widok wydajności i osi czasu, który rejestruje renderowanie komponentów, dzięki czemu można znaleźć niepotrzebnie wykonywaną pracę zamiast zgadywać.

Należy zainstalować rozszerzenie przeglądarki lub uruchomić samodzielną aplikację. W projektach Vite plugin vite-plugin-vue-devtools dodaje inspektor wewnątrz aplikacji.

Należy otworzyć kartę osi czasu lub wydajności w DevTools i nacisnąć przycisk nagrywania, a następnie wejść w interakcję z aplikacją. Zatrzymanie nagrywania zapisuje aktywność renderowania z tego przedziału czasu.

Każde renderowanie komponentu pojawia się na osi czasu jako zdarzenie. Można sprawdzić, kiedy komponent został ponownie wyrenderowany i ile czasu zajęło jego renderowanie.

Commit to jedno przetworzenie aktualizacji DOM. Wykres commitów pokazuje każdy commit oraz komponenty, które zostały w nim wyrenderowane, co pozwala znaleźć commity obejmujące znacznie więcej komponentów, niż oczekiwano.

Wykres płomieni układa czasy renderowania rodziców i dzieci w stos. Szerokie paski oznaczają wolne renderowanie, a głębokie stosy pokazują, jak renderowanie rozchodzi się po drzewie.

Niepotrzebne renderowanie ma miejsce wtedy, gdy komponent został ponownie wyrenderowany, ale wygenerował ten sam wynik. Widać je jako powtarzające się zdarzenia renderowania, których wynik nie zmienił DOM-u.

Częstą przyczyną jest przekazywanie nowo utworzonego obiektu lub funkcji strzałkowej zdefiniowanej bezpośrednio w szablonie jako props przy każdym renderowaniu, co uniemożliwia memoizację. Komponent potomny renderuje się ponownie, mimo że jego widoczny wynik pozostaje identyczny.

Należy przenieść stałe poza komponent lub opakować dane pochodne w computed, aby podczas kolejnych renderowań przekazywana była ta sama referencja.

Oś czasu rejestruje również zdarzenia myszy i klawiatury. Należy zestawić powolny commit z interakcją, która go wywołała, aby znaleźć dokładną ścieżkę kodu wymagającą optymalizacji.

Inspektor komponentów może wyróżniać komponenty podczas ich aktualizacji. Obserwowanie licznika migającego przy każdej niezwiązanej zmianie stanu od razu ujawnia nadmiarowe renderowanie.

Co przedstawia wykres commitów na karcie wydajności?

Należy używać karty wydajności lub osi czasu Vue DevTools do rejestrowania renderowań. Wykres commitów pokazuje każde opróżnienie DOM-u oraz komponenty, które zostały wyrenderowane, a wykres płomieniowy ujawnia powolne renderowania. Należy szukać niepotrzebnych renderowań — komponentów renderowanych ponownie mimo braku zmiany wyniku, często z powodu niestabilnych referencji propsów — i naprawiać je za pomocą stałych przeniesionych poza komponent lub computed.