Angular Cli build et serveur --aot vs --prod
Je suis en train de convertir un Angular2 app à l'aide de commonjs pour JiT et l'ancienne méthode de configuration manuelle de aot (deux fichiers index.html, deux fichiers main.ts, etc.) en angular4 modèle (ng new appName).
Il semble que beaucoup de choses ont changé autour de la Cli entre les 2/4. J'ai regardé des vidéos youtube, créé une nouvelle application avec le ng cli et je constate que ng build et ng serve prennent en charge les drapeaux --prod et --aot, mais que les paquets Web générés sont de taille différente lorsque vous utilisez les deux drapeaux différents.
Quelle est la différence entre
ng build --prod
et
ng build --aot
et ensuite pour servir:
ng serve --prod
et
ng serve --aot
il semble que les bundles de prod soient plus petits que les autres, mais pourquoi?
from Taille du paquet de “ng build --prod” plus petite que “build --prod --aot
Si vous utilisez certaines bibliothèques qui ne prennent pas en charge AoT (et publiez des ensembles UMD), cela peut arriver. La raison en est que nous ne pouvons pas optimiser les composants uniquement en JavaScript. Ce n'est pas quelque chose que nous pouvons régler de notre côté, malheureusement.
Ces bibliothèques doivent exposer les modules ES2015 avec leurs décorateurs supprimés et leurs composants/modules déjà compilés au format AoT. Nous travaillons sur des directives pour que les bibliothèques prennent en charge la compilation JIT et AoT.
De plus, avec certains modèles, la taille de l'AoT peut parfois être supérieure à celle du JIT. Les versions gzippées devraient être l'inverse, car la plupart du contenu AoT est constitué des mêmes instructions répétées à maintes reprises.
Bien que le paquet soit plus volumineux, le temps de démarrage devrait être considérablement plus rapide.
--prod- appliquez uglify et minify pour réduire le bundle et utilisez angular en mode production, ce qui réduit les avertissements d'exécution fournis par le compilateur angulaire et améliore les performances.
--aot- généralement lorsque nous servons un projet angulaire, tous les fichiers angulaires sont téléchargés sur le navigateur. Ce dernier compilera et exécutera l'application sur le navigateur mais, dans aot, l'ensemble de l'application livrée au navigateur sera précompilé, ce qui améliorera les performances.
build- regroupera les fichiers et les placera dans le dossier dist afin que nous puissions les utiliser pour le déploiement sur des serveurs.
serve- exécutera l'application sur un serveur léger.
--prod active AOT, vous n'avez pas besoin de passer les deux options. Voir cette section de la documentation: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds
ng build –prod OR ng build
L'utilisation de l'indicateur --prod permet à Angular de faire une compilation anticipée (AOT).
AOT Compilation en avance sur le temps
Le compilateur Angular Ahead-of-Time (AOT) convertit votre code HTML et TypeScript Angular en code JavaScript efficace au cours de la phase de construction précédant le téléchargement et l'exécution de ce code par le navigateur.
Avantages de AOT:
1- Met en évidence l'erreur de compilation, l'erreur d'exécution et l'exception avant de s'exécuter sur le navigateur, d'où le nom Ahead (Ahead Of Time).
2- Si vous utilisez ng build dans vos projets pour construire votre application si vous remarquez la taille du fichier vendor.bundle.js et des fichiers vendor.bundle.js.map dans votre répertoire de construction, ce sera dans MBS qui sont téléchargés sur les navigateurs et rendent notre application trop chargée.
Par contre, si vous utilisez le drapeau ng build –prod, vous remarquerez une diminution excessive de ce nombre à 200 KBS, ce qui signifie une taille égale ou supérieure à 100 fois.
Par conséquent, je vous recommande d'utiliser l'AOT dans la construction de l'application Angular à l'aide de l'indicateur --prod.
Et si vous souhaitez approfondir la lecture de ce sujet, consultez le site suivant: https://angular.io/guide/aot-compiler