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

Odsyłałem do tej dokumentacji i natrafiłem na koncepcję kompilacji. Można użyć kompilacji JIT lub AOT. Jednak wydało mi się to bardzo krótkie i muszę szczegółowo poznać następujące punkty,

• Różnice między tymi dwiema technikami
• Zalecenie, kiedy używać czego

JIT - skompiluj TypeScript w samą porę do wykonania.

• Skompilowany w przeglądarce.
• Każdy plik kompilowany oddzielnie.
• Nie ma potrzeby budowania po zmianie kodu i przed ponownym załadowaniem strony przeglądarki.
• Nadaje się do rozwoju lokalnego.

AOT - Kompiluj TypeScript w fazie kompilacji.

• Skompilowany przez samą maszynę za pomocą wiersza poleceń (szybciej).
• Cały kod skompilowany razem, wstawiając HTML / CSS do skryptów.
• Nie ma potrzeby wdrażania kompilatora (połowa rozmiaru kątowego).
• Bardziej bezpieczne, oryginalne źródło nie zostało ujawnione.
• Nadaje się do kompilacji produkcyjnych.

Chociaż jest kilka odpowiedzi, ale chciałbym również dodać niektóre z moich ustaleń, ponieważ byłem naprawdę zdezorientowany tym, co faktycznie jest kompilowane, tak jak we wszystkich przypadkach TS-> następuje JSkonwersja. Jako punkt odniesienia biorę paragraf z bloga Jeffa .

JIT

TSKod napisany przez programistę jest kompilowany do JSkodu. Teraz ten skompilowany jskod jest ponownie kompilowany przez przeglądarkę, dzięki czemu htmlmoże być renderowany dynamicznie zgodnie z działaniem użytkownika, a odpowiednio kody angular (dla komponentów, wykrywania zmian, wstrzykiwania zależności) są również generowane w czasie wykonywania.

(Kompilator przeglądarki jest tym, co pobiera dyrektywy i komponenty aplikacji wraz z odpowiadającymi im kodami HTML i CSS i tworzy fabryki komponentów, aby szybko stłumić instancje z całą ich logiką tworzenia widoku).

Kiedy aplikacja Angular 2 jest ładowana w przeglądarce, kompilator JIT wykonuje dużo pracy, aby przeanalizować komponenty aplikacji w czasie wykonywania i wygenerować kod w pamięci. Po odświeżeniu strony cała wykonana praca zostaje wyrzucona, a kompilator JIT wykonuje całą pracę od nowa.

AOT

TSKod napisany przez programistę jest kompilowany do JSkodu, to js już zostało skompilowane dla kanciasty jak dobrze . Teraz ten skompilowany js kod jest ponownie kompilowany przez przeglądarkę, aby htmlmożna było renderować. Ale haczyk polega na tym, że kompilator angularzadbał już o funkcje, AOTa zatem przeglądarka nie musi się zbytnio martwić o tworzenie komponentów, wykrywanie zmian, wstrzykiwanie zależności. Więc mamy :

Szybsze renderowanie

Dzięki AOT przeglądarka pobiera wstępnie skompilowaną wersję aplikacji. Przeglądarka ładuje kod wykonywalny, dzięki czemu może natychmiast wyrenderować aplikację, bez konieczności uprzedniego skompilowania aplikacji.

Mniej żądań asynchronicznych

Kompilator wbudowuje zewnętrzne szablony HTML i arkusze stylów CSS w JavaScript aplikacji, eliminując oddzielne żądania ajax dla tych plików źródłowych.

Mniejszy rozmiar pobierania frameworka Angular

Nie ma potrzeby pobierania kompilatora Angular, jeśli aplikacja jest już skompilowana. Kompilator to mniej więcej połowa samego Angulara, więc pominięcie go radykalnie zmniejsza obciążenie aplikacji.

Wykryj błędy szablonu wcześniej

Kompilator AOT wykrywa i raportuje błędy powiązań szablonu na etapie kompilacji, zanim użytkownicy będą mogli je zobaczyć.

Lepsze bezpieczeństwo

AOT kompiluje szablony i komponenty HTML do plików JavaScript na długo przed udostępnieniem ich klientowi. Brak szablonów do odczytania i ryzykowna ocena kodu HTML lub JavaScript po stronie klienta oznacza mniej okazji do ataków typu iniekcja.

Pozostałe różnice omówiono już w punktach Benyamin, Nisar i Gaurang.

Zapraszam do poprawiania mnie

Beniamin i Nisar wymienili tutaj kilka dobrych punktów. Dodam do tego.

Chociaż teoretycznie AOT wygląda atrakcyjnie niż JIT do celów produkcyjnych, miałem wątpliwości, czy AOT naprawdę jest tego warty!

Cóż, znalazłem fajne statystyki Jeffa Crossa i to udowadnia, że ​​AOT znacznie skraca czas ładowania aplikacji. Poniżej fotka z posta Jeffa Crossa da Ci szybki obraz tego,

Kompilacja JiT (Just in Time)

Sama nazwa opisuje działanie, kompiluje kod w momencie ładowania strony w przeglądarce. Przeglądarka pobierze kompilator, zbuduje kod aplikacji i wyrenderuje go.

Będzie dobre dla środowiska programistycznego.

Kompilacja AoT (Ahead of Time)

Kompiluje cały kod w momencie tworzenia aplikacji. Dlatego przeglądarka nie chce pobierać kompilatora i kompilować kodu. W tej metodzie przeglądarka może łatwo wyrenderować aplikację, po prostu ładując już skompilowany kod.

Może być używany w środowisku produkcyjnym

Możemy porównać kompilację JiT i AoT jak poniżej

JIT (kompilacja Just-in-Time)

Just-in-Time (JIT) to typ kompilacji, który kompiluje aplikację w przeglądarce w czasie wykonywania.

ng build
ng serve

AOT (kompilacja wyprzedzająca)

Ahead-of-Time (AOT) to typ kompilacji, który kompiluje aplikację w czasie kompilacji.

ng build --aot
ng serve --aot

Pod koniec dnia AOT (Ahead-of-Time) i JIT (Just-in-Time) robią to samo. Obaj kompilują Twój kod Angular, aby mógł działać w natywnym środowisku (czyli w przeglądarce). Kluczowa różnica polega na tym, kiedy następuje kompilacja. Dzięki AOT Twój kod jest kompilowany przed pobraniem aplikacji w przeglądarce. Dzięki JIT kod jest kompilowany w przeglądarce w czasie wykonywania.

Oto porównanie:

Korzyści z AOT:

• Szybsze uruchamianie, ponieważ analiza i kompilacja nie występują w przeglądarce.
• Szablony są sprawdzane podczas programowania (co oznacza, że ​​wszystkie błędy, które widzimy w konsoli javascript w uruchomionych aplikacjach, w przeciwnym razie zostaną wyrzucone w naszym procesie budowania).
• Mniejszy rozmiar pliku, ponieważ nieużywane funkcje można usunąć, a sam kompilator nie jest wysyłany.

W rzeczywistości jest tylko jeden kompilator Angular. Różnica między AOT i JIT jest kwestią czasu i narzędzi. W przypadku AOT kompilator jest uruchamiany raz w czasie kompilacji przy użyciu jednego zestawu bibliotek; z JIT jest uruchamiany za każdym razem dla każdego użytkownika w czasie wykonywania przy użyciu innego zestawu bibliotek.

Kompilator JIT, którego używamy podczas tworzenia projektu kątowego. W tej kompilacji (konwersja TS do JS) ma miejsce w czasie wykonywania aplikacji. Podczas gdy AOT jest używany podczas budowania kodu aplikacji do wdrożenia aplikacji w środowisku produkcyjnym, tym razem tworzymy kod aplikacji za pomocą polecenia ng build --prod, które generuje folder o nazwie webpack, webpack zawiera pakiet wszystkich plików (HTML , CSS i maszynopis) w skompresowanym formacie javascript.

Rozmiar folderu webpack wygenerowanego dla produkcji jest znacznie mniejszy niż folder wygenerowany dla środowiska programistycznego (za pomocą polecenia ... ng build), ponieważ nie zawiera kompilatora w folderze webpack, poprawia wydajność aplikacji .