React.lazy ve Suspense ile kod bölme

Kullanıcılarınıza hiçbir zaman gereğinden fazla kod göndermeniz gerekmez. Bu nedenle, bunun asla yaşanmaması için paketlerinizi bölün.

Houssein Djirdeh

Jeff Posnick

Not: Kod bölmenin temel fikrini henüz bilmiyorsanız ilk olarak Kod bölmeyle JavaScript yüklerini azaltma kılavuzuna bakın.

React.lazy yöntemi, React uygulamasını tek bir cihazda koda bölmeyi bileşen düzeyinde sunulur.

import React, { lazy } from 'react';

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

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Neden yararlı?

Büyük bir React uygulaması genellikle birçok bileşenden oluşur. kitaplıklarını da içerir. Yükleme işlemini gerçekleştirmeye çalışmak için herhangi bir yalnızca ihtiyaç duyulduğunda uygulamanın farklı kısımlarına JavaScript paketi, onlar sayfayı yükler yüklemez kullanıcılarınıza gönderilir ilk sayfa. Bu durum, sayfa performansını önemli ölçüde etkileyebilir.

React.lazy işlevi, bir ve fazla çalışma gerektirmeyen ayrı JavaScript parçalarına uygulamanızı sağlar. Şunları yapabilirsiniz: Ardından, Suspense ile eşlerken yükleme durumlarına dikkat edin bir bileşenidir.

Gerilim

Kullanıcılara büyük bir JavaScript yükünün gönderilmesiyle ilgili sorun, özellikle daha zayıf cihazlarda, sayfanın yüklenmesi için gereken süre görebilirsiniz. Kod bölme ve geç yüklemenin son derece faydalı hale geldi.

Ancak her zaman, kullanıcıların işlem yaparak bir kod bölme bileşeni ağ üzerinden getiriliyor. Bu nedenle, kullanışlı bir yükleme durumu gösterir. React.lazy uygulamasını Suspense ile kullanma bu sorunu çözmeye yardımcı olur.

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

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

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense, herhangi bir Tepkiyi görüntülemenize olanak tanıyan fallback bileşenini kabul eder bileşenini yükleme durumu olarak ayarlayın. Aşağıdaki örnekte bunun işleyiş şekli gösterilmektedir. Avatar yalnızca düğme tıklandığında oluşturulur (bir istek ardından, askıya alınan AvatarComponent için gereken kodu almak üzere yapıldı. Bu arada yedek yükleme bileşeni gösterilir.

Burada, AvatarComponent öğesini oluşturan kod küçük ve neden yükleme döner simgesinin yalnızca kısa bir süre için gösterildiğini anlatacağım. Daha büyük çok daha uzun sürebilir. Özellikle de mobil cihazlarda zayıf ağ bağlantıları olabilir.

Bunun işleyiş şeklini daha iyi göstermek için:

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
• Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
• Ağ sekmesini tıklayın.
• Varsayılan olarak Kısıtlama yok şeklinde ayarlanan Hızlandırma açılır listesini tıklayın. Hızlı 3G'yi seçin.
• Uygulamadaki Beni Tıkla düğmesini tıklayın.

Yükleme göstergesi daha uzun süre gösterilecek. Bu kodun özellikle AvatarComponent öğesinin ayrı bir parça olarak getirilmesini sağlar.

Not: Tepki, şu anda bileşenler sunucu tarafında oluşturulurken Bekleme özelliğini desteklememektedir. Sunucuda oluşturma yapıyorsanız React belgelerinde önerilen loadable-components gibi başka bir kitaplık kullanmayı düşünün.

Birden fazla bileşeni askıya alma

Suspense ürününün başka bir özelliği de birden fazla kullanıcıyı askıya almanıza olanak sağlamasıdır. tümü geç yüklenmiş olsa bile yüklenmesini engelleyebilir.

Örneğin:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
    <MoreInfoComponent />
  </Suspense>
)

Bu, çalışırken birden fazla bileşenin oluşturulmasını geciktirmek için son derece yalnızca tek bir yükleme durumu gösteriliyor. Tüm bileşenler tamamlandıktan sonra kullanıcı bunları aynı anda görüyor.

Aşağıdaki yerleştirme öğesi ile bunu görebilirsiniz:

Not: Yükleme göstergesi biraz fazla mı hızlı görünüyor? Geliştirici Araçları'nda kısıtlanmış bir bağlantıyı tekrar simüle etmeyi deneyin.

Bu olmadan, aşamalı yükleme sorunuyla kolayca karşılaşabilirsiniz veya kullanıcı arayüzünün farklı bölümleri yükleme göstergesi. Bu durum, kullanıcı deneyimini daha sıkıcı hale getirebilir.

Not: Bileşenleri bölmek için Shold'u kullanmak zaten mümkün olsa da ve paket boyutlarını küçültmeyi kolaylaştırsa da React ekibi, bunu daha da artıracak yeni özellikler üzerinde çalışmaya devam ediyor. React 16.x yol haritası bu durumu daha ayrıntılı olarak açıklamaktadır.

Yükleme hatalarını işleme

Suspense, ağdayken geçici bir yükleme durumu görüntülemenize olanak tanır taleplerinin gizli tutulmasıdır. Peki bu ağ istekleri bir nedeni olabilir mi? İnternet bağlantınız olmayabilir veya web uygulamanız sürümlü bir URL'yi geç yükleme artık kullanılamaz hale gelir.

React'in bu tür yüklemeleri sorunsuz bir şekilde ele almak için standart bir kalıbı vardır hatalar: hata sınırı kullanılıyor. Belgelerde açıklandığı gibi Herhangi bir React bileşeni, (veya yaşam döngüsü yöntemlerinin static getDerivedStateFromError() veya componentDidCatch().

Geç yükleme hatalarını algılayıp işlemek için Suspense öğenizi sarmalayabilirsiniz bir ana bileşene sahip bir bileşendir. İç mekan hata sınırının render() yöntemi kullanıldığında, alt öğeleri olduğu gibi oluşturabilirsiniz. hata mesajı oluşturun veya bir şeyler ters giderse özel bir hata mesajı oluşturun:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

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

  static getDerivedStateFromError(error) {
    return {hasError: true};
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }

    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={renderLoader()}>
      <AvatarComponent />
      <InfoComponent />
      <MoreInfoComponent />
    </Suspense>
  </ErrorBoundary>
)

Sonuç

React'inize kod bölme işlemini nereden başlayacağınızdan emin değilseniz aşağıdaki adımları uygulayın:

1. Rota seviyesinde başlayın. Güzergahlar önemli noktaları belirlemenin en basit ayırabilmenizi sağlar. İlgili içeriği oluşturmak için kullanılan React dokümanları Suspense ile birlikte nasıl kullanılabileceğini göster react-router.
2. Sitenizdeki bir sayfada, yalnızca Belirli kullanıcı etkileşimleri (bir düğmeyi tıklama gibi). Bunları bölerek JavaScript yüklerinizi en aza indirir.
3. Ekran dışındaki ve yayın için kritik olmayan diğer belirtir.