2016-09-14 13 views
5

Kompilacja wyprzedzająca (lub AoT) to funkcja dostępna w Angular2. Ale nie mogłem znaleźć dobrego wyjaśnienia na oficjalnej stronie o tym.Co to jest AoT (lub kompilacja wyprzedzająca) w Angular2?

Czy ktoś może jasno to zdefiniować?

+2

Możliwa dup z http://stackoverflow.com/questions/39464319/how-does-angular2-ahead-of-time-aot-compilation-work – yurzui

+0

dzięki za link, ja już bym przejrzał go, ale wciąż szukał dokładnej definicji. –

Odpowiedz

6

Szablon, w którym używamy osobliwych składni kątowych 2, takich jak ngFor lub plików wiążących rury lub dane, należy skompilować do przyjaznego kodu vm, który przeglądarka może odczytać.

W przypadku kompilacji na czas (regularne działanie), struktura musi dostarczyć kompilator kątowy, a szablon zostanie skompilowany w przeglądarce po uruchomieniu aplikacji. Oznacza to, że musi być podany większy kąt, a dłuższy czas ładowania, ponieważ przeglądarka musi skompilować szablon, zanim będzie mógł go renderować.

Jest to analogiczne do tego, jak mamy w przeglądarce transpozycję maszynopisu. Ponieważ jest to kosztowny proces, na ogół przenoszymy maszynopis w trybie offline podczas pakowania lub budowania procesu.

Rendering szablon nieaktywny daje kilka korzyści jak

  • mniejszy rozmiar wiązki: 60% angular2 biblioteki jest kompilator. Teraz, gdy szablon jest kompilowany z wyprzedzeniem, nie musimy już wysyłać kompilatora. Zmniejsza to rozmiar pakietu, który aplikacja musi przesłać:
  • Szybszy czas ładowania: Ponieważ szablon jest już skompilowany do przyjaznego kodu VM, przeglądarka nie zajmuje czasu na renderowanie szablonu. Wynikiem szybszego renderowania strony.
+0

AOT to tylko fakt przekształcania szablonów html w funkcje. Zasadniczo twoja aplikacja powinna być szybsza (nie trzeba kompilować tablic w locie podczas bootstrapu). Zgadzam się więc ** Szybszy czas ładowania **. Ale dla ** mniejszego rozmiaru pakietu ** nie nastąpi to z powodu AOT. Będziesz musiał użyć czegoś takiego jak pakiet zbiorczy, aby przetasować swój kod (i zmniejszyć rozmiar pakietu). To jest wczesny etap. – Maxime

+0

oprócz drżenia drzewa, mniejszy rozmiar pakietu jest również możliwy z AOT, ponieważ kompilator kątowy, który jest główną częścią kąta 2, nie jest zawarty w pakiecie –

+0

"oprócz drżenia drzewa ... ponieważ kompilator kątowy ... jest główną częścią kątowy2 ". ** potrzebujesz **, aby uruchomić kompilację AOT, zanim będziesz mógł wykonać efektywne drżenie drzewa. – Maxime

1

Angular2 docs: https://angular.io/docs/ts/latest/guide/deployment.html#!#aot

kątowej Ahead-of-time kompilator kompiluje wstępnie komponentów aplikacji i ich szablonów podczas procesu kompilacji.

Aplikacje skompilowane z AOT uruchamiają się szybciej z kilku powodów.

Application components execute immediately, without client-side compilation. 
Templates are embedded as code within their components so there is no client-side request for template files. 
You don't download the Angular compiler, which is pretty big on its own. 
The compiler discards unused Angular directives that a tree-shaking tool can then exclude.