Utilisez React.lazy en toute confiance : Un moyen sûr de charger des composants lors d'une itération rapide

Le dilemme#

De nos jours, le développement logiciel avance plus rapidement sous l'influence de la philosophie populaire "bouger vite et casser les choses". Aucun jugement ici - c'est juste ainsi que les choses se passent. Cependant, ce rythme rapide peut parfois causer des problèmes, notamment lors du chargement des composants dans React.

Si vous travaillez sur un projet qui utilise React.lazy pour charger des composants à la demande, vous avez peut-être rencontré des problèmes comme ChunkLoadError et Loading chunk failed. Voici quelques raisons possibles :

• Il y a un problème de réseau, par exemple, la connexion Internet de l'utilisateur est lente ou instable.
• L'utilisateur utilise une version obsolète de l'application, et le navigateur essaie de charger un fragment qui n'existe plus.

Habituellement, un simple rafraîchissement de la page peut résoudre le problème, mais ce n'est pas une excellente expérience pour l'utilisateur. Imaginez si un écran blanc apparaît lorsque l'utilisateur navigue vers une autre route - ce n'est pas bon pour l'image de votre application.

Peut-on équilibrer le besoin de vitesse avec celui d'une expérience utilisateur fluide ? Bien sûr. Laissez-moi vous montrer comment (avec TypeScript, bien évidemment).

La solution#

Une solution basique pourrait consister à sauvegarder toutes les versions des fragments sur le serveur, éliminant ainsi le problème de fragment "manquant". À mesure que votre application se développe, cette solution pourrait devenir irréalisable en raison de l'augmentation des besoins en espace disque, et elle ne résout toujours pas le problème de réseau.

Étant donné qu'un redémarrage ou un rafraîchissement peut résoudre le problème, nous pouvons implémenter ces solutions dans notre code. Comme le problème survient généralement lorsque l'utilisateur navigue vers une autre route, nous pouvons le résoudre sans même que l'utilisateur ne s'en aperçoive. Il suffit de créer un wrapper autour de la fonction React.lazy qui gérera les réessais et les rafraîchissements.

Il existe déjà de nombreux articles intéressants expliquant comment mettre en œuvre ce genre de solution, je vais donc me concentrer sur l'idée et le fonctionnement interne de la solution.

Créer le wrapper#

La première étape consiste à créer un wrapper autour de la fonction React.lazy :

Gérer les réessais#

Pour les problèmes de réseau, nous pouvons gérer les réessais en enveloppant la importFunction dans une fonction tryImport :

Cela semble simple, non ? Vous pouvez également implémenter l'algorithme de retour exponentiel pour gérer les réessais plus efficacement.

Gérer les rafraîchissements#

Pour le problème de version obsolète, nous pouvons gérer les rafraîchissements en capturant l'erreur et en rafraîchissant la page :

Cependant, cette implémentation est très dangereuse, car elle peut provoquer une boucle infinie de rafraîchissements lorsque l'erreur ne peut pas être résolue par un rafraîchissement. Pendant ce temps, l'état de l'application sera perdu au cours du rafraîchissement. Nous avons donc besoin de l'aide de sessionStorage pour stocker un message indiquant que nous avons tenté de rafraîchir la page :

Maintenant, lorsque nous capturons l'erreur de la fonction safeLazy, nous savons qu'il s'agit de quelque chose qui ne peut pas être résolu par un rafraîchissement.

Plusieurs composants lazy sur la même page#

Il reste encore un piège caché avec l'implémentation actuelle. Si vous avez plusieurs composants lazy sur la même page, une boucle infinie de rafraîchissements peut encore se produire car d'autres composants peuvent réinitialiser la valeur du sessionStorage. Pour résoudre ce problème, nous pouvons utiliser une clé unique pour chaque composant :

Maintenant, chaque composant aura sa propre clé de sessionStorage, et la boucle infinie de rafraîchissements sera évitée. Nous pouvons continuer à perfectionner la solution, par exemple :

• Rassembler toutes les clés dans un tableau, ainsi une seule clé de stockage est nécessaire.
• Définir une limite de rafraîchissement pour rafraîchir la page plus d'une fois avant de jeter une erreur.

Mais je pense que vous comprenez l'idée. Une solution TypeScript complète avec des tests et des configurations est disponible dans le répertoire GitHub. J'ai également publié le package react-safe-lazy sur NPM, vous pouvez donc l'utiliser dans votre projet dès maintenant.

Conclusion#

Le développement logiciel est un travail délicat, et même les moindres détails peuvent nécessiter des efforts pour être résolus. J'espère que cet article vous aidera à gérer gracieusement les problèmes avec React.lazy et à améliorer l'expérience utilisateur de votre application.