React Router'ın yavaş yüklenmesiyle ilgili temel sorun, doğru uygulanmadığı takdirde performans sorunlarına neden olabilmesidir. Geç yükleme, her bileşen için kodun ayrı ayrı yüklenmesi gerektiğinden, ilk sayfa yükleme süresini artırabilir. Ek olarak, bir bileşen sıklıkla kullanılmazsa, hiçbir zaman yüklenmeyebilir ve bu da kaynakların boşa harcanmasına neden olur. Son olarak, geç yüklemeyi desteklemeyen eski tarayıcılarda olası uyumluluk sorunları vardır.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. 'tepki'den React, { Suspense } içe aktarın;
// Bu satır, React kitaplığını ve Suspense bileşenini React kitaplığından içe aktarır.
2. 'react-router-dom'dan { BrowserRouter as Router, Route, Switch } dosyasını içe aktarın;
// Bu satır, tepki-yönlendirici-dom kitaplığından BrowserRouter, Route ve Switch bileşenlerini içe aktarır.
3. const Home = React.lazy(() => import('./Home'));
// Bu satır, Home adlı bir bileşeni bu dosyayla aynı dizindeki bir dosyadan (Uygulama bileşeni) dinamik olarak içe aktarmak için React'in yavaş yükleme özelliğini kullanan Home adlı bir sabit oluşturur.
4. const Hakkında = React.lazy(() => import('./About'));
// Bu satır, bu dosyayla (Uygulama bileşeni) aynı dizindeki bir dosyadan Hakkında adlı bir bileşeni dinamik olarak içe aktarmak için yavaş yüklemeyi kullanan Hakkında adlı bir sabit oluşturur.
const İletişim = React.lazy(() => import('./Contact')); // Bu satır, Temas adlı bir bileşeni bu dosyayla aynı dizindeki bir dosyadan (Uygulama bileşeni) dinamik olarak içe aktarmak için tembel yüklemeyi kullanan Kişi adlı bir sabit oluşturur.
5. işlev Uyg() { dönüş ( // Bu, daha önce içe aktarılan Yönlendirici etiketine sarılmış JSX kodunu döndüren bir ok işlevidir.
6.Yükleniyor…
}> //Bu Askıya Alma etiketi, tüm rotalarımızı Loading… herhangi bir rotanın yüklenmesi zaman alıyorsa yedek destekleriyle sarar
7. //Anahtar etiketi aynı anda yalnızca bir rotanın oluşturulmasını sağlar
8. //Bu Rota, "/" tam yolu eşleştiğinde Ana Bileşeni oluşturacaktır
9. //Bu Rota, "/about" yolu eşleştiğinde Bileşen Hakkında'yı oluşturacaktır
10 //Bu Rota, “/contact” yolu eşleştiğinde Kişi Bileşenini oluşturacaktır) } varsayılan Uygulamayı dışa aktar; //Son olarak tüm etiketleri kapatıyoruz ve uygulamamızı dışa aktarıyoruz
Yavaş yükleme sorunu
Tembel yükleme, belirli bileşenlerin yüklenmesini ihtiyaç duyulana kadar geciktirmek için kullanılan bir tekniktir. Bu, herhangi bir zamanda yalnızca gerekli olanı yükleyerek bir uygulamanın performansını artırmaya yardımcı olabilir. Ancak, kutudan çıkar çıkmaz tembel yüklemeyi desteklemediğinden, React Router kullanılırken bu bir sorun olabilir. Bu soruna geçici bir çözüm bulmak için, geliştiricilerin rotalarını geç yüklemeyi etkinleştirecek şekilde el ile yapılandırması gerekir. Bu, karmaşık ve zaman alan görevler olabilen dinamik içe aktarma ve kod bölmeyi ayarlamayı içerebilir. Ek olarak, React Router ile tembel yüklemeyi düzgün bir şekilde uygulamak için React Loadable gibi bazı kitaplıkların kullanılması gerekebilir.
React tembel yük nedir
React lazy load, talep üzerine bileşenlerin yüklenmesine izin veren React Router'ın bir özelliğidir. Bu, tüm bileşenleri bir kerede yüklemek yerine, gerektiğinde yalnızca gerekli bileşenlerin yüklenmesi anlamına gelir. Bu, ilk sayfa yükleme süresini azaltmaya ve performansı artırmaya yardımcı olur. Ayrıca, her bir bileşen bağımsız olarak yüklenebildiği için daha iyi kod organizasyonuna ve endişelerin ayrılmasına olanak tanır.
React lazy'i yönlendiricimde nasıl kullanırım?
React lazy, bileşenleri dinamik olarak içe aktarmanıza izin veren bir React özelliğidir. Bu, tüm bileşenleri önceden yüklemek yerine gerektiği gibi yükleyebileceğiniz anlamına gelir. Bu, büyük uygulamalarda performansı optimize etmek için yararlı olabilir.
React Router'da yönlendiricinizde React lazy kullanmak için, tembel yüklemek istediğiniz bileşeni dinamik bir içe aktarma çağrısına sarmanız gerekir. Örneğin:
const MyComponent = React.lazy(() => import('./MyComponent'));
Ardından, rotalarınızı tanımlarken, MyComponent bileşenini Route bileşenine şu şekilde iletmeniz yeterlidir:
Bu, React Router'ın söz konusu rotaya giderken MyComponent bileşenini dinamik olarak yüklemesine neden olacaktır.
