"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": "同一页面上的多个懒加载组件", "hProperties": { "id": "同一页面上的多个懒加载组件" } }, "depth": 3, "value": "同一页面上的多个懒加载组件" }, { "data": { "id": "结论", "hProperties": { "id": "结论" } }, "depth": 2, "value": "结论" }]; const readingTime = { "minutes": 4, "words": 1294, "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，这样就不会再有“missing 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\nrepository" }), " 中可用，并且 ", _jsx(_components.code, { children: "react-safe-lazy" }), " 包在 ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " 上可用。该包已完全测试、极其便携（minzipped ~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 函数\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 函数\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: "同一页面上的多个懒加载组件", children: ["同一页面上的多个懒加载组件", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#同一页面上的多个懒加载组件", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["当前实现还有一个隐藏的陷阱。如果在同一页面上有多个懒加载组件，无限刷新循环仍然可能发生，因为其他组件可能会重置 ", _jsx(_components.code, { children: "sessionStorage" }), " 值。为了解决这个问题，我们可以为每个组件使用一个唯一的 key："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport 函数\n\n // 该 key 可以是每个组件唯一的任何内容\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" }), " key，并且可以避免无限刷新循环。我们还可以继续对解决方案进行挑剔，例如："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "将所有 key 收集到一个数组中，这样只需要一个存储 key。" }), "\n", _jsx(_components.li, { children: "设置刷新限制，以允许刷新页面多次而不是仅一次后抛出错误。" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["但我想你已经明白了这个思路。一个带有测试和配置的全面 TypeScript 解决方案可在 ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub repository" }), " 中找到。我还在 ", _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."); }