Budżety wydajności za pomocą interfejsu wiersza poleceń Angular

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.

Kalkulator budżetu

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:

Błąd budżetu

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:

  1. Ustaw podstawę dla rozmiaru zasobu, korzystając z kalkulatora budżetu lub stosując się do zasad organizacji.
  2. Skonfiguruj budżety wielkości w sekcji angular.json w sekcji projects.[PROJECT-NAME].architect.build.configurations.production.budgets
  3. Budżety będą automatycznie stosowane do każdej kompilacji za pomocą narzędzia wiersza poleceń Angular.
  4. Rozważ wprowadzenie monitorowania budżetu w ramach ciągłej integracji (co można również uzyskać za pomocą interfejsu wiersza poleceń Angular).