Just-in-Time (JiT) vs Ahead-of-Time-Kompilierung (AoT) in Angular

Ich bezog mich auf diese Dokumentation und stieß auf das Kompilierungskonzept. Man kann entweder JIT- oder AOT-Kompilierung verwenden. Ich fand es jedoch sehr kurz und muss die folgenden Punkte im Detail kennen:

• Unterschiede zwischen diesen beiden Techniken
• Empfehlung, wann was zu verwenden ist

JIT - Kompilieren Sie TypeScript gerade rechtzeitig zur Ausführung.

• Im Browser kompiliert.
• Jede Datei wird separat kompiliert.
• Sie müssen nach dem Ändern Ihres Codes und vor dem erneuten Laden der Browserseite nicht erstellen.
• Geeignet für die lokale Entwicklung.

AOT - Kompilieren Sie TypeScript während der Erstellungsphase.

• Wird von der Maschine selbst über die Befehlszeile (schneller) kompiliert.
• Der gesamte Code wurde zusammen kompiliert und enthält HTML / CSS in den Skripten.
• Der Compiler muss nicht bereitgestellt werden (halbe Winkelgröße).
• Sicherere Originalquelle nicht bekannt gegeben.
• Geeignet für Produktionsaufbauten.

Es gibt zwar einige Antworten, aber ich möchte auch einige meiner Ergebnisse hinzufügen, da ich wirklich verwirrt war mit dem, was tatsächlich kompiliert wird, wie in allen Fällen, TS-> JSKonvertierung geschieht. Ich nehme einen Absatz aus Jeffs Blog als Referenz.

JIT

Das TS vom Entwickler geschriebene Code wird zu JSCode kompiliert . Dieser kompilierte jsCode wird nun erneut vom Browser kompiliert, sodass er htmlgemäß der Benutzeraktion dynamisch gerendert werden kann und dementsprechend zur angular Laufzeit auch Codes für (für Komponenten, Änderungserkennung, Abhängigkeitsinjektion) generiert werden.

(Der Browser-Compiler verwendet die Anweisungen und Komponenten einer Anwendung zusammen mit dem entsprechenden HTML- und CSS-Code und erstellt Komponentenfabriken, um Instanzen mit ihrer gesamten Logik zur Erstellung von Ansichten schnell auszumerzen.)

Wenn eine Angular 2-Anwendung im Browser gebootet wird, führt der JIT-Compiler viel Arbeit aus, um die Komponenten in der Anwendung zur Laufzeit zu analysieren und Code im Speicher zu generieren. Wenn die Seite aktualisiert wird, wird die gesamte geleistete Arbeit weggeworfen, und der JIT-Compiler erledigt die Arbeit erneut.

AOT

Der TSvom Entwickler geschriebene Code wird zu JSCode kompiliert , dieser js wurde bereits auch für Angular kompiliert . Dieser kompilierte js Code wird nun erneut vom Browser kompiliert, damit der htmlgerendert werden kann. Aber ist der Haken hier , dass die Funktionen von angularbereits betreut von genommen worden AOTCompiler und damit der Browser haben nicht viel zu befürchten über die Erstellung von Bauteilen, Änderungserkennung, Dependency Injection. Also haben wir :

Schnelleres Rendern

Mit AOT lädt der Browser eine vorkompilierte Version der Anwendung herunter. Der Browser lädt ausführbaren Code, damit er die Anwendung sofort rendern kann, ohne darauf warten zu müssen, dass die App zuerst kompiliert wird.

Weniger asynchrone Anforderungen

Der Compiler fügt externe HTML-Vorlagen und CSS-Stylesheets in das JavaScript der Anwendung ein und eliminiert separate Ajax-Anforderungen für diese Quelldateien.

Kleinere Angular Framework-Downloadgröße

Der Angular-Compiler muss nicht heruntergeladen werden, wenn die App bereits kompiliert ist. Der Compiler ist ungefähr die Hälfte von Angular selbst. Wenn Sie ihn weglassen, wird die Nutzlast der Anwendung drastisch reduziert.

Erkennen Sie Vorlagenfehler früher

Der AOT-Compiler erkennt und meldet Vorlagenbindungsfehler während des Erstellungsschritts, bevor Benutzer sie sehen können.

Bessere Sicherheit

AOT kompiliert HTML-Vorlagen und -Komponenten in JavaScript-Dateien, lange bevor sie dem Client bereitgestellt werden. Ohne zu lesende Vorlagen und ohne riskante clientseitige HTML- oder JavaScript-Auswertung gibt es weniger Möglichkeiten für Injection-Angriffe.

Verbleibende Unterschiede werden bereits in den Aufzählungspunkten von Benyamin, Nisar & Gaurang behandelt.

Fühlen Sie sich frei, mich zu korrigieren

Benyamin und Nisar erwähnten hier einige gute Punkte. Ich werde es hinzufügen.

Während AOT theoretisch für Produktionszwecke eine attraktive Option als JIT darstellt, hatte ich meine Zweifel, ob AOT es wirklich wert ist!

Nun, ich habe nette Statistiken von Jeff Cross gefunden und es beweist, dass AOT die Bootstrapping-Zeit der App erheblich verkürzt. Der folgende Ausschnitt aus Jeff Cross 'Post gibt Ihnen einen schnellen Überblick darüber.

JiT (Just in Time) Zusammenstellung

Der Name selbst beschreibt die Arbeitsweise. Er kompiliert den Code gerade zum Zeitpunkt des Ladens der Seite im Browser. Der Browser lädt den Compiler herunter, erstellt den Anwendungscode und rendert ihn.

Es wird gut für die Entwicklungsumgebung sein.

AoT-Kompilierung (Ahead of Time)

Es kompiliert den gesamten Code zum Zeitpunkt der Erstellung der Anwendung. Der Browser möchte den Compiler also nicht herunterladen und den Code kompilieren. Bei dieser Methode kann der Browser die Anwendung einfach rendern, indem er nur den bereits kompilierten Code lädt.

Kann in der Produktionsumgebung verwendet werden

Wir können die JiT- und AoT-Zusammenstellung wie folgt vergleichen

JIT (Just-in-Time-Zusammenstellung)

Just-in-Time (JIT) ist eine Art von Kompilierung, die Ihre App zur Laufzeit im Browser kompiliert.

ng build
ng serve

AOT (Ahead-of-Time-Zusammenstellung)

Ahead-of-Time (AOT) ist eine Art von Kompilierung, die Ihre App zur Erstellungszeit kompiliert.

ng build --aot
ng serve --aot

Am Ende des Tages machen AOT (Ahead-of-Time) und JIT (Just-in-Time) die gleichen Dinge. Beide kompilieren Ihren Angular-Code, damit er in einer nativen Umgebung (auch bekannt als Browser) ausgeführt werden kann. Der Hauptunterschied besteht darin, wann die Kompilierung erfolgt. Mit AOT wird Ihr Code kompiliert, bevor die App im Browser heruntergeladen wird. Mit JIT wird Ihr Code zur Laufzeit im Browser kompiliert.

Hier ist Vergleich:

Vorteile von AOT:

• Schnellerer Start als Parsing und Kompilierung im Browser nicht.
• Vorlagen werden während der Entwicklung überprüft (was bedeutet, dass alle Fehler, die in der Javascript-Konsole in den laufenden Apps angezeigt werden, ansonsten in unseren Erstellungsprozess geworfen werden).
• Kleinere Dateien als nicht verwendete Features können entfernt werden und der Compiler selbst wird nicht ausgeliefert.

Es gibt tatsächlich nur einen Angular-Compiler. Der Unterschied zwischen AOT und JIT hängt vom Timing und den Werkzeugen ab. Mit AOT wird der Compiler einmal zur Erstellungszeit mit einem Satz von Bibliotheken ausgeführt. Mit JIT wird es jedes Mal für jeden Benutzer zur Laufzeit mit einem anderen Satz von Bibliotheken ausgeführt.

JIT-Compiler, den wir während der Entwicklung des Winkelprojekts verwenden. Bei dieser Kompilierung (Konvertierung von TS in JS) erfolgt die Laufzeit der Anwendung. Wenn AOT beim Erstellen des Anwendungscodes für die Bereitstellung der Anwendung in der Produktion verwendet wird und dieses Mal unseren Anwendungscode mit dem Befehl ng build --prod erstellt, der einen Ordner namens webpack generiert, enthält webpack das Bündel aller Dateien (HTML) , CSS und Typoskript) im komprimierten Javascript-Format.

Die Größe des für die Produktion generierten Webpack-Ordners ist weitaus geringer als der für die Entwicklungsumgebung generierte Ordner (mit dem Befehl ... ng build), da der Compiler nicht im Webpack-Ordner enthalten ist. Dies verbessert die Leistung der Anwendung .