Si vous avez déjà examiné la structure de fichiers d’une application angulaire, vous trouverez de nombreux modèles HTML, CSS et JavaScript qui fonctionnent tous ensemble et sont compilés pour rendre une application Web bien conçue. Le processus de compilation consiste en deux approches. Le premier est le Juste à temps (JAT) compilation, sur laquelle Angular s’appuyait auparavant. Avec l’avènement de CLI angulaire (interface de ligne de commande) outils, cependant, il est maintenant possible d’utiliser AOT (à l’avance) compilation à la place, ce qui facilite l’optimisation de vos applications angulaires. Nous discuterons en détail de ces deux méthodes de compilation tout au long de ce guide.
Dans ce didacticiel de développement Web, nous discuterons du concept de ces deux approches de compilation, examinerons comment AOT fonctionne avec le code angulaire et verrons son impact sur les performances de l’application lorsqu’elle s’exécute sur le navigateur.
Commençons par discuter brièvement des deux processus de compilation.
Lis: Meilleurs cours en ligne pour apprendre le HTML
Qu’est-ce que la compilation juste à temps (JIT) dans Angular ?
La compilation juste à temps (JIT) est l’une des approches de compilation qu’Angular utilise pour compiler le code. Comme son nom l’indique, la compilation est effectuée au moment de l’exécution lorsque le code s’exécute dans le navigateur. Dans les anciennes versions d’Angular, JIT était l’option de compilation par défaut qui compilait votre application pendant son exécution dans le navigateur. Lorsque l’utilisateur a accédé à l’application Angular dans son navigateur, il a récupéré tous les fichiers requis sur le serveur, puis a compilé le code JavaScript au format de code binaire, qui pourrait ensuite être exécuté par l’interpréteur du navigateur. De cette manière, JIT effectuait la compilation du code au fur et à mesure qu’il était livré au navigateur.
Qu’est-ce que la compilation Ahead of Time (AOT) dans Angular ?
AOT (Ahead of Time) est un acte de compilation et ce n’est pas seulement spécifique à Angular. Avec cette approche, comme son nom l’indique, la compilation est effectuée avant de le programme s’exécute dans le navigateur. Comme JIT, AOT compile également le code de langage de haut niveau (JavaScript) sous une forme de code binaire pour le rendre exécutable sur le navigateur. Cela réduit considérablement les efforts du moteur d’exécution, car cela libère l’interprète de ne pas se soucier de la compilation des différents actifs du site Web avant qu’ils ne soient envoyés au navigateur.
En fin de compte, l’objectif des approches AOT et JIT est le même : compiler du code de langage de haut niveau en code natif. La différence réside uniquement dans le moment où la compilation se produit. Avec JIT, le code est compilé au moment de l’exécution, tandis qu’AOT compile le code au préalable.
Avantages de l’AOT par rapport à la compilation JIT
AOT présente certains avantages bénéfiques par rapport au JIT. Voici quelques-uns des avantages les plus importants de la compilation Ahead of Time :
- Avec AOT, les développeurs ont des tailles d’application plus petites à servir au navigateur. La compilation AOT réduit la taille du framework Angular à la moitié de sa taille et, par conséquent, l’application à servir devient également plus petite.
- Les programmeurs ont l’avantage de rendre les applications plus rapidement. La raison de ce rendu rapide est que la compilation effectuée juste avant le rendu de l’application est maintenant effectuée beaucoup plus tôt avec AOT.
- La compilation Ahead of Time aide à détecter les erreurs à un stade plus précoce. En fait, avec JIT, vous pouvez ignorer du code qui n’est pas optimisé mais qui semble fonctionner correctement à ce moment-là, mais, plus tard, lors de l’exécution de l’application, le code peut entraîner une sortie préjudiciable.
- AOT regroupe le HTML et le CSS sous une forme pré-compilée. Cela rend plus difficile la rétro-ingénierie du processus. De cette manière, la compilation AOT améliore également la sécurité des applications Web et rend plus difficile pour les pirates d’injecter du code malveillant dans le système de l’utilisateur.
Lis: Outils de gestion de projet pour les développeurs Web
Comment utiliser AOT pour compiler des applications angulaires
L’une des méthodes les plus simples pour écrire une application Angular consiste à utiliser l’outil Angular CLI. Les développeurs Web peuvent créer des modèles, des services, des directives et des modules directement à partir de la ligne de commande à l’aide de la CLI. Les programmeurs peuvent également utiliser Webpack, qui est un gestionnaire de bundles pour l’écriture de modèles de projet, pour créer de superbes modèles de projet avec toutes les fonctionnalités mentionnées ci-dessus. Si vous ne souhaitez pas utiliser Angular CLI ou si votre projet n’est pas compatible avec Angular CLI, vous pouvez toujours créer des modèles de projet conformes à AOT à l’aide de @angular/platform-server paquets de nœuds.
Vous pouvez installer Angular sur votre système à l’aide de la ligne de commande et de la commande suivante. Si vous avez déjà installé Angular, passez à l’étape suivante :
npm install -g @angular/cli
Si vous êtes un utilisateur Mac, utilisez sodu comme préfixe dans la commande.
Après l’installation réussie d’Angular CLI, ouvrez le terminal et exécutez la commande suivante pour créer un nouveau projet. Vous pouvez donner n’importe quel nom au projet que vous aimez ; ici, nous le nommons : aotdemoapp:
ng new aotdemoapp
Avant d’aller plus loin, voyons comment Angular effectue la compilation sans AOT. Après la création réussie du projet, vous pouvez l’exécuter sans AOT en utilisant la commande ci-dessous :
ng serve
Après avoir entré cette commande, votre application devrait être en cours d’exécution. Ouvrez votre navigateur et pointez sur l’adresse Web : https://localhost:4200. Ensuite, ouvrez l’outil de développement de votre navigateur et accédez à la Réseau languette. Analysez attentivement les fichiers en cours de téléchargement et vérifiez également leur taille. La Réseau devrait ressembler à l’image suivante :
Capture d’écran illustrant la taille des fichiers de projet sans AOT
Dans la prochaine étape, nous exécuterons l’application Angular avec l’option AOT.
Pour activer le mode AOT dans la dernière version d’Angular, vous devez définir la valeur de pas propriété à vrai dans votre configuration de construction, spécifié dans le angulaire.json dossier. Après cela, exécutez le projet en utilisant le ng servir commande.
Cette fois, votre application Angular peut prendre un peu plus de temps à compiler. Cependant, si vous utilisez un ordinateur rapide et que la taille de l’application est relativement petite, la latence peut ne pas être perceptible. Au fur et à mesure que l’application grandit, cette latence peut devenir apparente, quelles que soient la configuration et les spécifications de votre ordinateur.
Notez que votre application fonctionne maintenant en mode AOT. appuyez sur la rafraîchir dans votre navigateur et rechargez à nouveau votre application. Observez les fichiers et les tailles de fichier dans le Réseau onglet de l’outil de débogage de votre navigateur :
Capture d’écran illustrant la taille des fichiers de projet avec AOT
Si vous comparez les deux captures d’écran, vous constaterez que la taille de l’application indiquée dans vendeur.js est presque la moitié de la taille en mode AOT. Et maintenant, parce que l’application est précompilée en AOT, le main.js le fichier est plus volumineux qu’il ne l’est sans le mode AOT. En outre, l’application s’exécute plus rapidement – presque deux fois plus vite.
Quand utiliser la compilation AOT dans Angular ?
AOT peut être utilisé à la fois pour les environnements de développement et de production. Cependant, il n’est pas recommandé d’utiliser le mode AOT pour exécuter des applications pendant la phase de développement. La raison de ne pas utiliser l’option AOT dans la phase de développement est qu’elle entraîne un retard dans le processus de regroupement pour générer des fichiers pour le rendu. De ce fait, le temps de rendu des pages Web augmente. Une fois la phase de développement presque terminée et tous les problèmes de validation liés à l’AOT résolus, alors AOT peut être utilisé efficacement dans l’environnement de développement.
Il est toujours recommandé d’utiliser AOT pour les versions de production. Angular CLI impose également des règles pour utiliser l’option AOT chaque fois que l’application s’exécute dans un environnement de production.
Réflexions finales sur la compilation Ahead of Time dans Angular
Actuellement, la compilation Ahead of Time est l’approche préférée pour la compilation et le déploiement de code. Si vous êtes un développeur Angular et que vous ne tirez pas parti des avantages d’AOT, vous ne devez pas ignorer ses avantages. Vous obtiendrez non seulement les avantages liés aux performances, mais cela contribuera également à rendre le code propre et sans faille. À partir de maintenant, son intégration dans Angular CLI rend difficile pour les développeurs Angular d’ignorer l’utilisation de l’approche AOT.
En savoir plus sur les tutoriels de développement Web angulaire.