Introduction

Outre la qualité de l’interface et de l’expérience utilisateur d’une application, on ne peut pas ignorer une compilation efficace et un diagnostic des performances techniques. Un package trop lourd mettra du temps à charger, obligeant l’utilisateur à patienter. À l’inverse, une application optimisée répartira intelligemment les chargements pour offrir une expérience plus fluide.

Dans ce chapitre, nous allons d’abord voir comment configurer la compilation, analyser notre package et les différentes pratiques pour garder une application optimisée. Puis, dans un second temps, nous observerons des outils pour diagnostiquer l’application dans sa globalité.

Vocabulaire

De nombreux termes techniques sont utilisés pour décrire les différentes étapes, optimisations et outils du processus. Comprendre ce vocabulaire est essentiel pour maîtriser la construction d’une application performante et adaptée aux besoins des utilisateurs.

Voici une liste de quelques termes des plus courants accompagnés d’une explication simple :

Source map : une source-map est un fichier qui relie le code optimisé, généré lors de la build au code source original. C’est utilisé lors de phases de débogage.
Tree shaking : c’est une technique qui consiste à...

La compilation

Le processus de compilation permet de transformer le code source en un ensemble de fichiers optimisés, prêts à être déployés dans un environnement de production.

Depuis ses versions récentes, Angular s’appuie sur esbuild, un outil d’empaquetage (bundler) rapide et efficace. Ce dernier est conçu pour maximiser les performances des builds grâce à des fonctionnalités comme la minification, le tree-shaking et le bundling.

Par défaut, Angular configure automatiquement esbuild pour produire des bundles optimisés, tout en permettant des ajustements pour répondre aux exigences spécifiques de chaque projet. Plus globalement, Angular supporte officiellement plusieurs outils, comme esbuild, vite ou webpack, sans avoir à créer de configuration spécifique pour chacun de ces outils. On passera par le standard proposé dans le fichier angular.json et Angular se charge du reste.

Nous allons commencer par la création d’environnements dans notre application.

1. Fichiers d’environnement

Il est fréquent de devoir adapter certains comportements ou configurations en fonction des environnements ciblés : développement, test, préproduction, production, etc.

Angular intègre un système de configuration d’environnements. Pour amorcer la configuration, vous pouvez exécuter la commande :

ng generate environments...

Analyser les artéfacts

La simple utilisation de la commande build vous offre une information sur les fichiers générés. Nous avions vu cela lors de la création d’un élément configuré avec lazy-loading ; la ligne de commande affichera les différents fichiers avec leur type et leur taille :

Cela donne déjà un premier aperçu du poids de notre application. La commande peut également être étendue en utilisant le paramètre --stats-json afin de sortir un premier rapport des entrées et sortie de la compilation. Ces informations sont un peu difficiles à interpréter humainement mais assez complètes.

On pourra aussi utiliser des outils pour aller encore plus loin, comme source-map-explorer qui créera un rapport en HTML où l’on peut parcourir les différentes ressources, leur provenance et leur poids dans l’application.

Pour utiliser cet outil, on peut commencer par compiler l’application en production, tout en incluant les source maps, puis appeler l’outil avec npx :

ng build --configuration=production --source-map 
npx source-map-explorer ./dist/my-project-name/**/*.js

Cela permet d’obtenir un résultat tel que :

Il est possible de naviguer à travers le fichier via la sélection en haut à gauche, puis d’entrer dans des sections...

Optimisations de l’application

1. Actions à prendre

Analyser un package Angular est une étape essentielle lorsque l’on souhaite maîtriser les performances. Pour garder une application légère, il y a plusieurs actions à prendre :

Corriger les imports afin de laisser la compilation nettoyer les sources. Utiliser un import global alors que l’on n’utilise pas toutes les propriétés d’un module va interférer avec le tree-shaking. Par exemple :

// bad 
import * as module from 'module'; 
 
// better 
import {a, b, c} from 'module';

Vérifier que les différentes librairies externes sont compatibles avec le tree-shaking.
Créer plus de chunks avec le lazy-loading, diviser son application en modules chargés dynamiquement améliorera le chargement initial.
Optimiser les différents assets en compressant les images et vidéos, puis en utilisant des formats optimisés, APNG (Animated Portable Network Graphics), WebM (Web Multimedia), etc. De même pour les polices d’écriture, on va éviter d’inclure des librairies entières avec tous les glyphes et variantes possibles.

2. Un dernier mot sur la détection de changements

a. Rappel

Dans le chapitre Les composants, sous-section Détection de changements, nous avions mentionné...

Personnalisations

1. Organiser ses imports

Pour simplifier la gestion des imports et les rendre plus clairs dans le projet, Angular permet de configurer des alias de chemins dans le fichier tsconfig.json. Une bonne pratique est d’avoir un alias pour chaque domaine métier, puis vous pouvez en rajouter si certaines sections sont beaucoup plus utilisées que d’autres. Attention à ne pas en abuser, car cela aura pour effet de complexifier les imports au lieu de les rendre plus clairs.

Exemple :

{ 
  "compileOnSave": false, 
  "compilerOptions": { 
   ... 
    "baseUrl": "./src", 
    "paths": { 
      "@layout/*": ["app/layout/*"], 
      "@products/*": ["app/products/*"], 
      "@shared/*": ["app/shared/*"], 
      "@env/*": ["environments/*"] 
    } 
  }, 
  ... 
}

Cela nous permet donc de réécrire les imports dans notre code, de cette façon :

// before 
import { environment } from '../../../environments/environment'; 
import { CardComponent } from '../layout/ui/card.component'; 
 
// after 
import { environment } from '@env/environment'; 
import { CardComponent } from '@layout/ui/card.component';

Dans chaque projet, on peut rencontrer des conventions différentes concernant les imports, mais certaines pratiques se distinguent...

L’outil d’analyse lors de l’exécution

Angular DevTools est une extension de navigateur qui offre des fonctionnalités avancées de débogage et de profilage. Disponible pour Chrome et Firefox, elle s’intègre aux outils de développement du navigateur, ajoutant des onglets spécifiques pour analyser la structure des composants, inspecter les injecteurs et évaluer les performances de votre application.

La documentation officielle, ainsi que les liens de téléchargements se trouvent ici : https://angular.dev/tools/devtools.

Une fois l’extension installée, ouvrez les outils de développement de votre navigateur (généralement [F12]). Vous y trouverez un onglet nommé "Angular".

1. Explorateur de composants

Dans un premier temps, on y trouve une arborescence des composants présents sur la page, ainsi que les différentes directives. En sélectionnant un composant, on voit le détail de ses propriétés publiques comme privées, et on peut accéder au code source ou même modifier les propriétés qui ne sont pas en lecture seule. Les références de composants sont aussi accessibles directement dans la console en tapant $ng0, par exemple.

2. Profilage des performances

Grâce à l’onglet de profilage d’Angular DevTools, vous pouvez activer...

Déploiement

Le déploiement d’une application Angular peut être réalisé de manière automatisée ou manuelle, selon les besoins et l’infrastructure disponible.

Pour une approche automatisée, Angular CLI propose la commande ng deploy, qui exécute le déploiement en utilisant un constructeur (builder) spécifique associé au projet. Plusieurs builders tiers permettent de déployer vers différentes plateformes, telles que Firebase, Vercel, Netlify, GitHub Pages ou Amazon S3. L’ajout de ces builders se fait via la commande ng add suivie du nom du builder. Par exemple, pour GitHub Pages : ng_add angularcli-ghpages, ce qui va télécharger le package et mettre à jour la configuration du projet pour intégrer les capacités de déploiement.

Si aucun builder n’est installé au préalable, l’utilisation de la commande de déploiement proposera d’en installer un, avec la possibilité de choisir parmi plusieurs plateformes d’hébergement reconnues.

Si l’on préfère une méthode manuelle, il est possible de créer une version de production de l’application avec ng build, puis de copier le répertoire de sortie (dist/nom-de-l’application) vers votre serveur.

Enfin, la documentation officielle rappelle qu’il est essentiel...

Projet fil rouge

Les principales modifications apportées incluent l’intégration de ESLint et Prettier, ce qui entraînera des changements significatifs dans le formatage du code à travers toute l’application. Par ailleurs, des variables d’environnement ont également été ajoutées pour mieux gérer les configurations spécifiques.

Vient maintenant la question MirageJS : nous voulons évidemment l’exclure de la build de production. Pour ce faire, il est possible d’ordonner à la compilation de remplacer certains fichiers ; ici nous allons remplacer la configuration de MirageJS par un substitut vide d’implémentation grâce à la configuration suivante (très rapidement mentionnée en fin de la sous-section Fichiers d’environnement ce chapitre) :

"fileReplacements": [ 
  { 
    "replace": "src/server.ts", 
    "with": "src/server.production.ts" 
  } 
],

Le contenu de server.production.ts pourrait éventuellement ressembler à cela : export default function initServer() {}. Le but est simplement d’avoir un module ECMAScript valide pour pouvoir compiler.

Maintenant, nous sommes certains que MirageJS ne sera pas exécuté en production ;...

Conclusion

Cette fois nous avons vu différentes étapes et divers outils pour optimiser, structurer et préparer une application Angular dans le cadre d’un déploiement en production. Nous avons commencé par comprendre le processus de compilation, en configurant les fichiers d’environnement pour gérer les différentes configurations selon les contextes (développement, test ou production). Ensuite, nous avons analysé les artéfacts produits par la compilation, afin d’identifier les optimisations possibles pour améliorer les performances, comme la réduction de la taille des bundles ou l’ajustement des stratégies de détection de changements. Nous avons également mis en lumière les avantages apportés par les signaux Angular, qui simplifient et améliorent la gestion des changements d’état dans les applications modernes.

Au-delà de la compilation, nous avons abordé des outils indispensables pour garantir un code lisible et bien structuré. Grâce à ESLint, nous avons appris à organiser notre code et à détecter les éventuelles erreurs de style ou de structure. Avec Prettier, nous avons formaté automatiquement le code pour assurer une uniformité dans l’équipe, tout en simplifiant le processus de revue. Nous avons également découvert...

Compilation et performances