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,
Odpowiedzi:
JIT - skompiluj TypeScript w samą porę do wykonania.
AOT - Kompiluj TypeScript w fazie kompilacji.
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 .
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.
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:
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 .