M
MLOG
React Lazy Loading: Bileşen Kod Bölümleme ile Performansı Artırma | MLOG | MLOG}> ); } export default App;

Bu örnekte, Home, About ve Contact bileşenleri tembel yüklenir. Kullanıcı belirli bir rotaya gittiğinde, ilgili bileşen eşzamansız olarak yüklenecektir. Suspense bileşeni, bileşen getirilirken bir yükleme göstergesinin görüntülenmesini sağlar.

İleri Teknikler ve Dikkat Edilmesi Gerekenler

Hata Sınırları (Error Boundaries)

Hata sınırları, alt bileşen ağacının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve çöken bileşen ağacı yerine bir yedek kullanıcı arayüzü görüntüleyen React bileşenleridir. Bunları, tembel yüklenen bileşenlerin yüklenmesi sırasında oluşabilecek hataları zarif bir şekilde yönetmek için kullanabilirsiniz.


import React, { lazy, Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Bir sonraki render'ın yedek UI'ı göstermesi için state'i güncelleyin.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama servisine de gönderebilirsiniz
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // İstediğiniz özel yedek UI'ı render edebilirsiniz
      return 
Bir şeyler ters gitti.
;
    }

    return this.props.children; 
  }
}

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    
      Yükleniyor...}>
        
      
    
  );
}

export default App;

Bu örnekte, ErrorBoundary bileşeni Suspense bileşenini sarmalar. MyComponent'in yüklenmesi veya render edilmesi sırasında bir hata oluşursa, ErrorBoundary hatayı yakalayacak ve yedek kullanıcı arayüzünü gösterecektir.

Lazy Loading için En İyi Uygulamalar

Sektörlerden Örnekler

React lazy loading ve kod bölümlemenin faydaları çeşitli sektörlere yayılmaktadır. İşte birkaç örnek:

React.lazy ve Suspense'in Ötesi

React.lazy ve Suspense, lazy loading uygulamak için basit bir yol sağlarken, diğer kütüphaneler ve teknikler daha gelişmiş özellikler ve kontrol sunabilir:

Sonuç

Bileşen kod bölümleme ile React lazy loading, React uygulamalarınızın performansını optimize etmek için güçlü bir tekniktir. Bileşenleri isteğe bağlı yükleyerek, ilk yükleme sürelerini önemli ölçüde azaltabilir, kullanıcı deneyimini iyileştirebilir ve kaynak tüketimini düşürebilirsiniz. React.lazy ve Suspense'ten yararlanarak, React projelerinizde lazy loading'i kolayca uygulayabilir ve daha hızlı, daha duyarlı web uygulamaları oluşturabilirsiniz. Sorunsuz bir kullanıcı deneyimi sağlamak için hata yönetimini, yükleme göstergelerini ve diğer ileri teknikleri göz önünde bulundurmayı unutmayın. En iyi sonuçları elde etmek için uygulamanızın performansını sürekli olarak izleyin ve kod bölme stratejinizi iyileştirin.

Lazy loading'in gücünü benimseyin ve daha hızlı, daha verimli ve daha kullanıcı dostu bir web uygulamasının potansiyelini ortaya çıkarın.