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.
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.
![Bir chunk.js dosyasının indirilmesini gösteren Geliştirici Araçları ağ paneli](https://web.dev/static/articles/code-splitting-suspense/image/devtools-network-panel-sh-bab60da5120ad.png?authuser=6&hl=tr)
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:
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.
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:
- 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österreact-router
. - 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.
- Ekran dışındaki ve yayın için kritik olmayan diğer belirtir.