Un des reproches faits à Angular est souvent la lourdeur du projet et la consommation en ressources une fois déployé. Dans cet article, découvrez comment Angular a adressé ces problèmes en vous permettant de générer un build de quelques ko, ultra performant.

Introduction

Pour build votre application Angular, utilisez la commande ng build de la CLI à partir du répertoire du projet.

La commande ng build construit l'exécutable de votre projet Angular et le place dans le dossier dist.

Ng build prend plusieurs options, vous verrez les plus importantes dans cet article.

Build de production

Par défault ng build utilise la configuration de production qui applique certaines optimisations telles que :

• Grouper les fichiers en bundles JS
• Minimiser les espaces blancs excédentaires
• Supprimer les commentaires et le code mort
• Réécrire le code pour utiliser des noms courts et mutilés (minification)

C'est déjà une grosse partie du travail d'optimisation faite pour vous !

Pour sélectionner une autre configuration transmettez son nom à l'option --configuration comme ceci :

ng build --configuration=dev

Votre application sera configurée pour pointer vers la configuration de développement, qui est définie dans le fichier angular.json.

Compilation anticipée (AOT)

Par défaut la compilation se fait Ahead-of-time (AOT). C'est le mode de compilation par défaut depuis la version 9 d'Angular.

Les avantages de l'AOT :

• Rendu plus rapide du code car la compilation est effectuée au moment de la construction et non dans le navigateur au moment de l'exécution
• Taille d'application Angular plus petite car le compilateur Angular n'est pas livré avec le code
• Meilleure qualité de code car les erreurs d'analyse de modèle sont détectées tôt lors de la construction
• Sécurisé et robuste puisque les modèles ne sont pas évalués dynamiquement dans le navigateur

Le seul inconvénient est que votre pipeline CI/CD peut prendre un peu plus de temps.

Si défini à false ng build --aot=false alors le mode de compilation passera à JIT (Just In Time).

Mais sachez que la compilation JIT, bien que plus souple, peut vous coûter très cher en rapidité d'exécution.

BuildOptimizer

Vous pouvez d'avantage optimiser votre application pour la production avec l'option --buildOptimizer.

Cela supprime les décorateurs Angular, les paramètres de constructeur et de facilite le travail du minifieur de code.

Analyse des sorties de builds

Voici la comparaison d'un build optimisé et non optimisé :

Comme vous pouvez le voir, les polyfills encadreé en rouge sans optimisation affichent 797Ko alors qu'avec l'optimisation de build seulement 165Ko.

Identique pour les feuilles de style encadré en orange, sans optimisation de build on atteint 2.5Mo tandis qu'avec l'optimisation seulement 171Ko !

Conclusion

L'optimisation de votre application est importante pour l'expérience utilisateur mais aussi pour la sécurité et la qualité de l'application. Il faut aussi souligner que les builds optimisés prennent plus de temps à construire.

J'espère que cet article vous sera utile, n'hésitez pas à laisser un commentaire !