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

Je faisais référence à cette documentation et suis tombé sur le concept de compilation. On peut utiliser la compilation JIT ou AOT. Cependant, je l'ai trouvé très bref et j'ai besoin de connaître les points suivants en détail,

• Différences entre ces deux techniques
• Recommandation sur quand utiliser quoi

JIT - Compilez TypeScript juste à temps pour l'exécuter.

• Compilé dans le navigateur.
• Chaque fichier compilé séparément.
• Pas besoin de construire après avoir changé votre code et avant de recharger la page du navigateur.
• Adapté au développement local.

AOT - Compilez TypeScript pendant la phase de construction.

• Compilé par la machine elle-même, via la ligne de commande (Faster).
• Tout le code compilé ensemble, en incorporant HTML / CSS dans les scripts.
• Pas besoin de déployer le compilateur (moitié de la taille angulaire).
• Source originale plus sécurisée non divulguée.
• Convient aux constructions de production.

Bien qu'il y ait des réponses, mais j'aimerais aussi ajouter certaines de mes découvertes, car j'étais vraiment confus avec ce qui est réellement compilé comme dans tous les cas, TS-> la JSconversion se produit. Je prends quelques para du blog de Jeff comme référence.

JIT

Le TScode écrit par le développeur est compilé en JScode. Maintenant, ce jscode compilé est à nouveau compilé par le navigateur afin que le htmlpuisse être rendu dynamiquement selon l'action de l'utilisateur et en conséquence les codes pour angular (pour les composants, la détection de changement, l'injection de dépendances) sont également générés au moment de l'exécution.

(Le compilateur de navigateur est ce qui prend les directives et les composants d'une application, ainsi que leurs codes HTML et CSS correspondants, et crée des fabriques de composants pour éliminer rapidement les instances avec toute leur logique de création de vue.)

Lorsqu'une application Angular 2 est amorcée dans le navigateur, le compilateur JIT effectue beaucoup de travail pour analyser les composants de l'application au moment de l'exécution et générer du code en mémoire. Lorsque la page est actualisée, tout le travail qui a été effectué est jeté et le compilateur JIT refait le travail.

AOT

Le TScode écrit par le développeur est compilé en JScode, cela js a déjà été compilé pour angular également . Maintenant, ce code compilé js est à nouveau compilé par le navigateur afin que le htmlfichier puisse être rendu. Mais le problème ici est que les fonctionnalités de angularont déjà été prises en charge par le AOTcompilateur et que le navigateur n'a donc pas à se soucier beaucoup de la création de composants, de la détection des changements, de l'injection de dépendances. Donc nous avons :

Rendu plus rapide

Avec AOT, le navigateur télécharge une version pré-compilée de l'application. Le navigateur charge le code exécutable afin de pouvoir rendre l'application immédiatement, sans attendre de compiler l'application au préalable.

Moins de requêtes asynchrones

Le compilateur intègre des modèles HTML externes et des feuilles de style CSS dans le JavaScript de l'application, éliminant ainsi les requêtes ajax distinctes pour ces fichiers source.

Taille de téléchargement du framework angulaire plus petite

Il n'est pas nécessaire de télécharger le compilateur Angular si l'application est déjà compilée. Le compilateur représente environ la moitié d'Angular lui-même, donc l'omettre réduit considérablement la charge utile de l'application.

Détecter les erreurs de modèle plus tôt

Le compilateur AOT détecte et signale les erreurs de liaison de modèle au cours de l'étape de génération avant que les utilisateurs puissent les voir.

Meilleure sécurité

AOT compile les modèles et composants HTML dans des fichiers JavaScript bien avant qu'ils ne soient servis au client. Sans modèles à lire et sans évaluation HTML ou JavaScript côté client, les opportunités d'attaques par injection sont moins nombreuses.

Les différences restantes sont déjà couvertes dans les puces de Benyamin, Nisar et Gaurang.

N'hésitez pas à me corriger

Benyamin et Nisar ont mentionné quelques bons points ici. J'y ajouterai.

Bien que théoriquement, AOT semble une option attrayante que JIT à des fins de production, mais je doutais que AOT en vaille vraiment la peine!

Eh bien, j'ai trouvé de belles statistiques par Jeff Cross et cela prouve qu'AOT réduit considérablement le temps de démarrage de l'application. Ci-dessous, une photo du post de Jeff Cross vous donnera une idée rapide à ce sujet

Compilation JiT (juste à temps)

Le nom lui-même décrit le fonctionnement, il compile le code juste au moment du chargement de la page dans le navigateur. Le navigateur téléchargera le compilateur, construira le code de l'application et le restituera.

Ce sera bon pour l'environnement de développement.

Compilation AoT (Ahead of Time)

Il compile tout le code au moment de la construction de l'application. Le navigateur ne souhaite donc pas télécharger le compilateur et compiler le code. Dans cette méthode, le navigateur peut facilement rendre l'application en chargeant simplement le code déjà compilé.

Peut être utilisé dans l'environnement de production

Nous pouvons comparer la compilation JiT et AoT comme ci-dessous

JIT (compilation juste à temps)

Just-in-Time (JIT) est un type de compilation qui compile votre application dans le navigateur au moment de l'exécution.

ng build
ng serve

AOT (compilation anticipée)

Ahead-of-Time (AOT) est un type de compilation qui compile votre application au moment de la construction.

ng build --aot
ng serve --aot

A la fin de la journée, AOT (Ahead-of-Time) et JIT (Just-in-Time) font la même chose. Ils compilent tous les deux votre code Angular afin qu'il puisse s'exécuter dans un environnement natif (alias le navigateur). La principale différence est lorsque la compilation a lieu. Avec AOT, votre code est compilé avant le téléchargement de l'application dans le navigateur. Avec JIT, votre code est compilé lors de l'exécution dans le navigateur.

Voici la comparaison:

Avantages de l'AOT:

• Un démarrage plus rapide car l'analyse et la compilation ne se produisent pas dans le navigateur.
• Les modèles sont vérifiés pendant le développement (ce qui signifie que toutes les erreurs que nous voyons dans la console javascript dans les applications en cours d'exécution seront ensuite renvoyées dans notre processus de construction).
• Taille de fichier plus petite car les fonctionnalités inutilisées peuvent être supprimées et le compilateur lui-même n'est pas livré.

Il n'y a en fait qu'un seul compilateur Angular. La différence entre AOT et JIT est une question de timing et d'outillage. Avec AOT, le compilateur s'exécute une fois au moment de la construction en utilisant un ensemble de bibliothèques; avec JIT, il s'exécute à chaque fois pour chaque utilisateur au moment de l'exécution en utilisant un ensemble différent de bibliothèques.

Compilateur JIT que nous utilisons lors du développement du projet angular. Dans cette compilation (la conversion TS en JS) se produit pendant l'exécution de l'application. Lorsque AOT est utilisé lors de la construction du code d'application pour le déploiement de l'application en production, cette fois-là, nous construisons notre code d'application à l'aide de la commande ng build --prod qui génère un dossier appelé webpack, webpack contient le bundle de tous les fichiers (HTML , CSS et dactylographié) au format javascript compressé.

La taille du dossier webpack généré pour la production est bien inférieure au dossier généré pour l'environnement de développement (en utilisant la commande ... ng build), car il ne contient pas le compilateur dans le dossier webpack, il améliore les performances de l'application .