Compilation en angulaire

Voyons d'abord les moyens de compiler une application Angular, puis plongeons-nous dans les types de modes de compilation dans Angular.

Une application angulaire peut être compilée à l'aide des deux commandes suivantes dans Angular CLI.

1. ng-servir
2. ng-build

1. Les deux commandes compilent l'application et produisent une version de développement par défaut. Dans la version de développement, les fichiers compilés n'ont aucune optimisation effectuée par Angular.
2. Les deux font le regroupement de tous les fichiers présents dans l'application. Le regroupement est le processus de combinaison de tous les fichiers en un seul fichier. C'est l'un des processus d'optimisation effectué par Angular. Dans ce processus, il produit 5 types de fichiers JavaScript groupés avec leurs fichiers de carte source par défaut. Ces fichiers seront incorporés dans le fichier index.html qui est chargé par le navigateur.

2) polyfills.bundle.js - Contient les scripts afin de rendre l'application compatible avec différents navigateurs.

3) main.bundle.js - Contient du code présent dans tous les fichiers d'application.

4) styles.bundle.js - Contient les styles utilisés par l'application.

5) vendor.bundle.js - Contient toutes les bibliothèques Angular + tierces.

3. Les deux produisent une version de développement par défaut.

Différences:

1. ng-serve: compile et exécute l'application à partir de la mémoire et, par conséquent, elle n'est utilisée que pendant le processus de développement. Il n'écrit les fichiers de construction dans aucun dossier. Par conséquent, ce processus ne peut pas être utilisé pour déployer sur un autre serveur.
2. ng-build: compile l'application et produit les fichiers de construction dans un dossier externe. Le nom du dossier de sortie est déterminé par la valeur de la propriété outputPath présente dans la section 'build' du fichier 'angular.json'. En conséquence, ce dossier de sortie généré à la fin peut être utilisé pour se déployer sur n'importe quel serveur externe.

1. Compilation JIT (juste à temps)

2. Compilation AOT (Ahead of Time)

Jusqu'à Angular 8, la compilation JIT est la compilation par défaut. Depuis Angular 9, AOT Compilation est le mode de compilation par défaut. Lorsque la commande ng-serve ou ng-build s'exécute, le type de compilation dépend de la valeur 'aot' présente dans les sections respectives du fichier 'angular.json'.

La compilation AOT peut également être effectuée à l'aide de Angular cli en définissant l'indicateur 'aot' sur true dans Angular CLI

1.ng servir - aot = vrai

2.ng build - aot = true

1. Compilation JIT:

Comme son nom l'indique, la compilation se fait pendant l'exécution de l'application. Le navigateur télécharge le compilateur avec les fichiers d'application. Le compilateur représente environ 45% de la taille du fichier vendor.bundle.js chargé dans le navigateur.

Désavantages:

1. L'utilisateur doit attendre que le compilateur se charge d'abord dans le navigateur, puis l'application se charge. Par conséquent, le temps d'attente est augmenté.

2. La taille de l'application est augmentée en raison de la présence d'un compilateur qui affectera les performances globales de l'application pendant l'exécution.

3. Dans ce cas, les erreurs de liaison de modèle n'ont pas été détectées, c'est-à-dire que le compilateur ne renvoie aucune erreur pendant le processus de construction.

2. Compilation AOT:

Dans ce processus, la compilation est effectuée pendant le processus de construction et les fichiers compilés qui ont été regroupés, téléchargés par le navigateur. Comme la compilation est déjà terminée, le fichier vendor.bundle.js ne contient pas de code de compilateur et, par conséquent, sa taille diminue de près de 50%.

Avantages:

• Rendu plus rapide de l'application avec AOT car le navigateur télécharge uniquement la 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 au préalable.
• Plus petite taille de téléchargement de l'application. 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.
• Dans ce cas, des erreurs de liaison de modèle ont été détectées lors du processus de génération de l'application. Par conséquent, des erreurs de modèle ont été identifiées plus tôt.

npm installer source-map-explorer - save-dev

Une fois l'outil installé, effectuez la construction de développement à l'aide de la commande ng build. Une fois la construction terminée, exécutez la commande suivante.

node_modules \ .bin \ source-map-explorer dist \ vendor.bundle.js

La commande ci-dessus exécute l'explorateur de carte source sur le bundle du fournisseur et nous en voyons le graphique dans le navigateur. Notez que le compilateur angulaire représente environ 45% de la taille du bundle.

Maintenant, exécutez la commande ci-dessus après avoir exécuté la commande de compilation AOT dans Angular CLI. On observe que la taille globale du fichier vendor.bundle.js a été réduite de moitié.

Par conséquent, la compilation AOT est très recommandée lors du déploiement de l'application dans un serveur de production.

Merci beaucoup de m'avoir lu et merci pour votre temps :)