"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "dilemma", "hProperties": { "id": "dilemma" } }, "depth": 2, "value": "Dilemma" }, { "data": { "id": "ratkaisu", "hProperties": { "id": "ratkaisu" } }, "depth": 2, "value": "Ratkaisu" }, { "data": { "id": "luo-kääre", "hProperties": { "id": "luo-kääre" } }, "depth": 3, "value": "Luo kääre" }, { "data": { "id": "käsittele-uudelleenyritykset", "hProperties": { "id": "käsittele-uudelleenyritykset" } }, "depth": 3, "value": "Käsittele uudelleenyritykset" }, { "data": { "id": "käsittele-uudelleenlataukset", "hProperties": { "id": "käsittele-uudelleenlataukset" } }, "depth": 3, "value": "Käsittele uudelleenlataukset" }, { "data": { "id": "useita-laiskoja-komponentteja-samalla-sivulla", "hProperties": { "id": "useita-laiskoja-komponentteja-samalla-sivulla" } }, "depth": 3, "value": "Useita laiskoja komponentteja samalla sivulla" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 2, "words": 680, "text": "2 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: "dilemma", children: ["Dilemma", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dilemma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nykyään ohjelmistokehitys etenee nopeammin suositun \"move fast and break things\" -ajattelutavan mukaisesti. Ei arvostella - tämä on vain tilanne. Kuitenkin tämä nopea tahti voi joskus johtaa ongelmiin, erityisesti kun ladataan komponentteja Reactissa." }), "\n", _jsxs(_components.p, { children: ["Jos työskentelet projektissa, joka käyttää ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy:tä" }), " komponenttien lataamiseen tarpeen mukaan, olet saattanut kohdata ongelmia, kuten ", _jsx(_components.code, { children: "ChunkLoadError" }), " ja ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Tässä on joitakin mahdollisia syitä:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Verkko-ongelma, esimerkiksi käyttäjän internet-yhteys on hidas tai epävakaa." }), "\n", _jsx(_components.li, { children: "Käyttäjä on vanhentuneessa sovellusversiossa, ja selain yrittää ladata osaa, jota ei enää ole." }), "\n"] }), "\n", _jsx(_components.p, { children: "Yleensä yksinkertainen sivun lataus uudelleen voi ratkaista ongelman, mutta se ei ole hyvä kokemus käyttäjälle. Kuvittele, jos valkoinen näyttö ilmestyy käyttäjän navigoidessa toiseen reittiin - se ei näytä hyvältä sovelluksessasi." }), "\n", _jsx(_components.p, { children: "Voimmeko tasapainottaa nopeuden tarpeen ja sujuvan käyttökokemuksen? Tietysti. Näytän sinulle miten (TypeScriptin kanssa, tietenkin)." }), "\n", _jsxs(_components.h2, { id: "ratkaisu", children: ["Ratkaisu", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ratkaisu", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Brutaalia voimaa käyttävä ratkaisu voisi olla tallentaa kaikki osaversiot palvelimelle, jolloin \"kadonneen osan\" ongelmaa ei enää olisi. Kun sovelluksesi kasvaa, tämä ratkaisu voi käydä mahdottomaksi kasvavien levyn tilavaatimusten vuoksi, eikä se silti ratkaise verkko-ongelmaa." }), "\n", _jsxs(_components.p, { children: ["Koska uudelleenyritys tai sivun lataus voi ratkaista ongelman, voimme toteuttaa nämä ratkaisut koodissamme. Koska ongelma ilmenee yleensä käyttäjän navigoidessa toiseen reittiin, voimme ratkaista sen ilman, että käyttäjä huomaa. Meidän tarvitsee vain rakentaa kääre ", _jsx(_components.code, { children: "React.lazy" }), "-funktion ympärille, joka käsittelee uudelleenyritykset ja sivun lataukset."] }), "\n", _jsx(_components.p, { children: "On jo olemassa joitakin loistavia artikkeleita siitä, miten tämäntyyppinen ratkaisu toteutetaan, joten keskityn vain ratkaisuidean ja -mekanismien esittelyyn." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Lopullinen koodi on saatavilla tässä ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub-arkistossa" }), " ja ", _jsx(_components.code, { children: "react-safe-lazy" }), "-paketti on saatavilla\n", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM:ssä" }), ". Paketti on täysin testattu,\nerittäin siirrettävä (minzipped ~700B) ja se on valmis käytettäväksi projektissasi."] }) }), "\n", _jsxs(_components.h3, { id: "luo-kääre", children: ["Luo kääre", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#luo-kääre", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Ensimmäinen askel on luoda kääre ", _jsx(_components.code, { children: "React.lazy" }), "-funktion ympärille:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Käytä geneeristä oikean tyyppin päättelemiseksi\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "käsittele-uudelleenyritykset", children: ["Käsittele uudelleenyritykset", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käsittele-uudelleenyritykset", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Verkko-ongelmien varalta voimme käsitellä uudelleenyritykset käärimällä ", _jsx(_components.code, { children: "importFunction" }), " ", _jsx(_components.code, { children: "tryImport" }), "-funktion sisään:"] }), "\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 // Yritä uudelleen enintään 3 kertaa\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: ["Näyttää yksinkertaiselta, eikö? Voit myös toteuttaa ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "eksponentiaalisen perääntymisen" }), " algoritmin käsittelemään uudelleenyrityksiä tehokkaammin."] }), "\n", _jsxs(_components.h3, { id: "käsittele-uudelleenlataukset", children: ["Käsittele uudelleenlataukset", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käsittele-uudelleenlataukset", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vanhentuneen version ongelman varalta voimme käsitellä uudelleenlatauksia sieppaamalla virheen ja lataamalla sivun uudelleen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktio\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Palauta tyhjä komponentti, jotta palautustyyppi vastaa React.lazy:ä\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Tämä toteutus on kuitenkin erittäin vaarallinen, koska se voi aiheuttaa äärettömän uudelleenlatausluupin, kun virhettä ei voida ratkaista uudelleenlatauksella. Samalla sovellustila menetetään uudelleenlatauksen aikana. Tarvitsemme siis ", _jsx(_components.code, { children: "sessionStorage" }), "-apua tallentaaksemme viestin siitä, että olemme yrittäneet ladata sivun uudelleen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktio\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Poista sessionStorage, kun komponentti latautuu onnistuneesti\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 // Heitä virhe, jos komponenttia ei voida ladata uudelleenlatauksen jälkeen\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nyt, kun sieppaamme virheen ", _jsx(_components.code, { children: "safeLazy" }), "-funktiosta, tiedämme, että se on jotain, mitä ei voida ratkaista uudelleenlatauksella."] }), "\n", _jsxs(_components.h3, { id: "useita-laiskoja-komponentteja-samalla-sivulla", children: ["Useita laiskoja komponentteja samalla sivulla", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#useita-laiskoja-komponentteja-samalla-sivulla", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Nykyisessä toteutuksessa on vielä piilossa oleva sudenkuoppa. Jos sinulla on useita laiskoja komponentteja samalla sivulla, äärettömän uudelleenlatausluupin mahdollisuus on yhä olemassa, koska muut komponentit voivat nollata ", _jsx(_components.code, { children: "sessionStorage" }), "-arvon. Ratkaistaaksemme tämän ongelman voimme käyttää uniikkia avainta kullekin komponentille:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport-funktio\n\n // Avain voi olla mikä tahansa uniikki jokaiselle komponentille\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Poista sessionStorage, kun komponentti latautuu onnistuneesti\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 // Heitä virhe, jos komponenttia ei voida ladata uudelleenlatauksen jälkeen\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nyt jokaisella komponentilla on oma ", _jsx(_components.code, { children: "sessionStorage" }), "-avain, eivätkä äärettömät uudelleenlatausluupit enää tapahdu. Voimme jatkaa ratkaisun hienosäätämistä, esimerkiksi:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Kerätä kaikki avaimet taulukkoon, jolloin tarvitaan vain yksi tallennusavain." }), "\n", _jsx(_components.li, { children: "Määrittää uudelleenlatausraja, joka sallii sivun lataamisen useammin kuin kerran ennen virheen heittämistä." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Mutta uskon, että ymmärrät idean. Kattava TypeScript-ratkaisu testien ja konfiguraatioiden kanssa on saatavilla ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub-arkistossa" }), ". Olen myös julkaissut ", _jsx(_components.code, { children: "react-safe-lazy" }), "-paketin ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM:ssä" }), ", joten voit käyttää sitä projektissasi heti."] }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: ["Yhteenveto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Ohjelmistokehitys on hienovaraista työtä, ja jopa pienimmät yksityiskohdat voivat vaatia vaivaa ratkaistakseen. Toivon, että tämä artikkeli voi auttaa sinua käsittelemään ", _jsx(_components.code, { children: "React.lazy" }), "-ongelmia sulavasti ja parantamaan sovelluksesi käyttökokemusta."] })] }); } 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."); }