"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": 2, "words": 608, "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: "ジレンマ", 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: "ユーザーが古いバージョンのアプリを使用しており、ブラウザが存在しないチャンクを読み込もうとしている。" }), "\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: "力技的な解決策として、異なるバージョンのすべてのチャンクをサーバーに保存するというものがあります。こうすれば「チャンクが見つからない」問題はなくなります。しかし、アプリが成長するとディスクスペースの要求が増え、この解決策は実現不可能になるかもしれません。また、ネットワークの問題も解決されません。" }), "\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" }), " で利用可能です。このパッケージは完全にテストされており、非常にポータブル (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: "同一ページに複数の-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 関数\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: "すべてのキーを配列に集め、1つのストレージキーだけにする。" }), "\n", _jsx(_components.li, { children: "エラースロー前にページを1回以上リフレッシュするリフレッシュリミットを設定する。" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["しかし、基本的なアイデアは伝わったかと思います。テストおよび設定が施された包括的な TypeScript ソリューションは、", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub リポジトリ" }), " で利用可能です。また、", _jsx(_components.code, { children: "react-safe-lazy" }), " パッケージは ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), "で公開されているので、すぐにプロジェクトで使用できます。"] }), "\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."); }