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

111

Stavo facendo riferimento a questa documentazione e mi sono imbattuto nel concetto di compilazione. Si può usare la compilazione JIT o AOT. Tuttavia, l'ho trovato molto breve e ho bisogno di conoscere i seguenti punti in dettaglio,

Differenze tra queste due tecniche
Raccomandazione su quando usare cosa

angular compilation

— Gaurang Patel
fonte

148

JIT - Compila TypeScript appena in tempo per eseguirlo.

Compilato nel browser.
Ogni file viene compilato separatamente.
Non è necessario creare dopo aver modificato il codice e prima di ricaricare la pagina del browser.
Adatto per lo sviluppo locale.

AOT - Compila TypeScript durante la fase di costruzione.

Compilato dalla macchina stessa, tramite la riga di comando (Faster).
Tutto il codice è stato compilato insieme, incorporando HTML / CSS negli script.
Non è necessario distribuire il compilatore (metà della dimensione angolare).
Fonte originale più sicura non divulgata.
Adatto per build di produzione.

— Benyamin Shoham
fonte

2

Inoltre, ho riscontrato prestazioni molto scarse durante l'utilizzo della compilazione Just-in-Time, specialmente su dispositivi Android meno recenti. Inoltre, il divario di rendering al caricamento della prima pagina è molto maggiore (sui dispositivi Android meno recenti fino a 10 secondi a seconda delle dimensioni del progetto).

— Felix Hagspiel

29

Il dattiloscritto non viene compilato appena in tempo, il browser non può farlo. In entrambi i casi, il dattiloscritto viene compilato durante il processo di compilazione.

— Robouste

2

@ Robouste: Questo è esattamente ciò che mi confonde .. Ciò che è veramente compilato in anticipo e appena in tempo .. (se TJS viene compilato immediatamente). Quando richiedo una pagina nell'explorer, il javascript verrà scaricato ed eseguito nel browser. Qualcuno dei typedJ deve venire nel browser ??? no, per niente ... Allora cosa viene compilato in anticipo e appena in tempo .. ?? In realtà è il compilatore angolare che si intende. questo link risponderà a tutte le domande: " angular.io/guide/aot-compiler "

— Assil

2

Non sono un esperto ma quando si utilizza JIT, i sorgenti Angular vengono inviati al browser e questo compilerà l'applicazione. Ti consente di avere elementi dinamici che devono essere compilati in runtime. Con AOT, tutto è precompilato in modo che il server invii un comune sito Web javascript. Ottieni velocità di esecuzione e tempi di caricamento inferiori.

— Robouste

risposta eccellente, commenti anche utili per me.

— Rakshit Shah

61

Anche se ci sono alcune risposte ma vorrei aggiungere anche alcune delle mie scoperte, perché ero davvero confuso con ciò che viene effettivamente compilato come in tutti i casi, TS-> la JSconversione avviene. Prendo come riferimento alcuni paragrafi dal blog di Jeff .

JIT

Il TScodice scritto dallo sviluppatore viene compilato in JScodice. Ora, questo jscodice compilato viene nuovamente compilato dal browser in modo che htmlpossa essere renderizzato dinamicamente secondo l'azione dell'utente e di conseguenza i codici per angular (per i componenti, rilevamento delle modifiche, Dependency Injection) vengono generati anche in fase di esecuzione.

(Il compilatore del browser è ciò che prende le direttive e i componenti di un'applicazione, insieme al loro HTML e CSS corrispondenti, e crea fabbriche di componenti per eliminare rapidamente le istanze con tutta la loro logica di creazione della vista.)

Quando un'applicazione Angular 2 viene avviata nel browser, il compilatore JIT esegue molto lavoro per analizzare i componenti dell'applicazione in fase di runtime e generare codice in memoria. Quando la pagina viene aggiornata, tutto il lavoro che è stato fatto viene buttato via e il compilatore JIT fa il lavoro di nuovo.

AOT

Il TScodice scritto dallo sviluppatore è compilato in JScodice, anche questo js è già stato compilato per angular . Ora, questo codice compilato js viene nuovamente compilato dal browser in modo che htmlpossa essere visualizzato. Ma il problema qui è che le funzionalità di angularsono già state curate dal AOTcompilatore e quindi il browser non deve preoccuparsi molto della creazione dei componenti, del rilevamento delle modifiche, dell'inserimento delle dipendenze. Quindi, abbiamo:

Rendering più veloce

Con AOT, il browser scarica una versione precompilata dell'applicazione. Il browser carica il codice eseguibile in modo che possa eseguire il rendering dell'applicazione immediatamente, senza attendere prima di compilare l'app.

Meno richieste asincrone

Il compilatore integra modelli HTML esterni e fogli di stile CSS all'interno del JavaScript dell'applicazione, eliminando richieste ajax separate per quei file sorgente.

Dimensioni di download del framework angolare più piccole

Non è necessario scaricare il compilatore Angular se l'app è già compilata. Il compilatore è circa la metà di Angular stesso, quindi ometterlo riduce drasticamente il carico utile dell'applicazione.

Rileva prima gli errori del modello

Il compilatore AOT rileva e segnala gli errori di associazione del modello durante la fase di compilazione prima che gli utenti possano vederli.

Migliore sicurezza

AOT compila modelli e componenti HTML in file JavaScript molto prima che vengano offerti al client. Senza modelli da leggere e senza rischiose valutazioni HTML o JavaScript lato client, ci sono meno opportunità di attacchi injection.

Le differenze rimanenti sono già coperte nei punti elenco di Benyamin, Nisar e Gaurang.

Sentiti libero di correggermi

— Shashank Vivek
fonte

5

Grazie. Finalmente ho capito dopo aver letto la tua risposta e ne ho lette molte.

— Mario Subotic

24

Benyamin e Nisar hanno menzionato qui alcuni punti positivi. Aggiungerò ad esso.

Anche se teoricamente, AOT sembra un'opzione interessante rispetto a JIT per scopi di produzione, ma avevo il mio dubbio che AOT ne valesse davvero la pena!

Bene, ho trovato buone statistiche di Jeff Cross e dimostra che AOT riduce significativamente il tempo di bootstrap dell'app. Di seguito lo scatto dal post di Jeff Cross ti darà una rapida idea al riguardo,

— Gaurang Patel
fonte

19

Compilazione JiT (Just in Time)

Il nome stesso descrive il funzionamento, compila il codice solo nel momento del caricamento della pagina nel browser. Il browser scaricherà il compilatore, costruirà il codice dell'applicazione e lo visualizzerà.

Sarà un bene per l'ambiente di sviluppo.

Compilazione AoT (Ahead of Time)

Compila tutto il codice al momento della creazione dell'applicazione. Quindi il browser non vuole scaricare il compilatore e compilare il codice. In questo metodo il browser può facilmente eseguire il rendering dell'applicazione semplicemente caricando il codice già compilato.

Può essere utilizzato nell'ambiente di produzione

Possiamo confrontare la compilation JiT e AoT come di seguito

— vivekkurien
fonte

1

Questo significherebbe che l'applicazione JiT verrà caricata più velocemente la prima volta, ma dopo di che l'applicazione AoT verrà caricata sempre più velocemente?

— JKL

Mai. JiT si carica più lentamente di AoT

— vivekkurien

AOT è più lento di JIT perché non è conforme in fase di esecuzione. devi cambiare i titoli jit e aot

— Mr.AF

17

JIT (Just-in-Time Compilation)

Just-in-Time (JIT) è un tipo di compilazione che compila la tua app nel browser in fase di runtime.

ng build
ng serve

AOT (raccolta anticipata)

Ahead-of-Time (AOT) è un tipo di compilazione che compila la tua app in fase di compilazione.

ng build --aot
ng serve --aot

— Joby Wilson Mathews
fonte

2

che differenza tra queste 2 cifre? non ha bisogno di intro?

— Mr.AF

Quindi fondamentalmente Ahead-of-Time è più simile a Ahead-of-Runtime.

— Alireza Kahaei,

@ Mr.AF ho notato che anche adesso le immagini sono le stesse.

— Tiago Martins Peres 李大仁

14

Alla fine della giornata, AOT (Ahead-of-Time) e JIT (Just-in-Time) fanno le stesse cose. Entrambi compilano il tuo codice Angular in modo che possa essere eseguito in un ambiente nativo (noto anche come browser). La differenza fondamentale è quando avviene la compilazione. Con AOT, il codice viene compilato prima del download dell'app nel browser. Con JIT, il tuo codice viene compilato in fase di esecuzione nel browser.

Ecco il confronto:

Vantaggi di AOT:

Avvio più rapido poiché l'analisi e la compilazione non vengono eseguite nel browser.
I modelli vengono controllati durante lo sviluppo (il che significa che tutti gli errori che vediamo nella console javascript nelle app in esecuzione altrimenti verranno lanciati nel nostro processo di compilazione).
File di dimensioni inferiori in quanto le funzionalità inutilizzate possono essere eliminate e il compilatore stesso non viene spedito.

— pk_code
fonte

4

In realtà c'è solo un compilatore Angular. La differenza tra AOT e JIT è una questione di tempistica e strumenti. Con AOT, il compilatore viene eseguito una volta in fase di compilazione utilizzando un set di librerie; con JIT viene eseguito ogni volta per ogni utente in fase di esecuzione utilizzando un diverso set di librerie.

— programmatore anis
fonte

2

Compilatore JIT che utilizziamo durante lo sviluppo del progetto angolare. In questa compilazione (conversione da TS a JS) avviene durante il runtime dell'applicazione. Laddove come AOT viene utilizzato durante la creazione del codice dell'applicazione per la distribuzione dell'applicazione in produzione, quella volta creiamo il nostro codice dell'applicazione utilizzando il comando ng build --prod che genera una cartella chiamata webpack, webpack contiene il bundle di tutti i file (HTML , CSS e dattiloscritto) in formato javascript compresso.

La dimensione della cartella webpack generata per la produzione è di gran lunga inferiore alla cartella generata per l'ambiente di sviluppo (usando il comando ... ng build), perché non contiene il compilatore all'interno della cartella webpack, migliora le prestazioni dell'applicazione .

— user13601355
fonte