"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "dilemmat", "hProperties": { "id": "dilemmat" } }, "depth": 2, "value": "Dilemmat" }, { "data": { "id": "lösningen", "hProperties": { "id": "lösningen" } }, "depth": 2, "value": "Lösningen" }, { "data": { "id": "skapa-omslaget", "hProperties": { "id": "skapa-omslaget" } }, "depth": 3, "value": "Skapa omslaget" }, { "data": { "id": "hantera-omstarter", "hProperties": { "id": "hantera-omstarter" } }, "depth": 3, "value": "Hantera omstarter" }, { "data": { "id": "hantera-uppdateringar", "hProperties": { "id": "hantera-uppdateringar" } }, "depth": 3, "value": "Hantera uppdateringar" }, { "data": { "id": "flera-lazy-komponenter-på-samma-sida", "hProperties": { "id": "flera-lazy-komponenter-på-samma-sida" } }, "depth": 3, "value": "Flera lazy-komponenter på samma sida" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 3, "words": 836, "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: "dilemmat", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dilemmat", children: _jsx(_components.span, { children: "#" }) }), "Dilemmat"] }), "\n", _jsx(_components.p, { children: "Nu för tiden rör sig mjukvaruutveckling snabbare under den populära \"move fast and break things\"-filosofin. Ingen bedömning här - det är bara så det är. Men denna snabba takt kan ibland leda till problem, särskilt när det gäller att ladda komponenter i React." }), "\n", _jsxs(_components.p, { children: ["Om du arbetar på ett projekt som använder ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " för att ladda komponenter vid behov, kanske du har stött på några problem som ", _jsx(_components.code, { children: "ChunkLoadError" }), " och ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Här är några möjliga orsaker:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Det finns ett nätverksproblem, till exempel att användarens internetanslutning är långsam eller instabil." }), "\n", _jsx(_components.li, { children: "Användaren är på en föråldrad version av appen och webbläsaren försöker ladda en chunk som inte längre finns." }), "\n"] }), "\n", _jsx(_components.p, { children: "Vanligtvis kan en enkel siduppdatering lösa problemet, men det är inte en bra upplevelse för användaren. Tänk om en vit skärm visas när användaren navigerar till en annan ruta - det är inte bra för din app." }), "\n", _jsx(_components.p, { children: "Kan vi balansera behovet av fart med behovet av en smidig användarupplevelse? Självklart. Låt mig visa dig hur (med TypeScript, förstås)." }), "\n", _jsxs(_components.h2, { id: "lösningen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lösningen", children: _jsx(_components.span, { children: "#" }) }), "Lösningen"] }), "\n", _jsx(_components.p, { children: "En våldsam lösning kan vara att spara alla versioner av chunkar på servern, vilket alltså eliminerar problemet med \"saknad chunk\". När din app växer kan denna lösning bli opraktisk på grund av ökade diskutrymmeskrav, och det löser fortfarande inte nätverksproblemet." }), "\n", _jsxs(_components.p, { children: ["Med tanke på att en omstart eller uppdatering kan lösa problemet, kan vi implementera dessa lösningar i vår kod. Eftersom problemet vanligtvis uppstår när användaren navigerar till en annan ruta, kan vi lösa det utan att användaren märker det. Allt vi behöver göra är att bygga en omslag runt ", _jsx(_components.code, { children: "React.lazy" }), "-funktionen som hanterar omstarter och uppdateringar."] }), "\n", _jsx(_components.p, { children: "Det finns redan några bra artiklar om hur man implementerar denna typ av lösning, så jag kommer att fokusera på idén och de inre funktionerna av lösningen." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Den slutliga koden finns tillgänglig i detta ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\nrepository" }), " och ", _jsx(_components.code, { children: "react-safe-lazy" }), "-paketet är\ntillgängligt på ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". Paketet är fullt testat,\nextremt portabelt (minimerat ~700B) och redo att användas i ditt projekt."] }) }), "\n", _jsxs(_components.h3, { id: "skapa-omslaget", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-omslaget", children: _jsx(_components.span, { children: "#" }) }), "Skapa omslaget"] }), "\n", _jsxs(_components.p, { children: ["Första steget är att skapa ett omslag runt ", _jsx(_components.code, { children: "React.lazy" }), "-funktionen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Använd generiskt antagande för korrekt typinferens\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "hantera-omstarter", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hantera-omstarter", children: _jsx(_components.span, { children: "#" }) }), "Hantera omstarter"] }), "\n", _jsxs(_components.p, { children: ["För nätverksproblem kan vi hantera omstarter genom att lägga ", _jsx(_components.code, { children: "importFunction" }), " i en ", _jsx(_components.code, { children: "tryImport" }), "-funktion:"] }), "\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 // Försök 3 gånger max\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: ["Ser enkelt ut, eller hur? Du kan också implementera ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), "-algoritmen för att hantera omstarter mer effektivt."] }), "\n", _jsxs(_components.h3, { id: "hantera-uppdateringar", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hantera-uppdateringar", children: _jsx(_components.span, { children: "#" }) }), "Hantera uppdateringar"] }), "\n", _jsx(_components.p, { children: "För problemet med föråldrade versioner kan vi hantera uppdateringar genom att fånga felet och uppdatera sidan:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktion\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Returnera en dummy-komponent för att matcha returneringstypen av React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Men denna implementering är mycket farlig, eftersom den kan orsaka en oändlig loop av uppdateringar när felet inte kan lösas genom en uppdatering. Samtidigt kommer apptillståndet att gå förlorat under uppdateringen. Så vi behöver hjälp av ", _jsx(_components.code, { children: "sessionStorage" }), " för att lagra meddelandet att vi har försökt att uppdatera sidan:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktion\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Rensa sessionStorage när komponenten laddas framgångsrikt\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 // Kasta felet om komponenten inte kan laddas efter en uppdatering\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nu, när vi fångar felet från ", _jsx(_components.code, { children: "safeLazy" }), "-funktionen, vet vi att det är något som inte kan lösas genom en uppdatering."] }), "\n", _jsxs(_components.h3, { id: "flera-lazy-komponenter-på-samma-sida", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#flera-lazy-komponenter-på-samma-sida", children: _jsx(_components.span, { children: "#" }) }), "Flera lazy-komponenter på samma sida"] }), "\n", _jsxs(_components.p, { children: ["Det finns fortfarande en dold fallgrop med den nuvarande implementeringen. Om du har flera lazy-komponenter på samma sida, kan den oändliga loopen av uppdateringar fortfarande hända eftersom andra komponenter kan återställa ", _jsx(_components.code, { children: "sessionStorage" }), "-värdet. För att lösa detta problem kan vi använda en unik nyckel för varje komponent:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktion\n\n // Nyckeln kan vara vad som helst som är unikt för varje komponent\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Rensa sessionStorage när komponenten laddas framgångsrikt\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 // Kasta felet om komponenten inte kan laddas efter en uppdatering\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nu kommer varje komponent att ha sin egen ", _jsx(_components.code, { children: "sessionStorage" }), "-nyckel, och den oändliga loopen av uppdateringar kommer att undvikas. Vi kan fortsätta att kritiskt granska lösningen, till exempel:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Samla alla nycklar i en array, så att endast en lagringsnyckel behövs." }), "\n", _jsx(_components.li, { children: "Ställ in en uppdateringsgräns för att uppdatera sidan mer än en gång innan ett fel kastas." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Men jag tror att du förstår idén. En omfattande TypeScript-lösning med tester och konfigurationer finns tillgänglig i ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub-repoet" }), ". Jag har också publicerat ", _jsx(_components.code, { children: "react-safe-lazy" }), "-paketet på ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", så du kan använda den i ditt projekt direkt."] }), "\n", _jsxs(_components.h2, { id: "slutsats", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) }), "Slutsats"] }), "\n", _jsxs(_components.p, { children: ["Mjukvaruutveckling är ett noggrant arbete, och även de minsta detaljerna kan kräva ansträngning att lösa. Jag hoppas denna artikel kan hjälpa dig att hantera problemen med ", _jsx(_components.code, { children: "React.lazy" }), " smidigt och förbättra din apps användarupplevelse."] })] }); } 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."); }