"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "dylemat", "hProperties": { "id": "dylemat" } }, "depth": 2, "value": "Dylemat" }, { "data": { "id": "rozwiązanie", "hProperties": { "id": "rozwiązanie" } }, "depth": 2, "value": "Rozwiązanie" }, { "data": { "id": "tworzenie-opakowania", "hProperties": { "id": "tworzenie-opakowania" } }, "depth": 3, "value": "Tworzenie opakowania" }, { "data": { "id": "obsługa-ponownych-prób", "hProperties": { "id": "obsługa-ponownych-prób" } }, "depth": 3, "value": "Obsługa ponownych prób" }, { "data": { "id": "obsługa-odświeżeń", "hProperties": { "id": "obsługa-odświeżeń" } }, "depth": 3, "value": "Obsługa odświeżeń" }, { "data": { "id": "wiele-leniwych-komponentów-na-tej-samej-stronie", "hProperties": { "id": "wiele-leniwych-komponentów-na-tej-samej-stronie" } }, "depth": 3, "value": "Wiele leniwych komponentów na tej samej stronie" }, { "data": { "id": "wnioski", "hProperties": { "id": "wnioski" } }, "depth": 2, "value": "Wnioski" }]; const readingTime = { "minutes": 3, "words": 778, "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: "dylemat", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dylemat", children: _jsx(_components.span, { children: "#" }) }), "Dylemat"] }), "\n", _jsx(_components.p, { children: "Obecnie rozwój oprogramowania przyspiesza w ramach popularnej filozofii \"działaj szybko i psuj rzeczy\". Nie oceniamy tu - to po prostu taki jest sposób działania. Jednak to szybkie tempo może czasami prowadzić do problemów, zwłaszcza kiedy chodzi o ładowanie komponentów w React." }), "\n", _jsxs(_components.p, { children: ["Jeśli pracujesz nad projektem, który używa ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " do ładowania komponentów na żądanie, mogłeś napotkać problemy, takie jak ", _jsx(_components.code, { children: "ChunkLoadError" }), " i ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Oto kilka możliwych przyczyn:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Wystąpił problem z siecią, na przykład użytkownik ma wolne lub niestabilne połączenie internetowe." }), "\n", _jsx(_components.li, { children: "Użytkownik korzysta ze starej wersji aplikacji i przeglądarka próbuje załadować fragment, który już nie istnieje." }), "\n"] }), "\n", _jsx(_components.p, { children: "Zazwyczaj prosty odświeżenie strony może rozwiązać problem, ale to nie jest dobre doświadczenie dla użytkownika. Wyobraź sobie, że pojawia się biały ekran, gdy użytkownik próbuje przejść do innej trasy - to nie wygląda dobrze dla Twojej aplikacji." }), "\n", _jsx(_components.p, { children: "Czy możemy zrównoważyć potrzebę szybkości z potrzebą płynnego doświadczenia użytkownika? Oczywiście. Pokażę Ci, jak to zrobić (oczywiście przy użyciu TypeScript)." }), "\n", _jsxs(_components.h2, { id: "rozwiązanie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rozwiązanie", children: _jsx(_components.span, { children: "#" }) }), "Rozwiązanie"] }), "\n", _jsx(_components.p, { children: "Brutalnym rozwiązaniem może być przechowanie wszystkich wersji fragmentów na serwerze, eliminując tym samym problem \"brakującego fragmentu\". Jednak wraz ze wzrostem aplikacji to rozwiązanie może stać się niewykonalne ze względu na rosnące zapotrzebowanie na przestrzeń dyskową i nadal nie rozwiązuje problemu z siecią." }), "\n", _jsxs(_components.p, { children: ["Biorąc pod uwagę, że próba ponownego załadowania strony może rozwiązać problem, możemy wdrożyć te rozwiązania w naszym kodzie. Ponieważ problem zwykle pojawia się, gdy użytkownik nawigujący do innej trasy, możemy rozwiązać to, nawet bez wiedzy użytkownika. Wszystko, co musimy zrobić, to stworzyć opakowanie wokół funkcji ", _jsx(_components.code, { children: "React.lazy" }), ", które obsłuży próby i odświeżenia."] }), "\n", _jsx(_components.p, { children: "Istnieje już kilka świetnych artykułów na temat implementacji tego rodzaju rozwiązania, dlatego skupię się na idei i mechanizmach wewnętrznych rozwiązania." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Końcowy kod jest dostępny w tym ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repozytorium GitHub" }), " oraz pakiet\n", _jsx(_components.code, { children: "react-safe-lazy" }), " jest dostępny na ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". Pakiet jest w pełni przetestowany,\nwyjątkowo przenośny (minzipped ~700B) i gotowy do użycia w Twoim projekcie."] }) }), "\n", _jsxs(_components.h3, { id: "tworzenie-opakowania", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tworzenie-opakowania", children: _jsx(_components.span, { children: "#" }) }), "Tworzenie opakowania"] }), "\n", _jsxs(_components.p, { children: ["Pierwszym krokiem jest stworzenie opakowania wokół funkcji ", _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// Użyj generyku dla poprawnej inferencji typów\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "obsługa-ponownych-prób", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obsługa-ponownych-prób", children: _jsx(_components.span, { children: "#" }) }), "Obsługa ponownych prób"] }), "\n", _jsxs(_components.p, { children: ["W przypadku problemów z siecią możemy obsłużyć ponowne próby, opakowując ", _jsx(_components.code, { children: "importFunction" }), " w funkcję ", _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 // Maksymalne 3 próby\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: ["Wygląda prosto, prawda? Możesz również zaimplementować algorytm ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), ", aby efektywniej obsłużyć ponowne próby."] }), "\n", _jsxs(_components.h3, { id: "obsługa-odświeżeń", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obsługa-odświeżeń", children: _jsx(_components.span, { children: "#" }) }), "Obsługa odświeżeń"] }), "\n", _jsx(_components.p, { children: "W przypadku problemu ze starą wersją możemy obsłużyć odświeżenia przez wychwycenie błędu i odświeżenie strony:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funkcja tryImport\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Zwróć komponent dummy, aby dopasować typ zwrotu React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Jednak taka implementacja jest bardzo niebezpieczna, ponieważ może powodować nieskończoną pętlę odświeżeń, gdy błąd nie może zostać rozwiązany przez odświeżenie. W międzyczasie stan aplikacji zostanie utracony podczas odświeżenia. Potrzebujemy więc pomocy od ", _jsx(_components.code, { children: "sessionStorage" }), ", aby zapisać wiadomość, że próbowaliśmy odświeżyć stronę:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funkcja tryImport\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Usuń dane w sessionStorage, gdy komponent zostanie pomyślnie załadowany\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 // Wyrzuć błąd, jeśli komponent nie może być załadowany po odświeżeniu\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Teraz, kiedy wychwycimy błąd z funkcji ", _jsx(_components.code, { children: "safeLazy" }), ", wiemy, że jest to coś, czego nie można rozwiązać przez odświeżenie."] }), "\n", _jsxs(_components.h3, { id: "wiele-leniwych-komponentów-na-tej-samej-stronie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wiele-leniwych-komponentów-na-tej-samej-stronie", children: _jsx(_components.span, { children: "#" }) }), "Wiele leniwych komponentów na tej samej stronie"] }), "\n", _jsxs(_components.p, { children: ["Istnieje jeszcze ukryta pułapka w obecnej implementacji. Jeśli masz wiele leniwych komponentów na tej samej stronie, nieskończona pętla odświeżeń może nadal się wydarzyć, ponieważ inne komponenty mogą zresetować wartość ", _jsx(_components.code, { children: "sessionStorage" }), ". Aby rozwiązać ten problem, możemy użyć unikalnego klucza dla każdego komponentu:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...funkcja tryImport\n\n // Klucz może być czymkolwiek unikalnym dla każdego komponentu\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Usuń dane w sessionStorage, gdy komponent zostanie pomyślnie załadowany\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 // Wyrzuć błąd, jeśli komponent nie może być załadowany po odświeżeniu\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Teraz każdy komponent będzie miał swój własny klucz ", _jsx(_components.code, { children: "sessionStorage" }), ", a nieskończona pętla odświeżeń zostanie uniknięta. Możemy kontynuować dopracowywanie rozwiązania, na przykład:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Zbieranie wszystkich kluczy w tablicy, dzięki czemu potrzebny jest tylko jeden klucz w pamięci." }), "\n", _jsx(_components.li, { children: "Ustawienie limitu odświeżeń, aby odświeżyć stronę więcej niż jeden raz przed wydaniem błędu." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ale myślę, że rozumiesz ideę. Kompletne rozwiązanie w TypeScript z testami i konfiguracjami jest dostępne w ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repozytorium GitHub" }), ". Opublikowałem również pakiet ", _jsx(_components.code, { children: "react-safe-lazy" }), " na ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", więc możesz go użyć w swoim projekcie od razu."] }), "\n", _jsxs(_components.h2, { id: "wnioski", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wnioski", children: _jsx(_components.span, { children: "#" }) }), "Wnioski"] }), "\n", _jsxs(_components.p, { children: ["Tworzenie oprogramowania to delikatna praca, a nawet najmniejsze szczegóły mogą wymagać wysiłku do rozwiązania. Mam nadzieję, że ten artykuł pomoże Ci elegancko poradzić sobie z problemami z ", _jsx(_components.code, { children: "React.lazy" }), " i poprawić doświadczenie użytkownika Twojej aplikacji."] })] }); } 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."); }