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

155

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ć?

Masoud Bimar
źródło
4
Spróbuj skompresować obrazy w zasobach zamiast edytować plik angular.json
Ahsan,
@Ahsan, to właśnie zrobiłem. Wciąż ta sama wiadomość. Nie jestem pewien, czy chodzi o aktywa.
Emerica
@Curse Wee moja nowa odpowiedź i sprawdź linki
Masoud Bimar

Odpowiedzi:

252

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ż:

yurzui
źródło
2
Czy możesz wyjaśnić, co oznacza budżet?
Stack Overflow
3
@StackOverflow Dodano
yurzui
2
Dzięki @yurzui za szybką odpowiedź, czy to nowa funkcja w Angular 7? Nie widzieliśmy tego błędu w Angular 5. Czy to oznacza, że ​​robimy coś źle?
Stack Overflow
2
@StackOverflow Zostało dodane w @angular/cli@7Zobacz 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.
yurzui
23
jak zoptymalizować, aby zmniejszyć używany rozmiar budżetu? zamiast zwiększyć ...
deadManN
76

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.

wprowadź opis obrazu tutaj

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

Masoud Bimar
źródło
Gdzie umieszczasz kod „kompresji”, który podałeś w swojej aplikacji kątowej?
F3L1X79
1
Jeśli używasz qzip w projekcie nodejs, zobacz ten link , dla projektu kątowego możesz po prostu włączyć go za pomocą polecenia budowania, zobacz ten link
Masoud Bimar
2
Aby uruchomić analizator bez instalowania pakietu na całym świecie:npx webpack-bundle-analyzer ./dist/stats.json
michel404
4
W Angular 9 poleceniem jest ng build --statsJson=true. Zobacz Angular 9 Doc
wami