"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "兩難", "hProperties": { "id": "兩難" } }, "depth": 2, "value": "兩難" }, { "data": { "id": "解決方案", "hProperties": { "id": "解決方案" } }, "depth": 2, "value": "解決方案" }, { "data": { "id": "創建包裝器", "hProperties": { "id": "創建包裝器" } }, "depth": 3, "value": "創建包裝器" }, { "data": { "id": "處理重試", "hProperties": { "id": "處理重試" } }, "depth": 3, "value": "處理重試" }, { "data": { "id": "處理刷新", "hProperties": { "id": "處理刷新" } }, "depth": 3, "value": "處理刷新" }, { "data": { "id": "在同一頁面上的多個-lazy-組件", "hProperties": { "id": "在同一頁面上的多個-lazy-組件" } }, "depth": 3, "value": "在同一頁面上的多個 lazy 組件" }, { "data": { "id": "結論", "hProperties": { "id": "結論" } }, "depth": 2, "value": "結論" }]; const readingTime = { "minutes": 4, "words": 1283, "text": "4 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: "兩難", children: ["兩難", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#兩難", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "如今，軟體開發在 \"快速行動並打破規則\" 的流行哲學下發展迅速。這裡並沒有評判——這只是事情的現狀。然而，這種快速的步伐有時可能會導致問題，特別是在 React 中加載組件時。" }), "\n", _jsxs(_components.p, { children: ["如果你正在開發一個使用 ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " 按需加載組件的專案，你可能會遇到一些問題，例如 ", _jsx(_components.code, { children: "ChunkLoadError" }), " 和 ", _jsx(_components.code, { children: "Loading chunk failed" }), "。以下是一些可能的原因："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "存在網路問題，例如用戶的網路連接緩慢或不穩定。" }), "\n", _jsx(_components.li, { children: "用戶使用的是舊版本的應用，瀏覽器試圖加載一個不再存在的 chunk。" }), "\n"] }), "\n", _jsx(_components.p, { children: "通常，簡單刷新頁面可以解決問題，但對用戶來說這不是很好的體驗。想像一下，當用戶導航到另一條路徑時出現白屏的情況 - 對你的應用來說這不太好看。" }), "\n", _jsx(_components.p, { children: "我們能否在速度需求和順暢用戶體驗之間取得平衡？當然可以。讓我來告訴你如何做到（當然是用 TypeScript）。" }), "\n", _jsxs(_components.h2, { id: "解決方案", children: ["解決方案", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#解決方案", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "一個蠻力解決方案是將所有版本的 chunk 保存在伺服器上，這樣就不會出現 \"缺少 chunk\" 的問題。隨著你的應用增長，這種解決方案可能會因磁碟空間需求增加而變得不可行，同時它仍然無法解決網路問題。" }), "\n", _jsxs(_components.p, { children: ["考慮到重試或刷新可以解決問題，我們可以在代碼中實現這些解決方案。由於問題通常發生在用戶導航到另一條路徑時，我們甚至可以在用戶察覺之前解決它。我們需要做的只是建立一個包裹 ", _jsx(_components.code, { children: "React.lazy" }), " 函數的包裝器，它將處理重試和刷新。"] }), "\n", _jsx(_components.p, { children: "已經有一些很棒的文章討論如何實現這類解決方案，所以我會專注於解決方案的想法和內部運作。" }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["最終代碼可以在這個 ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\n儲存庫" }), " 中找到，", _jsx(_components.code, { children: "react-safe-lazy" }), " 套件可以在 ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " 上獲得。該套件經過完整測試，極具移植性（壓縮後約 700B），準備好用於你的專案中。"] }) }), "\n", _jsxs(_components.h3, { id: "創建包裝器", children: ["創建包裝器", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#創建包裝器", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["第一步是為 ", _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// 使用泛型以獲得正確的類型推斷\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "處理重試", children: ["處理重試", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#處理重試", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["對於網路問題，我們可以通過將 ", _jsx(_components.code, { children: "importFunction" }), " 包裝在 ", _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 // 最多重試 3 次\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: ["看起來很簡單，對吧？你還可以實現 ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "指數退避" }), " 算法來更高效地處理重試。"] }), "\n", _jsxs(_components.h3, { id: "處理刷新", children: ["處理刷新", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#處理刷新", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "對於過時版本問題，我們可以通過捕捉錯誤並刷新頁面來處理刷新：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // 返回一個虛擬組件以匹配 React.lazy 的返回類型\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["然而，這種實現非常危險，因為當錯誤無法通過刷新解決時，它可能會導致無限刷新循環。與此同時，應用狀態會在刷新期間丟失。因此，我們需要 ", _jsx(_components.code, { children: "sessionStorage" }), " 的幫助來存儲我們已經嘗試刷新頁面的消息："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // 當組件成功加載時清除 sessionStorage\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 // 如果組件在刷新後仍無法加載則拋出錯誤\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["現在，當我們從 ", _jsx(_components.code, { children: "safeLazy" }), " 函數中捕捉到錯誤時，我們知道這是無法通過刷新解決的問題。"] }), "\n", _jsxs(_components.h3, { id: "在同一頁面上的多個-lazy-組件", children: ["在同一頁面上的多個 lazy 組件", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#在同一頁面上的多個-lazy-組件", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["目前的實現仍然藏有隱患。如果你在同一頁面上有多個 lazy 組件，由於其他組件可能會重置 ", _jsx(_components.code, { children: "sessionStorage" }), " 值，因此無限刷新循環仍然可能發生。為了解決此問題，我們可以為每個組件使用一個唯一鍵："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport function\n\n // 鍵可以是每個組件的任何唯一值\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // 當組件成功加載時清除 sessionStorage\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 // 如果組件在刷新後仍無法加載則拋出錯誤\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["現在，每個組件將擁有各自的 ", _jsx(_components.code, { children: "sessionStorage" }), " 鍵，從而避免無限刷新循環。我們可以繼續挑剔這個解決方案，例如："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "將所有鍵收集在一個陣列中，這樣只需要一個存儲鍵。" }), "\n", _jsx(_components.li, { children: "設置刷新限制，以便在拋出錯誤前多次刷新頁面。" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["但我想你已經掌握了這個想法。在 ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub 儲存庫" }), " 中有一個包括測試和配置的綜合 TypeScript 解決方案。我也在 ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " 上發布了 ", _jsx(_components.code, { children: "react-safe-lazy" }), " 套件，可以立即用於你的專案中。"] }), "\n", _jsxs(_components.h2, { id: "結論", children: ["結論", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#結論", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["軟體開發是一項細緻的工作，即使是最小的細節也可能需要付出努力來解決。希望這篇文章能幫助你優雅地處理 ", _jsx(_components.code, { children: "React.lazy" }), " 的問題並改善應用的用戶體驗。"] })] }); } 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."); }