Le lazy loading, ou chargement différé, est une technique qui consiste à ne charger que les composants strictement nécessaires à un instant donné. Plutôt que de tout embarquer au démarrage, l’application charge chaque ressource à la demande, réduisant ainsi le volume de données transférées et la sollicitation inutile du réseau.

Avec la montée en puissance des applications web, les enjeux d’impact environnemental et de sobriété numérique deviennent centraux. Dans ce contexte, le framework Angular, notamment dans sa version 21, propose des mécanismes avancés comme le lazy loading des composants, permettant de ne charger que les éléments strictement nécessaires à un instant donné. 

Au-delà de l’optimisation technique, cette approche s’inscrit pleinement dans une démarche de numérique responsable et d’éco-conception. Réduire le volume de données transférées, limiter le temps de chargement et optimiser l’utilisation des ressources côté client contribuent directement à diminuer l’empreinte carbone des applications. 

Cet article explore comment le lazy loading des composants dans Angular 21 peut devenir un levier concret pour concevoir des applications plus respectueuses de l’environnement. Avec un bref rappel sur l’approche historique basée sur les modules. 

Le Lazy loading des composants

Le terme « lazy loading » est composé de lazy, que l’on peut traduire par « paresseux », et de loading, qui signifie « chargement ». On obtient donc littéralement l’expression « chargement paresseux ». 

Cependant, cette traduction reste assez abstraite. Concrètement, à quoi s’applique ce principe ? 

Par défaut, une application Angular charge tout au démarrage (eager loading). Mais lorsque les applications Angular grandissent, elles deviennent rapidement lourdes. Ce qui implique un temps de chargement initial plus long et une expérience utilisateur dégradée. 

Le lazy loading vient répondre à ce problème en différant le chargement de certaines pages de l’application. Concrètement : 

• Au démarrage : chargement du strict nécessaire 

• À la navigation : chargement du composant correspondant 

👉 En résumé, le lazy loading est donc une technique qui consiste à charger une ressource uniquement lorsqu’elle est jugée nécessaire, généralement lors d’une navigation ou d’une interaction utilisateur, plutôt que de la charger dès le démarrage de l’application. Avec l’arrivée des composants standalone, Angular permet de charger directement un composant, sans passer par un module. Cela introduit un niveau de granularité plus fin où on ne charge plus un bloc entier mais uniquement la page ou le composant nécessaire. 

Dans l’exemple suivant, l’application est composée de quatre pages : 

• Home : la page d’accueil, affichée par défaut au lancement de l’application. 

• Products : la page centrale de l’application, permettant de consulter la liste des produits, d’accéder au détail de chacun et de les ajouter au panier. Elle sera la plus fréquemment visitée. 

• Customers : la page listant l’ensemble des clients, mais dont l’accès reste peu fréquent. 

• Admin : une page réservée aux administrateurs, dédiée à la gestion des produits et des clients. 

👉 Les composants en lazy loading sont particulièrement adaptés aux pages simples, aux écrans secondaires peu fréquentés, aux fonctionnalités optionnelles ou aux interfaces conditionnelles (par exemple en fonction du rôle ou du contexte utilisateur). 

Mais quel rapport avec la démarche d’écoconception ?

Le lazy loading s’inscrit directement dans les principes du numérique responsable en agissant sur plusieurs leviers concrets liés à l’usage réel des applications : 

• Réduction des chargements inutiles :

Dans une application classique, une grande partie du code peut être chargée dès le départ, même si certaines fonctionnalités ne seront jamais utilisées par l’utilisateur.  Le lazy loading des composants permet de ne charger que les éléments réellement nécessaires à un instant donné. Cela évite de mobiliser inutilement des ressources (CPU, mémoire, réseau) pour des fonctionnalités non sollicitées. 

• Diminution des données transférées :

Chaque ressource chargée (JavaScript, templates, dépendances) représente un volume de données à transférer. En limitant le chargement aux seuls composants utiles : 

• • La quantité totale de données échangées est réduite  
  • Les requêtes réseau inutiles sont limitées 
  • La consommation énergétique liée au transfert de données peut être indirectement diminuée 

👉 C’est un point particulièrement important dans des contextes contraints comme les réseaux mobiles ou dans les zones à faible connectivité. 

• Adaptation aux parcours utilisateurs :

Tous les utilisateurs n’ont pas les mêmes besoins ni les mêmes parcours. Le lazy loading permet d’adapter dynamiquement le chargement de l’application parce que :

• • Un utilisateur standard ne chargera jamais un module “admin”,  
  • Certaines pages ne seront ouvertes qu’occasionnellement,  
  • Des fonctionnalités secondaires peuvent rester non chargées.  

👉 L’application devient ainsi plus “juste” dans ce qu’elle consomme, en s’alignant sur les usages réels. 

• Contribution à la sobriété numérique 

La sobriété numérique consiste à concevoir des services qui consomment moins de ressources tout au long de leur cycle de vie. En évitant le chargement systématique de l’ensemble de l’application, le lazy loading : 

• • Limite le gaspillage de ressources  

• • Encourage un découpage plus réfléchi des fonctionnalités  

• • Favorise une approche “à la demande” plutôt que “tout charger par défaut” 

👉 Le lazy loading devient ainsi un choix d’architecture cohérent avec une logique de sobriété numérique. 

Mise en œuvre dans Angular

Le lazy loading dans Angular repose principalement sur le routing, qui permet de charger dynamiquement les composants en fonction de la navigation.  

Depuis les versions récentes d’Angular, il est fortement recommandé de faire du lazy loading directement sur des composants standalone grâce à la propriété loadComponent dans la configuration des routing. 

Dans l’exemple suivant, la page d’administration, peu utilisée et inaccessible à la majorité des utilisateurs non-administrateurs est chargée à la demande grâce au lazy loading. Le composant AdminComponent n’est donc pas inclus dans le chargement initial de l’application. 

Ainsi, Angular crée un fichier séparé (un chunk) pour ce composant, qui n’est téléchargé que lorsque l’utilisateur accède à la route : /admin 

Cette page étant réservée aux administrateurs, un droit spécifique est requis pour y accéder : un adminGuard est donc mis en place afin de bloquer l’accès aux utilisateurs non autorisés.  

Mais pour utiliser le lazy loading via loadComponent, le composant doit être standalone. Cela signifie qu’il est bien autonome et gère directement ses dépendances grâce à la propriété imports, sans devoir passer par un module Angular. 

Il est toutefois important de noter que le lazy loading est ici combiné à un guard pour sécuriser l’accès à la page d’administration, mais il peut tout aussi bien être utilisé seul pour optimiser le chargement de pages sans contrainte d’accès.

Lazy loading des modules

Jusqu'à l'introduction des composants standalone (à partir d'Angular 15), le lazy loading dans Angular reposait principalement sur les modules. Cette approche a longtemps constitué le standard pour structurer et charger les différentes parties d'une application. 

Aujourd'hui, avec les versions récentes d'Angular (dont la version 21), il est fortement recommandé de privilégier le lazy loading des composants, plus simple et plus granulaire. Cependant, le lazy loading des modules reste entièrement supporté et peut toujours être utilisé, notamment dans le cadre des projets existants déjà structurés autour des modules via loadChildren. 

👉 Cette approche permet de conserver une organisation existante tout en évoluant progressivement vers les composants standalone. 

Conclusion

L’utilisation du lazy loading des composants marque une évolution dans la manière de structurer les applications avec Angular. En s’appuyant sur un chargement à la demande plus précis, cette approche permet de mieux adapter l’application aux parcours utilisateurs tout en limitant la mobilisation inutile de ressources. Et il s’intègre ainsi naturellement dans une logique de conception plus sobre, où chaque élément chargé répond à un besoin réel. 

Au-delà du lazy loading, d’autres leviers méritent également d’être explorés pour aller plus loin dans une démarche de numérique responsable, comme l’optimisation du rendu, la gestion des états ou encore les nouvelles fonctionnalités proposées par Angular, notamment autour des signaux (signals) et de l’évolution du système de détection des changements. 

Merci pour votre lecture ! 

FAQ