OSTRZEŻENIE w budżetach, przekroczono maksimum na początku

Kiedy buduję mój projekt Angular 7 z --prod, mam ostrzeżenie w budżetach.

Mam projekt kątowy 7, chcę go zbudować, ale mam ostrzeżenie:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

to są szczegóły fragmentu:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

czym właściwie są budżety? i jak mam nimi zarządzać?

Otwórz plik angular.json i znajdź budgetssłowo kluczowe.

Powinien wyglądać następująco:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

Jak się pewnie domyślasz, możesz zwiększyć maximumWarningwartość, aby zapobiec pojawieniu się tego ostrzeżenia, tj .:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

Co oznaczają budżety ?

Budżet wydajnościowy to grupa limitów określonych wartości, które mają wpływ na wydajność witryny, których nie można przekroczyć podczas projektowania i opracowywania żadnego projektu internetowego.

W naszym przypadku limitem wielkości paczek jest budżet.

Zobacz też:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Budżety wydajności (utrzymuj niską liczbę żądań i małe rozmiary plików)

Co to są budżety Angular CLI? Budżety to jedna z mniej znanych funkcji interfejsu wiersza poleceń Angular. To raczej mała, ale bardzo fajna funkcja!

Wraz ze wzrostem funkcjonalności aplikacji rosną również rozmiary. Budżety to funkcja w Angular CLI, która pozwala ustawić progi budżetowe w konfiguracji, aby zapewnić, że części aplikacji mieszczą się w ustalonych granicach - Oficjalna dokumentacja

Innymi słowy, możemy opisać naszą aplikację Angular jako zestaw skompilowanych plików JavaScript zwanych pakietami, które są tworzone w procesie kompilacji. Budżety kątowe pozwalają nam skonfigurować oczekiwane rozmiary tych pakietów. Co więcej, możemy skonfigurować progi dla warunków, gdy chcemy otrzymać ostrzeżenie lub nawet zakończyć kompilację z błędem, jeśli rozmiar pakietu wymknie się spod kontroli!

Jak zdefiniować budżet? Budżety kątowe są zdefiniowane w pliku angular.json. Budżety są definiowane dla każdego projektu, co ma sens, ponieważ każda aplikacja w obszarze roboczym ma inne potrzeby.

Myśląc pragmatycznie, sensowne jest tylko określenie budżetów na kompilacje produkcyjne. Kompilacja Prod tworzy pakiety z „prawdziwym rozmiarem” po zastosowaniu wszystkich optymalizacji, takich jak potrząsanie drzewami i minimalizacja kodu.

Ups, błąd kompilacji! Przekroczono maksymalny rozmiar pakietu. To świetny sygnał, który mówi nam, że coś poszło nie tak…

1. Mogliśmy poeksperymentować z naszą funkcją i nie została poprawnie wyczyszczona
2. Nasze narzędzia mogą się zepsuć i wykonać zły automatyczny import lub wybierzemy zły element z sugerowanej listy importów
3. Możemy importować rzeczy z leniwych modułów w nieodpowiednich lokalizacjach
4. Nasza nowa funkcja jest po prostu naprawdę duża i nie pasuje do istniejących budżetów

Pierwsze podejście: czy twoje pliki są spakowane gzipem?

Ogólnie rzecz biorąc, plik spakowany gzip ma tylko około 20% rozmiaru oryginalnego pliku, co może drastycznie zmniejszyć początkowy czas ładowania aplikacji. Aby sprawdzić, czy pliki zostały spakowane gzipem, po prostu otwórz kartę sieciową konsoli programisty. Jeśli w „nagłówkach odpowiedzi” powinieneś zobaczyć „Content-Encoding: gzip”, możesz zaczynać.

Jak spakować gzip? Jeśli hostujesz swoją aplikację Angular na większości platform chmurowych lub CDN, nie powinieneś martwić się tym problemem, ponieważ prawdopodobnie załatwili to za Ciebie. Jeśli jednak masz własny serwer (taki jak NodeJS + expressJS) obsługujący Twoją aplikację Angular, zdecydowanie sprawdź, czy pliki są spakowane gzipem. Poniżej znajduje się przykład gzipowania statycznych zasobów w aplikacji NodeJS + expressJS. Trudno sobie wyobrazić, że ta martwa prosta „kompresja” oprogramowania pośredniego zmniejszyłaby rozmiar pakietu z 2,21 MB do 495,13 KB.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Drugie podejście :: Przeanalizuj swój pakiet Angular

Jeśli rozmiar twojego pakietu stanie się zbyt duży, możesz chcieć przeanalizować swój pakiet, ponieważ być może użyłeś niewłaściwego dużego pakietu innej firmy lub zapomniałeś usunąć pakiet, jeśli już go nie używasz. Webpack ma niesamowitą funkcję, która daje nam wizualne wyobrażenie o składzie pakietu internetowego.

Uzyskanie tego wykresu jest bardzo łatwe.

1. npm install -g webpack-bundle-analyzer
2. W aplikacji Angular uruchom ng build --stats-json(nie używaj flagi --prod). Włączając --stats-json, otrzymasz dodatkowy plik stats.json
3. Na koniec uruchom, webpack-bundle-analyzer ./dist/stats.jsona Twoja przeglądarka wyświetli stronę pod adresem localhost: 8888. Baw się dobrze.

ref 1: W jaki sposób budżety Angular CLI uratowały mój dzień i jak mogą uratować twój

ref 2: Optymalizacja rozmiaru wiązki kątowej w 4 krokach