Türkçe

Lazy loading ve bileşen kodu bölümleme ile React uygulamalarınız için daha hızlı ilk yükleme süreleri ve gelişmiş performans elde edin. Pratik teknikleri ve en iyi uygulamaları öğrenin.

React Lazy Loading: Optimize Edilmiş Performans için Bileşen Kodu Bölümleme

Günümüzün hızlı dijital dünyasında, web sitesi performansı her şeyden önemlidir. Kullanıcılar anında sonuç bekler ve yavaş yükleme süreleri hüsrana, terk edilmiş sepetlere ve olumsuz bir marka imajına yol açabilir. React uygulamaları için, akıcı ve ilgi çekici bir kullanıcı deneyimi sunmak adına performansı optimize etmek kritik öneme sahiptir. Bunu başarmanın güçlü bir tekniği de bileşen kodu bölümleme ile lazy loading'dir.

Lazy Loading ve Kod Bölümleme Nedir?

Lazy loading (tembel yükleme), kaynakların (görseller, betikler ve bileşenler gibi) ilk sayfa yüklemesinde hepsi bir anda yüklenmek yerine, yalnızca ihtiyaç duyulduğunda yüklenmesi tekniğidir. Bu, başlangıçta indirilmesi ve ayrıştırılması gereken veri miktarını önemli ölçüde azaltarak daha hızlı ilk yükleme süreleri ve daha iyi algılanan performans sağlar.

Kod bölümleme (Code splitting), uygulamanızın kodunu daha küçük, yönetilebilir parçalara (veya paketlere) ayırma işlemidir. Bu, tarayıcının yalnızca ilk görünüm için gerekli olan kodu indirmesine olanak tanır ve diğer kodların yüklenmesini gerçekten gerekene kadar erteler. Lazy loading, belirli bileşenleri yalnızca render edilmek üzereyken yüklemek için kod bölümlemeden yararlanır.

React'te Neden Lazy Loading ve Kod Bölümleme Kullanılmalı?

İşte React projelerinize lazy loading ve kod bölümlemeyi dahil etmeyi düşünmeniz için nedenler:

React'te Lazy Loading Nasıl Uygulanır?

React, React.lazy ve Suspense bileşenlerini kullanarak lazy loading için yerleşik destek sağlar. İşte adım adım bir kılavuz:

1. React.lazy() Kullanımı

React.lazy(), bileşenleri dinamik olarak içe aktarmanıza olanak tanır ve kodunuzu etkili bir şekilde ayrı parçalara böler. Bu fonksiyon, bileşene çözümlenen bir Promise döndüren import() çağrısını yapan bir fonksiyon alır.


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

Bu örnekte, MyComponent yalnızca render edilmek üzereyken yüklenecektir.

2. <Suspense> ile Sarmalama

React.lazy() asenkron olan dinamik import'ları kullandığından, lazy-loaded bileşeni bir <Suspense> bileşeni ile sarmalamanız gerekir. <Suspense> bileşeni, bileşen yüklenirken bir yedek kullanıcı arayüzü (örneğin, bir yükleme göstergesi) görüntülemenizi sağlar.


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 {alt};
};

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

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:

Ö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.