Angular 2: compilation Just-in-Time (JiT) vs Ahead-Time (AoT)
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 - Compiler 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.
- Convient pour le développement local.
AOT - Compiler TypeScript pendant la phase de construction.
- Compilé par la machine elle-même, via la ligne de commande (Faster).
- Tout le code compilé ensemble, intégrant HTML/CSS dans les scripts.
- Pas besoin de déployer le compilateur (la moitié de la taille Angular).
- Plus sécurisé, source originale non divulguée.
- Convient aux constructions de production.
Bien qu'il y ait quelques réponses mais je voudrais ajouter certaines de mes découvertes aussi, parce que J'étais vraiment confus avec ce qui est en train d'être compilé comme dans tous les cas, la conversion TS -> JS a lieu. Je prends quelques para de blog de Jeff comme référence.
JIT
Le code TS écrit par le développeur est compilé en code JS. Maintenant, ce code js compilé est à nouveau compilé par le navigateur afin que le html puisse être restitué dynamiquement selon l'action de l'utilisateur et code en conséquence pour angular (pour les composants, la détection des modifications, l'injection de dépendance). ) 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 occurrences avec toute la logique de création de vues.)
Lorsqu'une application Angular 2 est démarré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 effectué est jeté et le compilateur JIT fait le travail à nouveau.
AOT
Le code TS écrit par le développeur est compilé en code JS, , ce js a déjà été compilé pour angular comme bien . Maintenant, ce code compilé js est à nouveau compilé par le navigateur afin que le html puisse être restitué. Mais, , le problème réside dans le fait que les fonctionnalités de angular ont déjà été prises en charge par le compilateur AOT et que, par conséquent, le navigateur n’a pas à s’inquiéter beaucoup sur la création de composants, la détection des modifications, l’injection de dépendances. Nous avons donc :
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 la compilation de l'application.
Moins de requêtes asynchrones
Le compilateur insère des modèles HTML externes et des feuilles de style CSS externes dans l'application JavaScript, éliminant ainsi les demandes ajax distinctes pour ces fichiers source.
Taille de téléchargement du cadre Angular 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 correspond à environ la moitié de Angular lui-même, de sorte que son omission 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 des modèles lors de l'étape de création avant que les utilisateurs ne puissent les voir.
Meilleure sécurité
AOT compile les modèles et les composants HTML dans des fichiers JavaScript bien avant qu'ils ne soient servis au client. En l'absence de modèles à lire et d'évaluation HTML ou JavaScript risquée côté client, les possibilités d'attaques par injection sont moins nombreuses.
Les différences restantes sont déjà couvertes par les points centraux de Benyamin, Nisar et Gaurang.
N'hésitez pas à me corriger
Benyamin et Nisar ont mentionné quelques points intéressants. Je vais ajouter à cela.
Bien qu'en théorie, AOT semble une option attrayante pour la production mais je me demandais si AOT en valait vraiment la peine!
Eh bien, j'ai trouvé Nice stats de Jeff Cross et cela prouve que AOT réduit considérablement le temps de démarrage de l'application. La photo ci-dessous, tirée de l'article de Jeff Cross, vous en donnera une idée rapide,
JIT (compilation juste à temps)
AOT (compilation avant l'heure)
Compilation JiT (Just in Time)
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 et 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. Donc, le navigateur ne veut 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
À la fin de la journée, AOT (Ahead-of-Time) et JIT (Just-in-Time) font les mêmes choses. Ils compilent tous les deux votre code Angular pour qu'il puisse s'exécuter dans un environnement natif (le navigateur). La principale différence réside dans la compilation. Avec AOT, votre code est compilé avant que l'application ne soit téléchargée dans le navigateur. Avec JIT, votre code est compilé au moment de l'exécution dans le navigateur.
Voici la comparaison: 
Avantages de 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 sinon 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 lors de l'exécution à l'aide d'un ensemble de bibliothèques différent.
J'ai trouvé une très bonne explication ici ..
TLDR;
Nous compilons essentiellement le code deux fois avec les applications angular2, une fois lorsque nous convertissons TS en JS, puis lorsque le navigateur convertit JS en binaire.
Bien que nous ne puissions pas contrôler ces derniers, nous pouvons toutefois contrôler quand la compilation de TS à JS est effectuée.
Avec angular2, si vous utilisez JIT (valeur par défaut), les deux compilations ont lieu une fois le code chargé dans le navigateur (c'est-à-dire TS -> JS -> binaire). Compiler à la volée la compilation TS -> JS à la volée est non seulement une surcharge, mais aussi, le compilateur angular2 est presque deux fois plus petit que le paquet angular2. Par conséquent, si nous l’évitons, nous pouvons réduire la taille du paquet. charge utile de manière significative.
AOT conforme le code TS à JS, réduisant ainsi le temps de compilation ainsi que la taille du code, en supprimant le besoin du compilateur angular, qui constitue 50% de la code