AngularJS Lazy Loading avec ocLazyLoad et UI Router
Lazy Loading est de plus en plus populaire chaque jour. Avec des librairies externes, nous pouvons l’utiliser pour des frameworks plus vieux comme AngularJS. Nous avons besoin d’ocLazyLoad ? — ? Il marche très bien avec la bibliothèque UI Router.
Prérequis
Avant de nous lancer dans le code avec l’utilisation de Lazy Loading, examinons quelques-unes des idées de base.
Lazy Loading
Le Lazy Loading est une technique qui nous permet de différer le chargement des ressources inutiles. Pour les scripts, l’une des techniques les plus populaires consiste à diviser les fichiers par route. Par exemple, la route pour la page de connexion ne charge que les scripts nécessaires à la connexion, la route des articles charge uniquement les scripts nécessaires pour les articles, etc. Les scripts de Lazy Loading accélèrent les applications du point de vue de l’utilisateur — le javascript doit être chargé, analysé et compilé. En tant qu’utilisateur, je préfère attendre pour chaque page quelques centaines de millisecondes que attendent plus d’une dizaine de secondes pour voir la page de connexion.
ocLazyLoad
ocLazyLoad est une bibliothèque simple qui permet de charger des scripts de manière asynchrone.
Implementation
Attendez une minute, devrais-je même m’en soucier? AngularJS est mort.
D’une part, vous avez raison. AngularJS a commencé le support de longue date et sera finalement fermé.
D’autre part, AngularJS est utilisé dans de nombreux projets. Une quantité énorme d’entre eux ne sera pas réécrite dans un nouveau framework. Lazy Loading donnera une seconde jeunesse à ces projets, les rendant beaucoup plus rapides et donc plus compétitifs.
Le problème est particulièrement visible sur les appareils mobiles.
Point de départ
Dans le commit 6e79edb0d79c87e4ef5617d97b12c5fd05e103e2, vous pouvez trouver un fichier d’index écrit dans le bon sens, sans chargement différé:
À quoi ressemble le chargement de ce fichier? Vérifions les outils de développement de Chrome:
C’est une application très simple avec seulement 2 vues, mais il faut 21 demandes pour transférer 668 Ko. Il est facile d’imaginer à quoi cela ressemble dans les grands projets. Des centaines de requêtes pour charger plusieurs mégaoctets de données. Bien sûr, le code de production sera réduit à un ou quelques fichiers, mais toutes les ressources devront être chargées au démarrage. Il est inutile de tout télécharger au début lorsque l’utilisateur n’a besoin que d’une partie des ressources. Comment changer ça?
Lazy loading avec ocLazyLoad
Tout d’abord, nous devons ajouter ocLazyLoad dans package.json:
Ensuite, dans notre cas, ajoutez-le à index.html. Comment l’utiliser avec UI Router? Nous devons ajouter des fichiers de configuration pour les modules (voir le bas de la page):
Par souci de simplicité, je mets 2 fichiers de configuration dans un seul fichier. Bien sûr, les fichiers peuvent être chargés explicitement mais je peux vous encourager à utiliser des fichiers de configuration — cela rend le chargement plus lisible et séparé des autres codes.
Les modules sont maintenant prêts à être chargés. Dans notre cas, le chargement se produit dans route config avec le service $ocLazyLoad:
Où Modules Days et DaysDetails sont chargés. Comment ça marche maintenant? Lorsque la page de démarrage est chargée, le chargement du module Days a été initié par ocLazyLoad:
Et quand on clique sur Aller au bouton Détails:
Nous pouvons voir que les dépendances de DaysDetails sont chargées:
Bien sûr, les fichiers des modules ne sont pas nécessaires dans index.html:
Ce qui le rend beaucoup plus petit.
Conclusion
Il est facile d’imaginer à quel point lazy loading peut améliorer l’expérience des utilisateurs dans les grands projets. Au lieu de tout charger en même temps, même si des fichiers minifiés peuvent peser des mégaoctets, cela nous permet de charger des fichiers uniquement lorsque cela est nécessaire. Il fonctionne également très bien avec la mise en cache agressive: vous n’avez pas besoin de tout débloquer lorsque vous déployez une nouvelle version, mais uniquement des fichiers modifiés. Je suis heureux que lazy loading puisse être facilement appliqué même avec un ancien framework comme AngularJS.
Crédit : AngularJS Lazy Loading with ocLazyLoad and UI Router de Radek Anuszewski
