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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Yükleniyor...

Bu örnekte, MyComponent yüklenirken Yükleniyor... mesajı görüntülenecektir. Bileşen yüklendiğinde, yedek kullanıcı arayüzünün yerini alacaktır.

3. Pratik Örnek: Büyük Bir Resim Galerisini Lazy Loading ile Yükleme

Büyük bir resim galeriniz olduğunu düşünelim. Tüm resimleri bir kerede yüklemek performansı önemli ölçüde etkileyebilir. İşte React.lazy() ve <Suspense> kullanarak resimleri nasıl lazy load yapabileceğiniz:

import React, { Suspense } from 'react';

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

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Resim 1' },
    { id: 2, src: 'image2.jpg', alt: 'Resim 2' },
    { id: 3, src: 'image3.jpg', alt: 'Resim 3' },
    // ... daha fazla resim
  ];

  return (
    

      {images.map(image => (
        Resim yükleniyor...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Ve Image.js bileşeni:

import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

Bu örnekte, her resim bir <Suspense> bileşeni ile sarmalanmıştır, bu nedenle her resim yüklenirken bir yükleme mesajı görüntülenecektir. Bu, resimler indirilirken tüm sayfanın engellenmesini önler.

İleri Düzey Teknikler ve Dikkat Edilmesi Gerekenler

1. Hata Sınırları (Error Boundaries)

Lazy loading kullanırken, yükleme işlemi sırasında oluşabilecek potansiyel hataları ele almak önemlidir. Hata sınırları, bu hataları yakalamak ve bir yedek kullanıcı arayüzü görüntülemek için kullanılabilir. Şunun gibi bir hata sınırı bileşeni oluşturabilirsiniz:

import React, { Component } from 'react';

class ErrorBoundary extends 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) {
      // Herhangi bir özel yedek UI render edebilirsiniz
      return 
Bir şeyler ters gitti.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ardından <Suspense> bileşenini <ErrorBoundary> ile sarın:

  Yükleniyor...}>
    
  

MyComponent yüklenirken bir hata oluşursa, <ErrorBoundary> bunu yakalayacak ve yedek kullanıcı arayüzünü gösterecektir.

2. Sunucu Tarafında Oluşturma (SSR) ve Lazy Loading

Lazy loading, uygulamanızın ilk yükleme süresini iyileştirmek için sunucu tarafında oluşturma (SSR) ile birlikte de kullanılabilir. Ancak, bazı ek yapılandırmalar gerektirir. Sunucunun dinamik import'ları doğru bir şekilde işleyebildiğinden ve lazy-loaded bileşenlerin istemci tarafında düzgün bir şekilde "hydrate" edildiğinden emin olmanız gerekir.

Next.js ve Gatsby.js gibi araçlar, SSR ortamlarında lazy loading ve kod bölümleme için yerleşik destek sağlayarak süreci çok daha kolay hale getirir.

3. Lazy-Loaded Bileşenleri Önceden Yükleme

Bazı durumlarda, lazy-loaded bir bileşeni gerçekten ihtiyaç duyulmadan önce önceden yüklemek isteyebilirsiniz. Bu, yakında render edilmesi muhtemel olan bileşenler için yararlı olabilir, örneğin sayfanın alt kısmında bulunan ancak kullanıcının kaydırarak görmesi muhtemel olan bileşenler. Bir bileşeni import() fonksiyonunu manuel olarak çağırarak önceden yükleyebilirsiniz:

import('./MyComponent'); // MyComponent'i önceden yükle

Bu, bileşeni arka planda yüklemeye başlayacaktır, böylece gerçekten render edildiğinde daha hızlı bir şekilde kullanılabilir olacaktır.

4. Webpack Magic Yorumları ile Dinamik Import'lar

Webpack'in "magic yorumları", oluşturulan kod parçalarının adlarını özelleştirmenin bir yolunu sunar. Bu, uygulamanızın paket yapısını hata ayıklama ve analiz etme konusunda yardımcı olabilir. Örneğin:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Bu, genel bir ad yerine "my-component.js" (veya benzeri) adında bir kod parçası oluşturacaktır.

5. Sık Karşılaşılan Hatalardan Kaçınma

• Aşırı Bölümleme: Kodunuzu çok fazla küçük parçaya bölmek, birden fazla ağ isteği yapmanın getirdiği ek yük nedeniyle performansı aslında düşürebilir. Uygulamanız için işe yarayan bir denge bulun.
• Yanlış Suspense Yerleşimi: İyi bir kullanıcı deneyimi sağlamak için <Suspense> sınırlarınızın uygun şekilde yerleştirildiğinden emin olun. Mümkünse tüm sayfaları <Suspense> ile sarmaktan kaçının.
• Hata Sınırlarını Unutma: Lazy loading sırasında oluşabilecek potansiyel hataları ele almak için daima hata sınırları kullanın.

Gerçek Dünya Örnekleri ve Kullanım Alanları

Lazy loading, React uygulamalarının performansını artırmak için çok çeşitli senaryolara uygulanabilir. İşte bazı örnekler:

• E-ticaret Siteleri: Ürün resimlerini, videolarını ve ayrıntılı ürün açıklamalarını lazy loading ile yüklemek, ürün sayfalarının ilk yükleme süresini önemli ölçüde iyileştirebilir.
• Bloglar ve Haber Siteleri: Resimleri, gömülü videoları ve yorum bölümlerini lazy loading ile yüklemek, okuma deneyimini geliştirebilir ve hemen çıkma oranlarını azaltabilir.
• Gösterge Panelleri ve Yönetici Panelleri: Karmaşık çizelgeleri, grafikleri ve veri tablolarını lazy loading ile yüklemek, gösterge panellerinin ve yönetici panellerinin yanıt verme hızını artırabilir.
• Tek Sayfa Uygulamaları (SPA'lar): Rotaları ve bileşenleri lazy loading ile yüklemek, SPA'ların ilk yükleme süresini azaltabilir ve genel kullanıcı deneyimini iyileştirebilir.
• Uluslararasılaştırılmış Uygulamalar: Yerel ayara özgü kaynakları (metin, resim vb.) yalnızca kullanıcının dili için gerektiğinde yükleme. Örneğin, Almanya'daki bir kullanıcı için Almanca çevirileri ve İspanya'daki bir kullanıcı için İspanyolca çevirileri yüklemek.

Örnek: Uluslararası E-ticaret Sitesi

Küresel olarak ürün satan bir e-ticaret sitesi hayal edin. Farklı ülkelerin farklı para birimleri, dilleri ve ürün katalogları olabilir. Her ülke için tüm verileri baştan yüklemek yerine, lazy loading kullanarak yalnızca kullanıcının konumuna özgü verileri siteyi ziyaret ettiklerinde yükleyebilirsiniz.

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Kullanıcının ülkesini belirleyen fonksiyon

  return (
    Bölgeniz için içerik yükleniyor...}>
      
      
    
  );
}

Sonuç

Lazy loading ve bileşen kodu bölümleme, React uygulamalarının performansını optimize etmek için güçlü tekniklerdir. Bileşenleri yalnızca ihtiyaç duyulduğunda yükleyerek ilk yükleme süresini önemli ölçüde azaltabilir, kullanıcı deneyimini iyileştirebilir ve SEO'nuzu geliştirebilirsiniz. React'in yerleşik React.lazy() ve <Suspense> bileşenleri, projelerinizde lazy loading uygulamanızı kolaylaştırır. Küresel bir kitle için daha hızlı, daha duyarlı ve daha ilgi çekici web uygulamaları oluşturmak için bu teknikleri benimseyin.

Lazy loading uygularken her zaman kullanıcı deneyimini göz önünde bulundurmayı unutmayın. Bilgilendirici yedek kullanıcı arayüzleri sağlayın, olası hataları zarif bir şekilde ele alın ve istediğiniz sonuçları elde ettiğinizden emin olmak için uygulamanızın performansını dikkatlice analiz edin. Farklı yaklaşımları denemekten ve özel ihtiyaçlarınız için en iyi çözümü bulmaktan korkmayın.