wake-up-neo.com

Verbesserung der Produktionsaufbauzeit für Angular 7-Anwendung

Die Erstellung meiner Anwendung für die Produktion mit ng build --prod Dauert sehr lange.

Manchmal scheitert es sogar mit

FATAL ERROR: Ineffektive Mark-Compacts nahe Heap-Limit Allocation fehlgeschlagen - JavaScript-Heap hat nicht genügend Speicher

Kann ich etwas tun, um die Build-Zeit zu verkürzen?

10
Daniel

Es gibt einige Möglichkeiten, um die Erstellungszeit zu verkürzen.

Erhöhen Sie das Speicherlimit des Erstellungsprozesses

Der Erstellungsbefehl wird von einem Knoten ausgeführt, bei dem ein einzelner Prozess auf 64-Bit-Computern ein maximales Speicherlimit von 1,76 GB aufweist. Sie kann durch Hinzufügen des Arguments --max-old-space-size Zum Befehl build erhöht werden

Da dieses Argument an den Knotenprozess selbst übergeben werden muss, muss der Befehl direkt mit node ausgeführt werden. Eine Beispielzuweisung von 4096 MB (4 GB) RAM für den Prozess wäre:

node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build

Durch Erhöhen des Speicherlimits wird auch der Fehler "Nicht genügend Speicher" verhindert.

Es scheint eine Grenze für den Arbeitsspeicher zu geben, den der Prozess verwendet. Bei einem meiner Projekte wurde die Build-Zeit durch eine Speichererweiterung auf 12 GB erheblich verkürzt. Eine Erhöhung auf 32 GB führte jedoch zu keiner weiteren Verbesserung.

Korrigieren Sie Verweise auf node_modules in .scss-Dateien

Das Verweisen auf externe Stylesheets aus node_modules mithilfe relativer Pfade wirkt sich negativ auf die Leistung des Erstellungsprozesses aus und sollte vermieden werden.

Der Erstellungsprozess verwendet Webpacks sass-loader, Das eine Syntax unterstützt, bei der die Position von node_modules mit der Tilde ~ Referenziert wird.

Durch die Verwendung der Tilde anstelle des relativen Pfads wird die Erstellungszeit erheblich verkürzt. Anstatt also externe CSS-Stylesheets mit zu importieren

import "../../../../../node_modules/x/whatever.css"

verwenden

import "~node_modules/x/whatever.css"

Produktionsoptimierungen

Standardmäßig verwendet der Produktionsbuild die Konfiguration aus Ihrer angular.json - Datei. Die Standardwerte sind

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
}

Lenken Sie nicht von den Standardeinstellungen für die Produktionserstellung ab, es sei denn, Sie haben einen sehr guten Grund.

Dies trägt wesentlich dazu bei, die Erstellungszeit gering zu halten (insbesondere das Deaktivieren von sourceMap und das Aktivieren von buildOptimizer).

Aktualisieren Sie Ihre Angular CLI-Version

Das Angular CLI-Team verbessert kontinuierlich die Geschwindigkeit des Erstellungsprozesses.

Das Upgrade der Build-Leistung von Version 6 auf 7 ist beachtlich. Daher ist es immer eine gute Idee, die Bibliothek @angular/cli Auf dem neuesten Stand zu halten.

Externe Bibliotheken

Um eine schnelle Build-Anwendung zu haben, müssen Sie sehr vorsichtig sein, mit welchen Bibliotheken Sie importieren.

Viele beliebte Bibliotheken wie jQuery, lodash und moment sind sehr groß und für den Webpack-Erstellungsprozess nicht richtig optimiert.

Suchen Sie nach Bibliotheken, die Webpacks Tree-Shaking unterstützen, damit der Erstellungsprozess nur die Teile der Bibliothek bündeln kann, die tatsächlich in Ihrer Anwendung verwendet werden.

Gehen Sie auch nicht in die Falle, wenn Sie eine gesamte Hilfsprogrammbibliothek (wie zB lodash) hinzufügen, wenn Sie nur eine einzige Funktion daraus verwenden müssen (wie _get()).

Assets komprimieren

Das Komprimieren von Assets (häufig von Bildern) ist weitgehend eine triviale Aufgabe (googeln Sie einfach "Bilder online komprimieren") und kann die Leistung des Erstellungsprozesses und der Anwendung selbst steigern.

Hardware-Optimierungen

Da Javascript ein Single-Thread ist, beschleunigen die Vorteile mehrerer CPU-Kerne den Erstellungsprozess nicht.

Wenn Sie Ihre CPU während des Builds überwachen, werden Sie feststellen, dass ein einzelner Core fast während des gesamten Prozesses zu 100% ausgelastet ist.

Wenn Sie Ihre Anwendung regelmäßig mit dem Produktions-Flag als Teil Ihrer kontinuierlichen Integrationskonfiguration erstellen, können Sie in Betracht ziehen, einen Computer mit hoher Single-Thread-Leistung zu verwenden (Benchmarks siehe cpubenchmark.net ).

24
Daniel