"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "i̇kilem", "hProperties": { "id": "i̇kilem" } }, "depth": 2, "value": "İkilem" }, { "data": { "id": "çözüm", "hProperties": { "id": "çözüm" } }, "depth": 2, "value": "Çözüm" }, { "data": { "id": "sarmalayıcıyı-oluşturun", "hProperties": { "id": "sarmalayıcıyı-oluşturun" } }, "depth": 3, "value": "Sarmalayıcıyı oluşturun" }, { "data": { "id": "yeniden-denemeleri-işleyin", "hProperties": { "id": "yeniden-denemeleri-işleyin" } }, "depth": 3, "value": "Yeniden denemeleri işleyin" }, { "data": { "id": "sayfa-yenilemelerini-işleyin", "hProperties": { "id": "sayfa-yenilemelerini-işleyin" } }, "depth": 3, "value": "Sayfa yenilemelerini işleyin" }, { "data": { "id": "aynı-sayfada-birden-fazla-lazy-bileşeni", "hProperties": { "id": "aynı-sayfada-birden-fazla-lazy-bileşeni" } }, "depth": 3, "value": "Aynı sayfada birden fazla lazy bileşeni" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 2, "words": 714, "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: "i̇kilem", children: ["İkilem", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#i̇kilem", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Günümüzde, yazılım geliştirme popüler \"hızlı hareket et ve bir şeyleri bozulmasına izin ver\" felsefesi altında daha hızlı bir şekilde ilerliyor. Burada eleştirmek değil niyetim - bu, sadece işlerin mevcut durumu. Ancak, bu hızlı tempo bazen özellikle React'te bileşen yükleme konusunda sorunlara yol açabiliyor." }), "\n", _jsxs(_components.p, { children: ["Eğer ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " kullanarak bileşenleri talep üzerine yükleyen bir projede çalışıyorsan, ", _jsx(_components.code, { children: "ChunkLoadError" }), " ve ", _jsx(_components.code, { children: "Loading chunk failed" }), " gibi sorunlarla karşılaşmış olabilirsin. İşte bazı olası nedenler:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Kullanıcının internet bağlantısının yavaş veya dengesiz olduğu bir ağ sorunu var." }), "\n", _jsx(_components.li, { children: "Kullanıcı, uygulamanın eski bir sürümünü kullanıyor ve tarayıcı artık mevcut olmayan bir parçayı yüklemeye çalışıyor." }), "\n"] }), "\n", _jsx(_components.p, { children: "Genellikle, sayfanın basit bir yenilenmesi sorunu çözebilir, ancak bu kullanıcı için harika bir deneyim değildir. Kullanıcı başka bir rotaya geçerken beyaz bir ekran göründüğünü hayal et - bu, uygulaman için iyi bir izlenim bırakmaz." }), "\n", _jsx(_components.p, { children: "Hız ihtiyacı ile sorunsuz bir kullanıcı deneyimi arasında denge kurabilir miyiz? Tabii ki. Size nasıl yapılacağını göstereyim (Tabii ki TypeScript ile)." }), "\n", _jsxs(_components.h2, { id: "çözüm", children: ["Çözüm", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#çözüm", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kaba bir çözüm, tüm parçaların sürümlerini sunucuda kaydetmek olabilir, böylece \"eksik parça\" sorunu ortadan kalkar. Ancak uygulamanız büyüdükçe, bu çözüm artan disk alanı gereksinimleri nedeniyle uygulanamaz hale gelebilir ve ağ sorununu da çözmez." }), "\n", _jsxs(_components.p, { children: ["Bir yeniden denedikten veya sayfayı yeniledikten sonra sorun çözülüyorsa, bu çözümleri kodumuza ekleyebiliriz. Sorun genellikle kullanıcı başka bir rotaya geçtiğinde ortaya çıktığından, bunu kullanıcı fark etmeden çözebiliriz. Yapmamız gereken tek şey, ", _jsx(_components.code, { children: "React.lazy" }), " fonksiyonu etrafında yeniden denemeler ve yenilemelerle ilgilenecek bir sarmalayıcı oluşturmaktır."] }), "\n", _jsx(_components.p, { children: "Bu tür bir çözümü nasıl uygulayacağınızı anlatan harika makaleler zaten var, bu yüzden ben fikrin ve çözümün iç işleyişine odaklanacağım." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Son kod bu ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\ndeposunda" }), " mevcut ve ", _jsx(_components.code, { children: "react-safe-lazy" }), " paketi\n", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), "'de mevcuttur. Paket tamamen test edilmiş,\nson derece taşınabilir (minzip yaklaşık 700B) ve projenizde kullanılmaya hazırdır."] }) }), "\n", _jsxs(_components.h3, { id: "sarmalayıcıyı-oluşturun", children: ["Sarmalayıcıyı oluşturun", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sarmalayıcıyı-oluşturun", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["İlk adım, ", _jsx(_components.code, { children: "React.lazy" }), " fonksiyonu etrafında bir sarmalayıcı oluşturmaktır:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Doğru tür çıkarımı için genel kullanın\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "yeniden-denemeleri-işleyin", children: ["Yeniden denemeleri işleyin", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yeniden-denemeleri-işleyin", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Ağ sorunları için, ", _jsx(_components.code, { children: "importFunction" }), "'ı bir ", _jsx(_components.code, { children: "tryImport" }), " fonksiyonuna sararak yeniden denemeleri işleyebiliriz:"] }), "\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 // En fazla 3 kez yeniden dene\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: ["Basit görünüyor, değil mi? Yeniden denemeleri daha verimli bir şekilde işlemek için ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "üstel geri çekilme" }), " algoritmasını da uygulayabilirsiniz."] }), "\n", _jsxs(_components.h3, { id: "sayfa-yenilemelerini-işleyin", children: ["Sayfa yenilemelerini işleyin", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sayfa-yenilemelerini-işleyin", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Eski sürüm sorununu çözmek için hatayı yakalayabilir ve sayfayı yenileyebiliriz:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport fonksiyonu\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // React.lazy dönüş tipiyle eşleşmesi için sahte bir bileşen döndür\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ancak, bu uygulama çok tehlikelidir, çünkü hatanın bir yenileme ile çözülememesi durumunda sonsuz bir yenileme döngüsü yaratabilir. Bu arada, yenileme sırasında uygulama durumu kaybolacaktır. Bu yüzden sayfayı yenilemeye çalıştığımız mesajı saklamak için ", _jsx(_components.code, { children: "sessionStorage" }), "'ın yardımına ihtiyacımız var:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport fonksiyonu\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Bileşen başarıyla yüklendiğinde sessionStorage'ı temizle\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 // Yenilemeden sonra bileşen yüklenemezse hatayı fırlat\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Artık ", _jsx(_components.code, { children: "safeLazy" }), " fonksiyonundan gelen hatayı yakaladığımızda bir yenilemeyle çözülemeyecek bir sorun olduğunu biliyoruz."] }), "\n", _jsxs(_components.h3, { id: "aynı-sayfada-birden-fazla-lazy-bileşeni", children: ["Aynı sayfada birden fazla lazy bileşeni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aynı-sayfada-birden-fazla-lazy-bileşeni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Mevcut uygulamada gizli bir tuzak daha var. Eğer aynı sayfada birden fazla lazy bileşeniniz varsa, diğer bileşenler ", _jsx(_components.code, { children: "sessionStorage" }), " değerini sıfırlayabileceğinden sonsuz bir yenileme döngüsü hala meydana gelebilir. Bu sorunu çözmek için her bileşen için benzersiz bir anahtar kullanabiliriz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport fonksiyonu\n\n // Anahtar her bileşen için benzersiz olan herhangi bir şey olabilir\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Bileşen başarıyla yüklendiğinde sessionStorage'ı temizle\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 // Yenilemeden sonra bileşen yüklenemezse hatayı fırlat\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Artık her bileşenin kendi ", _jsx(_components.code, { children: "sessionStorage" }), " anahtarı olacak ve sonsuz yenileme döngüsü önlenecek. Çözümü incelemeye devam edebiliriz, örneğin:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Tüm anahtarları bir dizide toplamak, böylece sadece bir depolama anahtarı gerekli olur." }), "\n", _jsx(_components.li, { children: "Bir hata atmadan önce sayfayı bir defadan fazla yenilemeyi denemek için bir yenileme sınırı belirleyin." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ama sanırım fikri anladınız. Testler ve yapılandırmalarla tamamlanmış kapsamlı bir TypeScript çözümü ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub deposunda" }), " mevcuttur. ", _jsx(_components.code, { children: "React-safe-lazy" }), " paketini de ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), "'de yayımladım, böylece hemen projenizde kullanabilirsiniz."] }), "\n", _jsxs(_components.h2, { id: "sonuç", children: ["Sonuç", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sonuç", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Yazılım geliştirme hassas bir iştir ve en küçük detaylar bile çözmek için çaba gerektirebilir. Bu makalenin, ", _jsx(_components.code, { children: "React.lazy" }), " ile ilgili sorunları zarif bir şekilde ele almanıza ve uygulamanızın kullanıcı deneyimini iyileştirmenize yardımcı olabileceğini umuyorum."] })] }); } 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."); }