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,
Réponses:
JIT - Compilez TypeScript juste à temps pour l'exécuter.
AOT - Compilez TypeScript pendant la phase de construction.
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.
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.
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:
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 .