Retour au cours

Build pour la production : Compilation AOT et Bundling

Le Développeur Angular Complet : de Zéro à Héros

79. Build pour la production : Compilation AOT et Bundling

Lors du déploiement, vous devez optimiser l'application pour la vitesse et la taille. La commande ng build --configuration=production gère cela.

1. Compilation Ahead-of-Time (AOT)

Par défaut, le build de production active l'AOT.

  • JIT (Just-in-Time, Développement) : Compile l'application dans le navigateur à l'exécution. Rapide pour le développement, plus lent pour l'utilisateur.
  • AOT (Ahead-of-Time, Production) : Le compilateur Angular s'exécute pendant le build, transformant les templates et le code en JavaScript efficace avant le déploiement.

Avantages de l'AOT :

  • Rendu plus rapide : Le navigateur télécharge du JS directement exécutable.
  • Taille réduite : Inutile d'inclure le compilateur Angular (volumineux) dans le bundle.
  • Détection d'erreurs précoce : Les erreurs de template sont capturées au build.

2. Bundling et Tree-Shaking

  1. Bundling : Combinaison de nombreux fichiers en quelques gros bundles pour réduire les requêtes HTTP.
  2. Tree-Shaking : Suppression du code inutilisé (élimination du "code mort"). Si vous n'utilisez qu'une fraction d'une bibliothèque, le reste est jeté lors du build.

3. Configuration dans angular.json

Le flag --configuration=production applique des paramètres d'optimisation définis dans angular.json (hashing des noms de fichiers, minification, etc.), résultant en un package prêt pour le déploiement.