Angular-2-Apps ohne Compiler, dafür mit vorkompilierten Templates ausliefern
Ahead-of-Time Compilation
Mit jeder Angular-2-Anwendung wird ein Compiler mitgeliefert. Dieser sorgt dafür, dass für jedes HTML-Template der Anwendung Code-behind erzeugt wird. Der generierte Code stellt die Verbindung zwischen beiden Welten her und instanziert die verwendeten Angular-Konstrukte. Hierbei spricht man von Just-in-Time-Kompilierung (JIT).
Der mit der Anwendung ausgelieferte JIT-Compiler ist allerdings nicht gerade klein, was größere Dateien und längere Ladezeiten zur Folge hat.
Angular 2 bietet mit der Ahead-of-Time (AOT)-Kompilierung einen alternativen Ansatz. Dazu wird der Code-behind für die Templates vorkompiliert und zusammen mit dem übrigen Code ausgeliefert. In diesem Beitrag lesen Sie, wie das klappt, was Sie dabei beachten müssen und welche Auswirkungen der Prozess der AOT-Kompilierung auf die Performance Ihrer Angular-App hat.
Beim Starten einer Webanwendung werden die erforderlichen Ressourcen vom Browser des Benutzers geladen. Dies geschieht auch bei einer Angular-Applikation. Aufgrund der Architektur von Angular wird dabei der Compiler mitgeliefert, damit dieser die Code-behind-Dateien zu den HTML-Templates generieren kann. Der Compiler ist essenziell und realisiert das Binding zwischen dem Code und den Templateszum Zeitpunkt des Ladens der Anwendung.
Das klingt umständlich und langsam. Könnte man den Overhead vermeiden, profitierte der Benutzer sicher von kürzeren Lade- und Startzeiten. Das haben auch die Entwickler von Angular erkannt und bieten deshalb die Ahead-of-Time-Kompilierung an.
Zunächst soll betrachtet werden, was „Ahead of Time“ eigentlich bedeutet und wie es sich von „Just in Time“ unterscheidet. Anschließend erfahren Sie, wie Sie ein Angular-Projekt mit wenigen Handgriffen für AOT anpassen. Abschließend geht es um die Vor- und Nachteile von AOT, die es zu berücksichtigen gilt.
AOT versus JIT
Bei Ahead-of-Time-Kompilierung wird Code vor dem Ausführen einer Anwendung in Maschinensprache übersetzt. Angewandt auf eine Angular-Anwendung bedeutet dies, dass keine zusätzlichen HTML-Templates an den Browser übertragen werden müssen. Wie bereits erwähnt, entfällt auch der Angular-Compiler beim Payload der Webanwendung. Beides führt dazu, dass die Ladezeiten geringer sind als beim herkömmlichen Vorgehen.
Anhand von Bild 1 wird klar, dass die Konvertierung der HTML-Templates und Komponenten zu JavaScript-Dateien nicht mehr zur Laufzeit im Browser ausgeführt wird, sondern bereits beim Bauen der Anwendung. Lediglich der erzeugte Code wird geladen und ausgeführt.
Bei der Betrachtung von JIT (siehe Bild 1) zeigt sich, dass das Kompilieren der Ressourcen komplett im Browser des Client-Rechners stattfindet. Hierfür ist das Ausliefern des Compilers notwendig, da das Bootstrapping der Anwendung sonst nicht möglich wäre.
Die Verwendung von JIT hat somit zur Folge, dass das Rendern der Anwendung länger dauert. Je größer eine Anwendung wird, desto länger dauert einerseits der Transfer der Daten zum Client und andererseits das Kompilieren, da mehr Ressourcen verarbeitet werden müssen.
Im Vergleich dazu wird bei der Ahead-of-Time-Kompilierung bereits ein großer Teil der Tätigkeiten beim Bauen der Anwendung durchgeführt, was die Zeit beim Laden der Oberfläche signifikant reduziert und zu einem besseren Benutzererlebnis führt…