React ve Angular’da Lazy Loading ile Hızlı Sayfa Yükleme

Web uygulamalarında sayfa yükleme süreleri, kullanıcı deneyimi ve SEO açısından kritik bir rol oynar. React ve Angular gibi modern framework’lerde Lazy Loading tekniği kullanarak uygulamanızın performansını artırabilirsiniz.

1. Lazy Loading Nedir?

• Lazy Loading, yalnızca ihtiyaç duyulan modüllerin veya bileşenlerin yüklenmesini sağlar.

• Sayfanın ilk yükleme süresini azaltır ve kullanıcı deneyimini iyileştirir.

2. React’te Lazy Loading Kullanımı

• React 16.6 ve üstü sürümlerde React.lazy() ve Suspense ile komponentleri lazy load yapabilirsiniz.

  Örnek kullanım:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Yükleniyor...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

3. Angular’da Lazy Loading Kullanımı

• Angular CLI ile modülleri ayrı modül dosyalarında oluşturup, loadChildren ile lazy load edebilirsiniz.

  Örnek kullanım:

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

4. Performans Avantajları

• İlk yükleme süresini düşürür.

• Gereksiz kaynakların yüklenmesini engeller.

• Sayfa geçişlerinde daha akıcı bir deneyim sağlar.

5. Ek İpuçları

• Lazy load edilen modüller için küçük boyutlu chunk’lar oluşturun.

• Önceden tahmin edilen kullanıcı davranışına göre bazı modülleri prefetch edin.