6 porad i sztuczek dotyczących dostrajania wydajności kątowej

Angular to potężna platforma JavaScript do tworzenia aplikacji internetowych, ale wraz z rozwojem aplikacji może stać się powolna i trudna w zarządzaniu. Dostrajanie wydajności Angular jest ważną częścią zapewnienia płynnego i wydajnego działania aplikacji Angular.

W tym artykule przyjrzymy się kilku wskazówkom i sztuczkom, które pozwolą zoptymalizować wydajność aplikacji Angular, w tym technikom poprawiania czasu ładowania, zmniejszania rozmiaru aplikacji i zmniejszania liczby niepotrzebnych aktualizacji DOM. Niezależnie od tego, czy jesteś doświadczonym programistą Angular, czy dopiero zaczynasz, te porady i wskazówki pomogą Ci poprawić wydajność aplikacji i zapewnić jej płynne działanie dla użytkowników.

Zacznijmy więc od podstawowych technik łatwego dostrajania wydajności aplikacji kątowych.

Wskazówki dotyczące dostrajania wydajności kątowej

Istnieją różne wskazówki, dzięki którym możesz łatwo poprawić wydajność swojej aplikacji kątowej. Jednak wybraliśmy dla Ciebie sześć najlepszych wskazówek dotyczących optymalizacji aplikacji kątowych. Tutaj są:

• Korzystanie z kompilacji AoT
• Korzystanie ze strategii wykrywania zmian OnPush
• Użyj czystych rur
• Używanie TrackBy na ngFor
• Dzielenie kodu
• Poprawa ładowania strony

Poznajmy szczegółowo każdy z nich.

Korzystanie z kompilacji AoT

Jedną ważną wskazówką dotyczącą poprawy wydajności aplikacji Angular jest użycie kompilacji Ahead-of-Time (AoT). AoT to technika, która wstępnie kompiluje komponenty i szablony Angulara w czasie kompilacji, zamiast kompilować je w czasie wykonywania. Może to znacznie skrócić czas ładowania aplikacji, ponieważ przeglądarka nie musi poświęcać czasu na kompilowanie szablonów i komponentów podczas pierwszego ładowania aplikacji.

AoT pomaga również zmniejszyć rozmiar aplikacji, umieszczając szablony i fabryki komponentów w kodzie JavaScript. Zmniejsza to liczbę żądań sieciowych potrzebnych do załadowania aplikacji i zmniejsza ogólny rozmiar aplikacji, co może pomóc skrócić czas ładowania.

Aby włączyć kompilację AoT w aplikacji Angular, musisz użyć Angular CLI do zbudowania aplikacji z flagą „–aot”. Umożliwi to kompilację AoT dla Twojej aplikacji, a wynikowa kompilacja zostanie zoptymalizowana pod kątem wydajności. Dodatkowo możesz bezpośrednio użyć narzędzi takich jak kompilator „ngc”, który jest narzędziem wiersza poleceń używanym przez Angular CLI do kompilacji AoT.

Użyj strategii wykrywania zmian OnPush

Strategia wykrywania zmian OnPush to sposób na poprawę wydajności aplikacji Angular poprzez sprawdzanie zmian w komponencie tylko wtedy, gdy zmienia się właściwość wejściowa lub emitowane jest zdarzenie. Jest to przeciwieństwo domyślnej strategii „OnPush”, która sprawdza zmiany w komponencie i wszystkich jego komponentach podrzędnych za każdym razem, gdy występuje cykl wykrywania zmian.

Aby użyć strategii OnPush, musisz zaimportować moduł ChangeDetectorRef i ustawić właściwość changeDetection dekoratora @Component Twojego komponentu na ChangeDetectionStrategy.OnPush.

OnPush to potężna strategia, która może poprawić wydajność Twojej aplikacji, ale może też uczynić ją bardziej złożoną. Pamiętaj, aby dokładnie przetestować swoją aplikację po wdrożeniu tej strategii, aby upewnić się, że działa zgodnie z oczekiwaniami.

Użyj czystych rur

Czysty potok w Angular to potok, który działa tylko wtedy, gdy następuje zmiana wartości wejściowej lub parametrów przekazywanych do potoku. Może to poprawić wydajność aplikacji Angular, ponieważ zmniejsza liczbę uruchomień potoku.

Aby utworzyć czystą rurę w Angular, musisz dodać właściwość pure: true do dekoratora @Pipe swojej rury.

Ważne jest, aby pamiętać, że kiedy tworzysz czysty potok, Angular ponownie uruchomi potok tylko wtedy, gdy wartość wejściowa lub parametry przekazane do potoku zmienią się. Jeśli potok opiera się na innych danych lub stanach, które nie są przekazywane jako dane wejściowe, potok może nie generować poprawnych danych wyjściowych.

Warto również zauważyć, że jeśli masz czysty potok wewnątrz komponentu, który wykorzystuje strategię wykrywania zmian OnPush, potok byłby wykonywany tylko wtedy, gdy wyemitowano dane wejściowe lub zdarzenie, co może jeszcze bardziej zwiększyć wydajność aplikacji.

Pamiętaj, że jeśli używasz czystego potoku ze złożoną funkcją, może to mieć negatywny wpływ na wydajność aplikacji, ponieważ potok nie zostanie wykonany, dopóki nie zmieni się wartość wejściowa. W takich przypadkach lepiej jest użyć zanieczyszczonych rur.

Używanie TrackBy na ngFor

trackBy to funkcja w Angular, która pozwala określić unikalny identyfikator dla każdego elementu w pętli ngFor. Może to poprawić wydajność aplikacji Angular, zmniejszając liczbę elementów DOM, które muszą być tworzone i niszczone, gdy zmienia się kolekcja.

Aby użyć trackBy w pętli ngFor, musisz przekazać funkcję jako wartość atrybutu trackBy. Funkcja powinna pobrać indeks bieżącego elementu i samego elementu oraz zwrócić unikalny identyfikator tego elementu.

<div *ngFor=”pozwól elementom; trackBy: trackByFn”>{{ nazwa.pozycji }}</div>

trackByFn(indeks: liczba, pozycja: dowolna) {

zwróć element.id;

}

W tym przykładzie funkcja trackByFn zwraca unikalny identyfikator każdego elementu jako jego właściwość id.

Dzielenie kodu

Dzielenie kodu to technika stosowana w celu poprawy wydajności aplikacji Angular poprzez skrócenie początkowego czasu ładowania aplikacji. Polega na podzieleniu kodu aplikacji na mniejsze, łatwiejsze w zarządzaniu fragmenty, które można ładować na żądanie, gdy użytkownik porusza się po aplikacji.

Dzięki temu aplikacja może załadować tylko kod potrzebny dla bieżącej strony, zamiast ładować cały kod naraz, co może znacznie skrócić czas początkowego ładowania aplikacji. Tę technikę można zaimplementować za pomocą modułu Angular Router i właściwości loadChildren.

Poprawa ładowania strony

Istnieje kilka sposobów na poprawę wczytywania strony w aplikacji Angular, z których niektóre obejmują:

1. Dzielenie kodu: Jak wspomniano wcześniej, dzielenie kodu to technika polegająca na dzieleniu kodu aplikacji na mniejsze fragmenty, które można załadować na żądanie. Może to znacznie poprawić początkowy czas ładowania aplikacji.
2. Leniwe ładowanie: Leniwe ładowanie to technika polegająca na ładowaniu modułów tylko wtedy, gdy są potrzebne. Może to również pomóc skrócić czas początkowego ładowania aplikacji, zmniejszając ilość kodu, który należy załadować przy początkowym ładowaniu.
3. Optymalizacja obrazów: Optymalizacja obrazów poprzez ich kompresję i użycie odpowiedniego formatu obrazu może również pomóc poprawić ładowanie strony, zmniejszając rozmiar obrazów, które należy pobrać.
4. Korzystanie z pamięci podręcznej przeglądarki: włączenie pamięci podręcznej przeglądarki może również pomóc poprawić ładowanie strony, umożliwiając przeglądarce lokalne przechowywanie zasobów, dzięki czemu nie trzeba ich ponownie pobierać.

Ostatnie słowa

Podsumowując, Angular to potężna i wszechstronna platforma, której można używać do tworzenia złożonych, wydajnych aplikacji internetowych. Jednak, podobnie jak w przypadku każdego frameworka, istnieją pewne najlepsze praktyki i techniki, które można wykorzystać do optymalizacji wydajności aplikacji Angular. Wykorzystując techniki, takie jak dzielenie kodu, ładowanie z opóźnieniem itp., programiści mogą znacznie poprawić czas ładowania i ogólną wydajność swoich aplikacji Angular.

Smarsh Infotech, popularna firma outsourcingowa usług IT może być Twoim przyszłym partnerem w rozwoju aplikacji. Jeśli planujesz rozwijać swój biznes na platformach cyfrowych, możemy Ci pomóc w każdy możliwy sposób. Połączmy się i przedyskutujmy Twoje pomysły na projekty.

Przeczytaj także: Nowy Angular 14: Przeczytaj o tym wszystko