WARNUNG in Budgets, Maximum für Initiale überschritten

153

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?

Masoud Bimar
quelle
4
Versuchen Sie, Ihre Bilder in Assets zu komprimieren, anstatt die Datei angle.json zu bearbeiten
Ahsan,
@ Ahsan das habe ich getan. Immer noch die gleiche Nachricht. Ich bin mir nicht sicher, ob es um Vermögenswerte geht.
Emerica
@Curse Wee meine neue Antwort und überprüfen Sie die Links
Masoud Bimar

Antworten:

247

Öffnen Sie die Datei angle.json und suchen Sie das budgetsSchlüsselwort.

Es sollte so aussehen:

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

Wie Sie wahrscheinlich vermutet haben, können Sie den maximumWarningWert erhöhen , um diese Warnung zu verhindern, dh:

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

Was bedeutet Budgets ?

Ein Leistungsbudget ist eine Gruppe von Beschränkungen für bestimmte Werte, die sich auf die Leistung der Website auswirken und bei der Gestaltung und Entwicklung eines Webprojekts nicht überschritten werden dürfen.

In unserem Fall ist das Budget die Grenze für Bündelgrößen.

Siehe auch:

Yurzui
quelle
2
Können Sie erklären, was Budget bedeutet?
Stapelüberlauf
3
@StackOverflow Hinzugefügt
yurzui
2
Vielen Dank an @yurzui für Ihre schnelle Antwort. Ist es eine neue Funktion in Winkel 7? Wir haben diesen Fehler in Winkel 5 nicht gesehen. Bedeutet das, dass wir etwas falsch machen?
Stapelüberlauf
2
@StackOverflow wurde hinzugefügt in @angular/cli@7Siehe 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.
yurzui
23
Wie kann optimiert werden, um die Größe des verwendeten Budgets zu verringern? anstatt es zu erhöhen ...
deadManN
76

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…

  1. Wir haben möglicherweise mit unserer Funktion experimentiert und nicht richtig aufgeräumt
  2. Unsere Werkzeuge können schief gehen und einen fehlerhaften automatischen Import durchführen, oder wir wählen fehlerhafte Artikel aus der vorgeschlagenen Liste der Importe aus
  3. Wir könnten Sachen aus faulen Modulen an unangemessenen Orten importieren
  4. Unsere neue Funktion ist einfach sehr groß und passt nicht in vorhandene Budgets

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.

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

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.

Geben Sie hier die Bildbeschreibung ein

Es ist super einfach, dieses Diagramm zu erhalten.

  1. npm install -g webpack-bundle-analyzer
  2. Führen Sie in Ihrer Angular-App Folgendes aus ng build --stats-json(verwenden Sie kein Flag --prod). Durch Aktivieren--stats-json Sie eine zusätzliche Datei stats.json
  3. Führen webpack-bundle-analyzer ./dist/stats.jsonSie 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

Masoud Bimar
quelle
Wo platzieren Sie den Komprimierungscode, den Sie in Ihrer Winkel-App angegeben haben?
F3L1X79
1
Wenn Sie qzip in nodejs Projekt verwenden, sehen Sie diesen Link . Für Winkelprojekte können Sie es einfach beim Erstellen aktivieren. Siehe diesen Link
Masoud Bimar
2
So führen Sie den Analysator aus, ohne das Paket global zu installieren:npx webpack-bundle-analyzer ./dist/stats.json
michel404
4
In Angular 9 lautet der Befehl ng build --statsJson=true. Siehe Angular 9 Doc
wami