Wenn ich mein Angular 7-Projekt mit --prod erstelle, habe ich eine Warnung in den Budgets.
Ich habe ein eckiges 7-Projekt, ich möchte es bauen, aber ich habe eine Warnung:
WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB
Dies sind Chunk-Details:
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]
Was genau sind Budgets? und wie soll ich sie verwalten?
angular
build
production
ng-build
Masoud Bimar
quelle
quelle
Antworten:
Öffnen Sie die Datei angle.json und suchen Sie das
budgets
Schlüsselwort.Es sollte so aussehen:
Wie Sie wahrscheinlich vermutet haben, können Sie den
maximumWarning
Wert erhöhen , um diese Warnung zu verhindern, dh:Was bedeutet Budgets ?
In unserem Fall ist das Budget die Grenze für Bündelgrößen.
Siehe auch:
quelle
@angular/cli@7
Siehe auch, was in ng7 neu ist hier blog.angular.io/…With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
Was sind Angular CLI-Budgets? Budgets ist eine der weniger bekannten Funktionen der Angular CLI. Es ist eine ziemlich kleine, aber sehr nette Funktion!
Wenn die Funktionalität von Anwendungen zunimmt, nimmt auch ihre Größe zu. Budgets ist eine Funktion in der Angular CLI, mit der Sie Budgetschwellenwerte in Ihrer Konfiguration festlegen können, um sicherzustellen, dass Teile Ihrer Anwendung innerhalb der von Ihnen festgelegten Grenzen bleiben - Offizielle Dokumentation
Mit anderen Worten, wir können unsere Angular-Anwendung als eine Reihe kompilierter JavaScript-Dateien beschreiben, die als Bundles bezeichnet werden und vom Erstellungsprozess erstellt werden. Mit Winkelbudgets können wir die erwarteten Größen dieser Bundles konfigurieren. Darüber hinaus können wir Schwellenwerte für Bedingungen konfigurieren, bei denen wir eine Warnung erhalten oder die Erstellung sogar mit einem Fehler fehlschlagen möchten, wenn die Bundle-Größe zu außer Kontrolle gerät!
Wie definiere ich ein Budget? Winkelbudgets werden in der Datei angle.json definiert. Budgets werden pro Projekt definiert, was sinnvoll ist, da jede App in einem Arbeitsbereich unterschiedliche Anforderungen hat.
Pragmatisch gedacht ist es nur sinnvoll, Budgets für die Produktionsaufbauten zu definieren. Prod Build erstellt Bundles mit „True Size“, nachdem alle Optimierungen wie Tree-Shaking und Code-Minimierung angewendet wurden.
Ups, ein Build-Fehler! Die maximale Bündelgröße wurde überschritten. Dies ist ein großartiges Signal, das uns sagt, dass etwas schief gelaufen ist…
Erster Ansatz: Werden Ihre Dateien komprimiert?
Im Allgemeinen hat die komprimierte Datei nur etwa 20% der Größe der Originaldatei, was die anfängliche Ladezeit Ihrer App drastisch verkürzen kann. Um zu überprüfen, ob Sie Ihre Dateien komprimiert haben, öffnen Sie einfach die Registerkarte "Netzwerk" der Entwicklerkonsole. Wenn Sie in den "Antwortheadern" "Content-Encoding: gzip" sehen sollten, können Sie loslegen.
Wie gzip? Wenn Sie Ihre Angular-App auf den meisten Cloud-Plattformen oder im CDN hosten, sollten Sie sich über dieses Problem keine Sorgen machen, da sie dies wahrscheinlich für Sie erledigt haben. Wenn Sie jedoch einen eigenen Server (wie NodeJS + expressJS) haben, der Ihre Angular-App bedient, überprüfen Sie auf jeden Fall, ob die Dateien komprimiert sind. Das folgende Beispiel zeigt, wie Sie Ihre statischen Assets in einer NodeJS + expressJS-App komprimieren können. Sie können sich kaum vorstellen, dass diese absolut einfache Middleware-Komprimierung Ihre Bundle-Größe von 2,21 MB auf 495,13 KB reduzieren würde.
Zweiter Ansatz :: Analysieren Sie Ihr Winkelbündel
Wenn Ihre Bundle-Größe zu groß wird, möchten Sie möglicherweise Ihr Bundle analysieren, weil Sie möglicherweise ein unangemessenes großes Paket eines Drittanbieters verwendet haben oder vergessen haben, ein Paket zu entfernen, wenn Sie es nicht mehr verwenden. Webpack hat eine erstaunliche Funktion, die uns eine visuelle Vorstellung von der Zusammensetzung eines Webpack-Bundles gibt.
Es ist super einfach, dieses Diagramm zu erhalten.
npm install -g webpack-bundle-analyzer
ng build --stats-json
(verwenden Sie kein Flag--prod
). Durch Aktivieren--stats-json
Sie eine zusätzliche Datei stats.jsonwebpack-bundle-analyzer ./dist/stats.json
Sie schließlich aus, und Ihr Browser öffnet die Seite unter localhost: 8888. Viel Spass damit.Ref. 1: Wie haben Angular CLI-Budgets meinen Tag gerettet und wie können sie Ihren retten?
Ref. 2: Optimieren Sie die Winkelbündelgröße in 4 Schritten
quelle
npx webpack-bundle-analyzer ./dist/stats.json
ng build --statsJson=true
. Siehe Angular 9 Doc