"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "il-dilemma", "hProperties": { "id": "il-dilemma" } }, "depth": 2, "value": "Il dilemma" }, { "data": { "id": "la-soluzione", "hProperties": { "id": "la-soluzione" } }, "depth": 2, "value": "La soluzione" }, { "data": { "id": "crea-il-wrapper", "hProperties": { "id": "crea-il-wrapper" } }, "depth": 3, "value": "Crea il wrapper" }, { "data": { "id": "gestisci-i-retry", "hProperties": { "id": "gestisci-i-retry" } }, "depth": 3, "value": "Gestisci i retry" }, { "data": { "id": "gestisci-gli-aggiornamenti", "hProperties": { "id": "gestisci-gli-aggiornamenti" } }, "depth": 3, "value": "Gestisci gli aggiornamenti" }, { "data": { "id": "più-componenti-lazy-sulla-stessa-pagina", "hProperties": { "id": "più-componenti-lazy-sulla-stessa-pagina" } }, "depth": 3, "value": "Più componenti lazy sulla stessa pagina" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 3, "words": 922, "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: "il-dilemma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#il-dilemma", children: _jsx(_components.span, { children: "#" }) }), "Il dilemma"] }), "\n", _jsx(_components.p, { children: "Al giorno d'oggi, lo sviluppo software si muove più velocemente sotto la popolare filosofia \"muoviti velocemente e rompi le cose\". Nessun giudizio qui - è semplicemente così che vanno le cose. Tuttavia, questo ritmo rapido può a volte portare a dei problemi, soprattutto quando si tratta di caricare i componenti in React." }), "\n", _jsxs(_components.p, { children: ["Se stai lavorando su un progetto che utilizza ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " per caricare i componenti su richiesta, potresti aver incontrato alcuni problemi come ", _jsx(_components.code, { children: "ChunkLoadError" }), " e ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Ecco alcune possibili ragioni:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "C'è un problema di rete, ad esempio, la connessione internet dell'utente è lenta o instabile." }), "\n", _jsx(_components.li, { children: "L'utente sta utilizzando una versione obsoleta dell'app e il browser sta cercando di caricare un chunk che non esiste più." }), "\n"] }), "\n", _jsx(_components.p, { children: "Di solito, un semplice aggiornamento della pagina può risolvere il problema, ma non è una grande esperienza per l'utente. Immagina se appare una schermata bianca quando l'utente sta navigando verso un'altra rotta - non è una buona impressione per la tua app." }), "\n", _jsx(_components.p, { children: "Possiamo bilanciare la necessità di velocità con la necessità di un'esperienza utente fluida? Certo. Lascia che ti mostri come (con TypeScript, naturalmente)." }), "\n", _jsxs(_components.h2, { id: "la-soluzione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-soluzione", children: _jsx(_components.span, { children: "#" }) }), "La soluzione"] }), "\n", _jsx(_components.p, { children: "Una soluzione brutale potrebbe essere quella di salvare tutte le versioni dei chunk sul server, in modo da non avere più il problema del \"chunk mancante\". Man mano che la tua app cresce, questa soluzione può diventare impraticabile a causa dei crescenti requisiti di spazio su disco, e non risolve comunque il problema della rete." }), "\n", _jsxs(_components.p, { children: ["Dato che un retry o un aggiornamento può risolvere il problema, possiamo implementare queste soluzioni nel nostro codice. Poiché il problema di solito si verifica quando l'utente sta navigando verso un'altra rotta, possiamo risolverlo senza che l'utente se ne accorga. Tutto ciò che dobbiamo fare è costruire un wrapper attorno alla funzione ", _jsx(_components.code, { children: "React.lazy" }), " che gestirà i retry e gli aggiornamenti."] }), "\n", _jsx(_components.p, { children: "Esistono già alcuni ottimi articoli su come implementare questo tipo di soluzione, quindi mi concentrerò sull'idea e sul funzionamento interno della soluzione." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Il codice finale è disponibile in questo ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repository GitHub\n" }), " e il pacchetto ", _jsx(_components.code, { children: "react-safe-lazy" }), " è\ndisponibile su ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". Il pacchetto è completamente testato,\nestremamente portatile (minzipped ~700B) e pronto per essere utilizzato nel tuo progetto."] }) }), "\n", _jsxs(_components.h3, { id: "crea-il-wrapper", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crea-il-wrapper", children: _jsx(_components.span, { children: "#" }) }), "Crea il wrapper"] }), "\n", _jsxs(_components.p, { children: ["Il primo passo è creare un wrapper attorno alla funzione ", _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// Usa generici per ottenere un'inferenza di tipo corretta\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "gestisci-i-retry", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gestisci-i-retry", children: _jsx(_components.span, { children: "#" }) }), "Gestisci i retry"] }), "\n", _jsxs(_components.p, { children: ["Per i problemi di rete, possiamo gestire i retry avvolgendo la ", _jsx(_components.code, { children: "importFunction" }), " in una funzione ", _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 // Riprova al massimo 3 volte\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: ["Sembra semplice, vero? Puoi anche implementare l'algoritmo di ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " per gestire i retry in modo più efficiente."] }), "\n", _jsxs(_components.h3, { id: "gestisci-gli-aggiornamenti", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gestisci-gli-aggiornamenti", children: _jsx(_components.span, { children: "#" }) }), "Gestisci gli aggiornamenti"] }), "\n", _jsx(_components.p, { children: "Per il problema della versione obsoleta, possiamo gestire gli aggiornamenti catturando l'errore e aggiornando la pagina:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funzione tryImport\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Restituisci un componente fittizio per corrispondere al tipo di ritorno di React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Tuttavia, questa implementazione è molto pericolosa, poiché potrebbe causare un loop infinito di aggiornamenti quando l'errore non può essere risolto con un aggiornamento. Nel frattempo, lo stato dell'app andrà perso durante l'aggiornamento. Quindi abbiamo bisogno dell'aiuto di ", _jsx(_components.code, { children: "sessionStorage" }), " per memorizzare il messaggio che abbiamo tentato di aggiornare la pagina:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funzione tryImport\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Cancella sessionStorage quando il componente è caricato correttamente\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 // Lancia l'errore se il componente non può essere caricato dopo un aggiornamento\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ora, quando catturiamo l'errore dalla funzione ", _jsx(_components.code, { children: "safeLazy" }), ", sappiamo che è qualcosa che non può essere risolto con un aggiornamento."] }), "\n", _jsxs(_components.h3, { id: "più-componenti-lazy-sulla-stessa-pagina", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#più-componenti-lazy-sulla-stessa-pagina", children: _jsx(_components.span, { children: "#" }) }), "Più componenti lazy sulla stessa pagina"] }), "\n", _jsxs(_components.p, { children: ["C'è ancora una trappola nascosta con l'attuale implementazione. Se hai più componenti lazy sulla stessa pagina, il loop infinito di aggiornamenti potrebbe ancora verificarsi perché altri componenti potrebbero resettare il valore di ", _jsx(_components.code, { children: "sessionStorage" }), ". Per risolvere questo problema, possiamo usare una chiave unica per ogni componente:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funzione tryImport\n\n // La chiave può essere qualsiasi cosa unica per ogni componente\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Cancella sessionStorage quando il componente è caricato correttamente\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 // Lancia l'errore se il componente non può essere caricato dopo un aggiornamento\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ora, ogni componente avrà la propria chiave ", _jsx(_components.code, { children: "sessionStorage" }), ", e il loop infinito di aggiornamenti sarà evitato. Possiamo continuare a perfezionare la soluzione, ad esempio:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Raccogliere tutte le chiavi in un array, in modo da avere bisogno solo di una chiave di archiviazione." }), "\n", _jsx(_components.li, { children: "Impostare un limite di aggiornamento per aggiornare la pagina più di una volta prima di lanciare un errore." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ma penso che tu abbia capito l'idea. Una soluzione completa in TypeScript con test e configurazioni è disponibile nel ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repository GitHub" }), ". Ho anche pubblicato il pacchetto ", _jsx(_components.code, { children: "react-safe-lazy" }), " su ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", così puoi usarlo subito nel tuo progetto."] }), "\n", _jsxs(_components.h2, { id: "conclusione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusione", children: _jsx(_components.span, { children: "#" }) }), "Conclusione"] }), "\n", _jsxs(_components.p, { children: ["Lo sviluppo software è un lavoro delicato, e anche i minimi dettagli possono richiedere uno sforzo per essere risolti. Spero che questo articolo possa aiutarti a gestire con grazia i problemi con ", _jsx(_components.code, { children: "React.lazy" }), " e a migliorare l'esperienza utente della tua app."] })] }); } 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."); }