"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "le-dilemme", "hProperties": { "id": "le-dilemme" } }, "depth": 2, "value": "Le dilemme" }, { "data": { "id": "la-solution", "hProperties": { "id": "la-solution" } }, "depth": 2, "value": "La solution" }, { "data": { "id": "créer-le-wrapper", "hProperties": { "id": "créer-le-wrapper" } }, "depth": 3, "value": "Créer le wrapper" }, { "data": { "id": "gérer-les-réessais", "hProperties": { "id": "gérer-les-réessais" } }, "depth": 3, "value": "Gérer les réessais" }, { "data": { "id": "gérer-les-rafraîchissements", "hProperties": { "id": "gérer-les-rafraîchissements" } }, "depth": 3, "value": "Gérer les rafraîchissements" }, { "data": { "id": "plusieurs-composants-lazy-sur-la-même-page", "hProperties": { "id": "plusieurs-composants-lazy-sur-la-même-page" } }, "depth": 3, "value": "Plusieurs composants lazy sur la même page" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 3, "words": 981, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info} = _components; if (!Info) _missingMdxReference("Info", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "le-dilemme", children: ["Le dilemme", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#le-dilemme", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["Si vous travaillez sur un projet qui utilise ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " pour charger des composants à la demande, vous avez peut-être rencontré des problèmes comme ", _jsx(_components.code, { children: "ChunkLoadError" }), " et ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Voici quelques raisons possibles :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Il y a un problème de réseau, par exemple, la connexion Internet de l'utilisateur est lente ou instable." }), "\n", _jsx(_components.li, { children: "L'utilisateur utilise une version obsolète de l'application, et le navigateur essaie de charger un fragment qui n'existe plus." }), "\n"] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsx(_components.p, { children: "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)." }), "\n", _jsxs(_components.h2, { id: "la-solution", children: ["La solution", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-solution", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["É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 ", _jsx(_components.code, { children: "React.lazy" }), " qui gérera les réessais et les rafraîchissements."] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Le code final est disponible dans ce ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "répertoire GitHub" }), " et le package ", _jsx(_components.code, { children: "react-safe-lazy" }), " est\ndisponible sur ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". Le package est entièrement testé,\nextrêmement portable (minzipped ~700B), et prêt à être utilisé dans votre projet."] }) }), "\n", _jsxs(_components.h3, { id: "créer-le-wrapper", children: ["Créer le wrapper", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#créer-le-wrapper", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["La première étape consiste à créer un wrapper autour de la fonction ", _jsx(_components.code, { children: "React.lazy" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Utiliser un générique pour une inférence de type correcte\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "gérer-les-réessais", children: ["Gérer les réessais", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gérer-les-réessais", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Pour les problèmes de réseau, nous pouvons gérer les réessais en enveloppant la ", _jsx(_components.code, { children: "importFunction" }), " dans une fonction ", _jsx(_components.code, { children: "tryImport" }), " :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n let retries = 0;\n const tryImport = async () => {\n try {\n return await importFunction();\n } catch (error) {\n // Réessayer 3 fois maximum\n if (retries < 3) {\n retries++;\n return tryImport();\n }\n throw error;\n }\n };\n\n return lazy(async () => {\n return await tryImport();\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Cela semble simple, non ? Vous pouvez également implémenter l'algorithme de ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "retour exponentiel" }), " pour gérer les réessais plus efficacement."] }), "\n", _jsxs(_components.h3, { id: "gérer-les-rafraîchissements", children: ["Gérer les rafraîchissements", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gérer-les-rafraîchissements", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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 :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...fonction tryImport\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Retourner un composant factice pour correspondre au type de retour de React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "sessionStorage" }), " pour stocker un message indiquant que nous avons tenté de rafraîchir la page :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...fonction tryImport\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Supprimer le sessionStorage lorsque le composant est chargé avec succès\n sessionStorage.removeItem('refreshed');\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem('refreshed')) {\n sessionStorage.setItem('refreshed', 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Jeter l'erreur si le composant ne peut pas être chargé après un rafraîchissement\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Maintenant, lorsque nous capturons l'erreur de la fonction ", _jsx(_components.code, { children: "safeLazy" }), ", nous savons qu'il s'agit de quelque chose qui ne peut pas être résolu par un rafraîchissement."] }), "\n", _jsxs(_components.h3, { id: "plusieurs-composants-lazy-sur-la-même-page", children: ["Plusieurs composants lazy sur la même page", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#plusieurs-composants-lazy-sur-la-même-page", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "sessionStorage" }), ". Pour résoudre ce problème, nous pouvons utiliser une clé unique pour chaque composant :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...fonction tryImport\n\n // La clé peut être n'importe quoi d'unique pour chaque composant\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Supprimer le sessionStorage lorsque le composant est chargé avec succès\n sessionStorage.removeItem(storageKey);\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem(storageKey)) {\n sessionStorage.setItem(storageKey, 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Jeter l'erreur si le composant ne peut pas être chargé après un rafraîchissement\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Maintenant, chaque composant aura sa propre clé de ", _jsx(_components.code, { children: "sessionStorage" }), ", et la boucle infinie de rafraîchissements sera évitée. Nous pouvons continuer à perfectionner la solution, par exemple :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Rassembler toutes les clés dans un tableau, ainsi une seule clé de stockage est nécessaire." }), "\n", _jsx(_components.li, { children: "Définir une limite de rafraîchissement pour rafraîchir la page plus d'une fois avant de jeter une erreur." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Mais je pense que vous comprenez l'idée. Une solution TypeScript complète avec des tests et des configurations est disponible dans le ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "répertoire GitHub" }), ". J'ai également publié le package ", _jsx(_components.code, { children: "react-safe-lazy" }), " sur ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", vous pouvez donc l'utiliser dans votre projet dès maintenant."] }), "\n", _jsxs(_components.h2, { id: "conclusion", children: ["Conclusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "React.lazy" }), " et à améliorer l'expérience utilisateur de votre application."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }