"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "das-dilemma", "hProperties": { "id": "das-dilemma" } }, "depth": 2, "value": "Das Dilemma" }, { "data": { "id": "die-lösung", "hProperties": { "id": "die-lösung" } }, "depth": 2, "value": "Die Lösung" }, { "data": { "id": "erstelle-den-wrapper", "hProperties": { "id": "erstelle-den-wrapper" } }, "depth": 3, "value": "Erstelle den Wrapper" }, { "data": { "id": "behandle-die-versuche", "hProperties": { "id": "behandle-die-versuche" } }, "depth": 3, "value": "Behandle die Versuche" }, { "data": { "id": "behandle-das-neuladen", "hProperties": { "id": "behandle-das-neuladen" } }, "depth": 3, "value": "Behandle das Neuladen" }, { "data": { "id": "mehrere-lazy-komponenten-auf-derselben-seite", "hProperties": { "id": "mehrere-lazy-komponenten-auf-derselben-seite" } }, "depth": 3, "value": "Mehrere Lazy-Komponenten auf derselben Seite" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 3, "words": 917, "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: "das-dilemma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#das-dilemma", children: _jsx(_components.span, { children: "#" }) }), "Das Dilemma"] }), "\n", _jsx(_components.p, { children: "Heutzutage entwickelt sich die Softwareentwicklung immer schneller unter der populären Philosophie des \"move fast and break things\". Keine Wertung hier - es ist einfach so, wie die Dinge sind. Dieses schnelle Tempo kann jedoch manchmal zu Problemen führen, insbesondere wenn es darum geht, Komponenten in React zu laden." }), "\n", _jsxs(_components.p, { children: ["Wenn du an einem Projekt arbeitest, das ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " verwendet, um Komponenten bei Bedarf zu laden, bist du möglicherweise auf Probleme wie ", _jsx(_components.code, { children: "ChunkLoadError" }), " und ", _jsx(_components.code, { children: "Loading chunk failed" }), " gestoßen. Hier sind einige mögliche Gründe:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Es gibt ein Netzwerkproblem, zum Beispiel eine langsame oder instabile Internetverbindung des Nutzers." }), "\n", _jsx(_components.li, { children: "Der Nutzer verwendet eine veraltete Version der App, und der Browser versucht, einen Chunk zu laden, der nicht mehr existiert." }), "\n"] }), "\n", _jsx(_components.p, { children: "In der Regel kann ein einfaches Neuladen der Seite das Problem lösen, aber es ist keine großartige Erfahrung für den Nutzer. Stell dir vor, ein weißer Bildschirm erscheint, während der Nutzer zu einer anderen Route navigiert - das ist kein guter Eindruck für deine App." }), "\n", _jsx(_components.p, { children: "Können wir das Bedürfnis nach Geschwindigkeit mit einer reibungslosen Benutzererfahrung in Einklang bringen? Sicher. Lass mich dir zeigen, wie (natürlich mit TypeScript)." }), "\n", _jsxs(_components.h2, { id: "die-lösung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#die-lösung", children: _jsx(_components.span, { children: "#" }) }), "Die Lösung"] }), "\n", _jsx(_components.p, { children: "Eine brutale Lösung könnte darin bestehen, alle Versionen der Chunks auf dem Server zu speichern, wodurch das Problem des \"fehlenden Chunks\" nicht mehr besteht. Wenn deine App wächst, kann diese Lösung jedoch unpraktikabel werden, da der Bedarf an Speicherplatz zunimmt, und sie löst das Netzwerkproblem immer noch nicht." }), "\n", _jsxs(_components.p, { children: ["Da ein erneuter Versuch oder ein Neuladen das Problem lösen kann, können wir diese Lösungen in unseren Code implementieren. Da das Problem normalerweise auftritt, wenn der Nutzer zu einer anderen Route navigiert, können wir es lösen, ohne dass der Nutzer es bemerkt. Alles, was wir tun müssen, ist eine Wrapper-Funktion um die ", _jsx(_components.code, { children: "React.lazy" }), "-Funktion zu bauen, die die erneuten Versuche und das Neuladen behandelt."] }), "\n", _jsx(_components.p, { children: "Es gibt bereits einige großartige Artikel darüber, wie eine solche Lösung implementiert wird, daher werde ich mich auf die Idee und das Innenleben der Lösung konzentrieren." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Der endgültige Code ist in diesem ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub-Repository" }), " verfügbar und das ", _jsx(_components.code, { children: "react-safe-lazy" }), "-Paket ist\nauf ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " verfügbar. Das Paket ist vollständig getestet,\nextrem portabel (minifizierte Größe ~700B) und bereit für den Einsatz in deinem Projekt."] }) }), "\n", _jsxs(_components.h3, { id: "erstelle-den-wrapper", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstelle-den-wrapper", children: _jsx(_components.span, { children: "#" }) }), "Erstelle den Wrapper"] }), "\n", _jsxs(_components.p, { children: ["Der erste Schritt besteht darin, eine Wrapper-Funktion um die ", _jsx(_components.code, { children: "React.lazy" }), "-Funktion zu erstellen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Verwende Generika, um eine korrekte Typinferenz zu gewährleisten\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "behandle-die-versuche", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#behandle-die-versuche", children: _jsx(_components.span, { children: "#" }) }), "Behandle die Versuche"] }), "\n", _jsxs(_components.p, { children: ["Für Netzwerkprobleme können wir die Versuche behandeln, indem wir die ", _jsx(_components.code, { children: "importFunction" }), " in eine ", _jsx(_components.code, { children: "tryImport" }), "-Funktion einwickeln:"] }), "\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 // Maximal 3 Versuche\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: ["Sieht einfach aus, oder? Du kannst auch den Algorithmus des ", _jsx(_components.a, { href: "https://de.wikipedia.org/wiki/Exponential_Backoff", children: "exponentiellen Backoff" }), " implementieren, um die Versuche effizienter zu behandeln."] }), "\n", _jsxs(_components.h3, { id: "behandle-das-neuladen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#behandle-das-neuladen", children: _jsx(_components.span, { children: "#" }) }), "Behandle das Neuladen"] }), "\n", _jsx(_components.p, { children: "Bei einem Problem mit der veralteten Version können wir das Neuladen behandeln, indem wir den Fehler abfangen und die Seite aktualisieren:" }), "\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 // Gibt eine Dummy-Komponente zurück, um den Rückgabetyp von React.lazy einzuhalten\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Diese Implementierung ist jedoch sehr gefährlich, da sie zu einer Endlosschleife von Neuladen führen kann, wenn der Fehler nicht durch ein Neuladen behoben wird. Gleichzeitig geht der Zustand der App während des Neuladens verloren. Daher benötigen wir die Hilfe von ", _jsx(_components.code, { children: "sessionStorage" }), ", um die Nachricht zu speichern, die besagt, dass wir die Seite versucht haben, zu aktualisieren:"] }), "\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 // Lösche das sessionStorage, wenn die Komponente erfolgreich geladen wurde\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 // Wirf den Fehler, wenn die Komponente nach einem Neuladen nicht geladen werden kann\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nun wissen wir, wenn wir den Fehler aus der ", _jsx(_components.code, { children: "safeLazy" }), "-Funktion abfangen, dass es sich um etwas handelt, das nicht durch ein Neuladen behoben werden kann."] }), "\n", _jsxs(_components.h3, { id: "mehrere-lazy-komponenten-auf-derselben-seite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mehrere-lazy-komponenten-auf-derselben-seite", children: _jsx(_components.span, { children: "#" }) }), "Mehrere Lazy-Komponenten auf derselben Seite"] }), "\n", _jsxs(_components.p, { children: ["Es gibt immer noch eine versteckte Falle mit der aktuellen Implementierung. Wenn du mehrere Lazy-Komponenten auf derselben Seite hast, kann die Endlosschleife von Neuladen weiterhin auftreten, da andere Komponenten möglicherweise den ", _jsx(_components.code, { children: "sessionStorage" }), "-Wert zurücksetzen. Um dieses Problem zu lösen, können wir für jede Komponente einen eindeutigen Schlüssel verwenden:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-Funktion\n\n // Der Schlüssel kann für jede Komponente einzigartig sein\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Lösche das sessionStorage, wenn die Komponente erfolgreich geladen wurde\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 // Wirf den Fehler, wenn die Komponente nach einem Neuladen nicht geladen werden kann\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nun hat jede Komponente ihren eigenen ", _jsx(_components.code, { children: "sessionStorage" }), "-Schlüssel, und die Endlosschleife von Neuladen wird vermieden. Wir könnten die Lösung weiter verfeinern, zum Beispiel:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Sammle alle Schlüssel in einem Array, so dass nur ein Speicherplatzschlüssel benötigt wird." }), "\n", _jsx(_components.li, { children: "Setze ein Limit für das Neuladen, damit die Seite mehr als einmal aktualisiert wird, bevor ein Fehler geworfen wird." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Aber ich denke, du hast die Idee verstanden. Eine umfassende TypeScript-Lösung mit Tests und Konfigurationen ist im ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub-Repository" }), " verfügbar. Außerdem habe ich das ", _jsx(_components.code, { children: "react-safe-lazy" }), "-Paket auf ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " veröffentlicht, so dass du es sofort in deinem Projekt verwenden kannst."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) }), "Fazit"] }), "\n", _jsxs(_components.p, { children: ["Softwareentwicklung ist eine empfindliche Arbeit, und selbst die kleinsten Details können Mühe kosten, sie zu lösen. Ich hoffe, dieser Artikel kann dir helfen, die Probleme mit ", _jsx(_components.code, { children: "React.lazy" }), " elegant zu bewältigen und die Benutzerfreundlichkeit deiner App zu verbessern."] })] }); } 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."); }