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ć?
angular
build
production
ng-build
Masoud Bimar
źródło
źródło
Odpowiedzi:
Otwórz plik angular.json i znajdź
budgets
słowo kluczowe.Powinien wyglądać następująco:
Jak się pewnie domyślasz, możesz zwiększyć
maximumWarning
wartość, aby zapobiec pojawieniu się tego ostrzeżenia, tj .:Co oznaczają budżety ?
W naszym przypadku limitem wielkości paczek jest budżet.
Zobacz też:
źródło
@angular/cli@7
Zobacz także co nowego w ng7 tutaj blog.angular.io/…With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
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…
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.
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.
npm install -g webpack-bundle-analyzer
ng build --stats-json
(nie używaj flagi--prod
). Włączając--stats-json
, otrzymasz dodatkowy plik stats.jsonwebpack-bundle-analyzer ./dist/stats.json
a 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
źródło
npx webpack-bundle-analyzer ./dist/stats.json
ng build --statsJson=true
. Zobacz Angular 9 Doc