Jak poprawić wydajność Angulara

Angular to popularny framework front-end do tworzenia aplikacji internetowych. Jednak wraz ze wzrostem rozmiaru i złożoności aplikacji można zauważyć spadek wydajności. W tym artykule omówimy niektóre z najlepszych praktyk poprawiania wydajności aplikacji Angular.

Użyj strategii wykrywania zmian OnPush

Angular wykorzystuje wykrywanie zmian, aby określić, kiedy zaktualizować widok. Domyślna strategia wykrywania zmian sprawdza zmiany we wszystkich składnikach za każdym razem, gdy wystąpi zdarzenie. Może to być czasochłonny proces, zwłaszcza w przypadku dużych aplikacji.

Aby poprawić wydajność, możesz użyć strategii wykrywania zmian OnPush. Strategia „OnPush” uruchomi wykrywanie zmian tylko wtedy, gdy zmieni się odniesienie do właściwości wejściowej, a nie jeśli zmienią się same właściwości obiektu. Oznacza to, że jeśli zmutujesz obiekt przekazany jako właściwość wejściowa, wykrywanie zmian nie zostanie wyzwolone, ale jeśli przypiszesz nowy obiekt do właściwości wejściowej, zostanie wyzwolone wykrywanie zmian.

To zachowanie różni się od domyślnej strategii wykrywania zmian, która wyzwala wykrywanie zmian we wszystkich zmianach właściwości wejściowych, niezależnie od tego, czy odwołanie do właściwości wejściowej uległo zmianie, czy nie.

Aby użyć strategii wykrywania zmian OnPush, dodaj następujący kod do swojego komponentu:

@Component({
 changeDetection: ChangeDetectionStrategy.OnPush
})

Leniwe ładowanie to technika, która umożliwia ładowanie tylko wymaganych komponentów i modułów na żądanie. Może to skrócić początkowy czas ładowania aplikacji i poprawić jej wydajność.

Aby korzystać z leniwego ładowania, możesz podzielić aplikację na moduły funkcji i ładować je tylko wtedy, gdy są potrzebne. Na przykład, jeśli Twoja aplikacja ma stronę profilu użytkownika, możesz utworzyć dla niej osobny moduł i załadować go tylko wtedy, gdy użytkownik przejdzie do tej strony.

Zoptymalizuj inicjalizację komponentów

Inicjowanie komponentu może być czasochłonnym procesem, zwłaszcza jeśli masz dużą liczbę zależności lub jeśli wykonujesz niepotrzebne obliczenia podczas inicjowania.

Aby zoptymalizować inicjalizację komponentów, można zminimalizować liczbę zależności i uniknąć niepotrzebnych obliczeń podczas inicjalizacji. Możesz także użyć ładowania z opóźnieniem, aby załadować zależności tylko wtedy, gdy są potrzebne.

Użyj trackBy w ngFor

Jeśli używasz ngFor do przeglądania listy elementów, użyj trackBy, aby pomóc Angularowi śledzić, które elementy zostały dodane, usunięte lub zmodyfikowane. Może to poprawić wydajność Twojej aplikacji poprzez zmniejszenie liczby manipulacji DOM.

Aby użyć trackBy, dodaj następujący kod do swojego komponentu:

<ng-container *ngFor="let item of items; trackBy: trackByFn">
  {{ item }}
</ng-container>

...

trackByFn(index, item) {
  return item.id;
}

Użyj czystych rur

Potoki służą do przekształcania danych w Angular. Domyślnie potoki są czyste, ale mogą istnieć potoki nieczyste, co oznacza, że ​​są one wywoływane za każdym razem, gdy następuje zmiana w danych. Może to stanowić problem z wydajnością, jeśli potok nie wymaga częstego ponownego obliczania.

Aby poprawić wydajność, możesz oczyścić fajkę. Czysty potok jest zoptymalizowany do ponownego obliczania tylko wtedy, gdy zmienia się wartość wejściowa. Aby twój potok był czysty, dodaj do niego następujący kod:

@Pipe({
  name: 'myPipe',
  pure: true
})

Postępując zgodnie z tymi najlepszymi praktykami, możesz znacznie poprawić wydajność swojej aplikacji Angular i zapewnić lepszą obsługę użytkownikom.

Przeczytaj także:https://zmushegh./why-use-pipe-instead-of-function-in-angular-507cf972bfb0

Z poważaniem,
Mushegh Zakaryan