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

Monitoruj rozmiar pakietów w czasie, aby mieć pewność, że aplikacja działa szybko.

Minko Gechev

Optymalizacja aplikacji Angular jest ważna, ale jak upewnić się, że jej wydajność nie pogarsza się z czasem? Przez wprowadzenie danych dotyczących wydajności i monitorowanie ich po każdej zmianie w kodzie.

Jednym z ważnych wskaźników jest rozmiar pliku JavaScript udostępnianego z aplikacją. Wprowadzając budżet wydajności, który monitorujesz przy każdej kompilacji lub żądaniu pull, możesz zapewnić trwałość optymalizacji w miarę upływu czasu.

Oblicz budżet skuteczności

Możesz skorzystać z tego kalkulatora budżetu online, aby oszacować, ile JavaScriptu możesz przeznaczyć na wczytanie Twojej aplikacji, w zależności od planowanego czasu do pełnej interaktywności.

Kalkulator budżetu

Konfigurowanie budżetu wydajności w interfejsie wiersza poleceń Angular

Gdy określisz docelowy budżet JavaScript, możesz go egzekwować za pomocą interfejsu wiersza poleceń Angular (CLI). Aby zobaczyć, jak to działa, zajrzyj do tej przykładowej aplikacji na GitHubie.

Zobaczysz, że ten budżet został skonfigurowany w kampanii angular.json:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Oto podsumowanie wprowadzonych informacji:

  • Pakiet JavaScript o nazwie main ma określony budżet.
  • Jeśli rozmiar pakietu main przekracza 170 KB, podczas tworzenia aplikacji interfejs wiersza poleceń Angular wyświetli ostrzeżenie w konsoli.
  • Jeśli rozmiar pakietu main przekracza 250 KB, kompilacja się nie uda.

Teraz spróbuj utworzyć aplikację, uruchamiając polecenie ng build --prod.

W konsoli powinien pojawić się ten błąd:

Błąd budżetu

Aby naprawić błąd kompilacji, zapoznaj się z dokumentem app.component.ts, który zawiera import z rxjs/internal/operators. To jest import prywatny, z którego nie powinni korzystać konsumenci rxjs. Znacznie zwiększają one rozmiar pakietu. Po zaktualizowaniu do odpowiedniego importu, rxjs/operators i ponownym uruchomieniu kompilacji, zobaczysz, że pomyślnie przeszła kontrolę budżetu.

Ponieważ w interfejsie wiersza poleceń Angular jest domyślnie włączone ładowanie różnicowe, polecenie ng build tworzy 2 kompilacje aplikacji:

  • Kompilacja dla przeglądarek zobsługą ECMAScript 2015. Ta kompilacja obejmuje mniej elementów polyfill i nowszą składnię JavaScriptu. Ta składnia jest bardziej ekspresywna, co prowadzi do mniejszych pakietów.
  • Kompilacja dla starszych przeglądarek bez obsługi ECMAScript 2015. Starsza składnia jest mniej ekspresywna i wymaga większej liczby elementów polyfill, co prowadzi do większych pakietów.

Plik index.html przykładowej aplikacji odnosi się do obu kompilacji, więc nowoczesne przeglądarki mogą korzystać z mniejszej kompilacji ECMAScript 2015, a starsze – do kompilacji ECMAScript 5.

Egzekwuj budżet w ramach ciągłej integracji

Tryb ciągłej integracji (CI) to wygodny sposób na monitorowanie budżetu aplikacji na przestrzeni czasu. Na szczęście najszybszym sposobem na skonfigurowanie tej funkcji jest stworzenie aplikacji za pomocą interfejsu wiersza poleceń Angular – nie są wymagane dodatkowe czynności. Gdy pakiet JavaScript przekroczy budżet, proces zostanie zakończony z kodem 1, a kompilacja się nie uda.

Jeśli chcesz, możesz też egzekwować budżet skuteczności za pomocą atrybutów bundlesize i Lighthouse. Główną różnicą między budżetami wydajności w interfejsie wiersza poleceń Angular a Lighthouse jest czas przeprowadzania testów. Interfejs wiersza poleceń Angular przeprowadza testy podczas kompilacji, sprawdzając zasoby produkcyjne i weryfikując ich rozmiary. Lighthouse otwiera jednak wdrożoną wersję aplikacji i mierzy rozmiar zasobu. Obie metody mają swoje wady i zalety. Sprawdzanie wykonywane przez interfejs wiersza poleceń w Angular jest mniej niezawodne, ale znacznie szybsze, ponieważ jest to wyszukiwanie pojedynczego dysku. Z kolei LightWallet of Lighthouse może przeprowadzić bardzo dokładną kontrolę, uwzględniając zasoby wczytywane dynamicznie, ale musi uruchamiać się i otwierać przy każdym uruchomieniu.

rozmiar pakietu jest podobny do sprawdzania budżetu w interfejsie wiersza poleceń Angular. Główna różnica polega na tym, że rozmiar pakietu może wyświetlać wyniki sprawdzania bezpośrednio w interfejsie GitHuba.

Podsumowanie

Ustal budżety wydajności za pomocą interfejsu wiersza poleceń Angular, aby mieć pewność, że wydajność aplikacji Angular nie pogarsza się z czasem:

  1. Wyznacz podstawowy poziom rozmiaru zasobów, korzystając z kalkulatora budżetu lub stosując się do metod obowiązujących w Twojej organizacji.
  2. Skonfiguruj budżety rozmiaru w polu angular.json na poziomie projects.[PROJECT-NAME].architect.build.configurations.production.budgets
  3. Budżety będą automatycznie egzekwowane w każdej kompilacji za pomocą interfejsu wiersza poleceń Angular.
  4. Rozważ wprowadzenie monitorowania budżetu w ramach ciągłej integracji (co można również osiągnąć za pomocą interfejsu wiersza poleceń Angular).