WARNUNG in Budgets, Maximum für Initiale überschritten

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?

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

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Leistungsbudgets (Halten Sie die Anzahl der Anfragen niedrig und die Dateigrößen klein)

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.

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