Monitoruj rozmiary swoich pakietów na przestrzeni czasu, aby mieć pewność, że aplikacja będzie działać szybko.
Optymalizacja aplikacji Angular jest ważna, ale jak zapewnić, aby jej wydajność nie spadała z czasem? Wprowadzanie danych o skuteczności i ich monitorowanie przy każdej zmianie kodu.
Jednym z ważnych wskaźników jest rozmiar kodu JavaScript dostarczanego z aplikacją. Wprowadzając budżet na skuteczność, który będziesz monitorować w przypadku każdej kompilacji lub prośby o przeniesienie, możesz mieć pewność, że optymalizacje będą trwałe.
Obliczanie budżetu na potrzeby skuteczności
Możesz użyć tego internetowego kalkulatora budżetu, aby oszacować, ile JavaScriptu może obsłużyć Twoja aplikacja w zależności od docelowego czasu do pełnej interaktywności.
Konfigurowanie budżetu skuteczności w interfejsie wiersza poleceń Angulara
Gdy określisz docelowy budżet JavaScript, możesz go zastosować za pomocą interfejsu wiersza poleceń Angular (CLI). Aby zobaczyć, jak to działa, zapoznaj się z tą przykładową aplikacją na GitHubie.
Zobaczysz, że w angular.json
został skonfigurowany następujący budżet:
"budgets": [{
"type": "bundle",
"name": "main",
"maximumWarning": "170kb",
"maximumError": "250kb"
}]
Oto podsumowanie:
- Istnieje budżet dla pakietu JavaScript o nazwie
main
. - Jeśli pakiet
main
przekroczy rozmiar 170 KB, podczas kompilowania aplikacji w interfejsie wiersza poleceń Angular pojawi się ostrzeżenie. - Jeśli pakiet
main
przekroczy rozmiar 250 KB, kompilacja się nie powiedzie.
Teraz spróbuj skompilować aplikację, uruchamiając ng build --prod
.
W konsoli powinien pojawić się ten błąd:
Aby naprawić błąd kompilacji, zapoznaj się z plikiem app.component.ts
, który zawiera import z pliku rxjs/internal/operators
. Jest to import prywatny, którego nie powinni używać użytkownicy rxjs
. Znacznie zwiększa to rozmiar pakietu. Gdy zaktualizujesz import do prawidłowej wersji rxjs/operators
i ponownie uruchomisz kompilację, zobaczysz, że przejdzie ona weryfikację budżetu.
Ponieważ ładowanie różnicowe jest domyślnie włączone w CLI Angulara, polecenie ng build
tworzy 2 kompilacje aplikacji:
- Kompilacja dla przeglądarek z obsługą ECMAScript 2015. Ta wersja zawiera mniej polyfillów i bardziej nowoczesną składnię JavaScript. Ta składnia jest bardziej ekspresyjna, co prowadzi do mniejszych pakietów.
- Kompilacja dla starszych przeglądarek bez obsługi ECMAScript 2015. Starsza składnia jest mniej ekspresyjna i wymaga stosowania większej liczby polyfilli, co prowadzi do większych pakietów.
Plik index.html
przykładowej aplikacji odwołuje się do obu wersji, aby nowoczesne przeglądarki mogły korzystać z mniejszej wersji ECMAScript 2015, a starsze przeglądarki mogły korzystać z wersji ECMAScript 5.
Wymuszanie budżetu w ramach ciągłej integracji
Tryb ciągłej integracji (CI) to wygodny sposób na monitorowanie budżetu aplikacji w czasie. Na szczęście najszybszym sposobem na skonfigurowanie tego jest skompilowanie aplikacji za pomocą narzędzia wiersza poleceń Angular CLI – nie musisz wykonywać żadnych dodatkowych czynności. Gdy pakiet JavaScript przekroczy budżet, proces zakończy się z kodem 1, a kompilacja zakończy się niepowodzeniem.
Jeśli chcesz, możesz też narzucić budżet wydajności za pomocą parametru bundlesize i narzędzi Lighthouse. Główna różnica między budżetami wydajności w CLI Angular a Lighthouse polega na tym, kiedy są wykonywane kontrole. Interfejs wiersza poleceń Angular wykonuje sprawdzanie w czasie kompilacji, analizując zasoby produkcyjne i sprawdzając ich rozmiary. Lighthouse otwiera jednak wdrożony wariant aplikacji i mierzy rozmiar zasobu. Oba podejścia mają swoje plusy i minusy. Kontrola skuteczności interfejsu wiersza poleceń Angular jest mniej rzetelna, ale znacznie szybsza, ponieważ jest to wyszukiwanie na jednym dysku. Z drugiej strony, portfel LightWallet w Lighthouse może przeprowadzić bardzo dokładną weryfikację, uwzględniając zasoby wczytywane dynamicznie, ale musi wdrażać i otwierać aplikację za każdym razem, gdy jest uruchamiana.
Polecenie bundlesize jest bardzo podobne do sprawdzania budżetu w CLI Angulara. Główną różnicą jest to, że polecenie bundlesize może wyświetlać wyniki sprawdzania bezpośrednio w interfejsie GitHuba.
Podsumowanie
Aby mieć pewność, że wydajność aplikacji Angular nie będzie się pogarszać z czasem, ustaw budżety wydajności za pomocą wiersza poleceń Angular CLI:
- Ustaw podstawę dla rozmiaru zasobu, korzystając z kalkulatora budżetu lub stosując się do zasad organizacji.
- Skonfiguruj budżety wielkości w sekcji
angular.json
w sekcjiprojects.[PROJECT-NAME].architect.build.configurations.production.budgets
- Budżety będą automatycznie stosowane do każdej kompilacji za pomocą narzędzia wiersza poleceń Angular.
- Rozważ wprowadzenie monitorowania budżetu w ramach ciągłej integracji (co można również uzyskać za pomocą interfejsu wiersza poleceń Angular).