React uygulamanızın yüklenmesi çok mu yavaş veya çok mu uzun sürüyor? Öyleyse, kod bölme olarak bilinen bir teknik kullanmak isteyebilirsiniz. Bu teknik, React uygulamalarının yük hızını ve performansını iyileştirmede çok etkilidir. Ancak kod bölme nedir? Ve nasıl yapılır?

Kod Bölme Nedir?

Tipik bir React uygulaması düzinelerce bileşenden (ve koddan) oluşur. Ancak bu bileşenlerin çoğunu ilk kez yüklediğinizde yüklemeniz gerekmez. Kod bölme, uygulamanızın farklı bölümlerini ayırmayı ve bunları yalnızca gerektiğinde yüklemeyi gerektirir. Bu, tüm uygulamayı bir kerede yüklemekten çok daha verimlidir.

Üç sayfası olan bir React uygulamasını düşünün: ana sayfa, hakkında sayfası ve ürünler sayfası. Ana sayfada olduğunuzda, hakkında sayfasını veya ürünler sayfasını yüklemenin bir anlamı yoktur. Çünkü aslında henüz o sayfalarda değilsin. Kod bölme fikri, kodu yalnızca gerektiğinde yüklediğinizden emin olmaktır.

Web tarayıcınızda bir web sayfası açın ve ardından DevTools'u açın (Google Chrome'da açmak için klavyenizde F12'yi tıklayabilirsiniz). Ardından, Kaynak sekmesine gidin. Orada, sayfada gezinirken indirilen tüm kodu bulacaksınız. Tarayıcı, kod bölme olmadan projenizdeki tüm dosyaları ilk sayfa yüklemesinde indirir. Bu, çok fazla dosya içeriyorsa web sitenizi yavaşlatabilir.

Kod bölme, projeniz gittikçe büyümeye başladığında özellikle kullanışlı hale gelir. Bunun nedeni, tüm uygulama dosyalarının bir kerede indirilmesinin çok uzun zaman alabilmesidir. Yani bunu bölmek oldukça faydalı olacak.

Kod bölmenin en iyi yanı, işlevlerin yanı sıra bileşenlerin yüklenmesini geciktirebilmenizdir. Bizim ReactJS'ye giriş kılavuzu Bilgi tazelemeye ihtiyaç duymanız durumunda bileşenleri ve işlevleri derinlemesine açıklar.

Kod Bölme İşlevleri: Dinamik İçe Aktarmayı Kullanma

Aşağıdaki durumu göz önünde bulundurun. Ana sayfanızın bir düğmesi olmasını istiyorsunuz. Düğmeye tıkladığınızda, 2 ve 2'nin toplamını (4 olan) uyarmak istiyorsunuz. Yani bir oluştur Anasayfa.js bileşenini seçin ve ana sayfanızın görünümünü tanımlayın.

Bu durumda iki seçeneğiniz var. İlk olarak, üstteki sayıları eklemek için kodu içe aktarabilirsiniz. Anasayfa.js dosya. Ama sorun burada. Dosyanın en üstündeki işlevi içe aktarırsanız, düğmeyi tıklatmasanız bile kod yüklenir. yüklemek daha iyi bir yaklaşım olacaktır. toplam() yalnızca düğmeye tıkladığınızda çalışır.

Bunu başarmak için dinamik bir içe aktarma gerçekleştirmeniz gerekir. Bu, içe aktaracağınız anlamına gelir. toplam() düğme öğesinde satır içi işlev. İşte aynı kod:

ihracatvarsayılanişlevEv() { 
geri dönmek ( 
"Ev"> 
Anasayfa</h1>
 {
içe aktarmak("../toplam.js").Daha sonra((modül) => {
 uyarı(modül.toplam(2, 2))
 })
 }}
 >
 Her iki sayıyı topla
 </button> 
 </div> 
 ); 
}

Artık tarayıcı yalnızca toplam.js Düğmeye tıkladığınızda modül. Bu, ana sayfanın yükleme süresini iyileştirir.

Kod Bölme Bileşenleri: React.lazy ve Suspense Kullanımı

React'te bileşenleri şu şekilde bölebilirsiniz: tembel() işlev. Kod bölme işlemini gerçekleştirmek için en iyi yer yönlendiricinizin içi olacaktır. Çünkü burası, uygulamanızdaki rotalara bileşenleri eşlediğiniz yerdir. Rehberimizi şuradan okuyabilirsiniz: React Router ile tek sayfalık bir uygulama nasıl oluşturulur? tazelemeye ihtiyacınız varsa.

Uygulamanızın bir Ev, Hakkında, Ve Ürünler bileşen. sen oradayken Ev bileşen, yüklemenin bir anlamı yok Hakkında bileşen veya Ürünler bileşen. Bu yüzden onları uzaklara ayırmanız gerekir. Ev rota. Aşağıdaki kod, bunun nasıl başarılacağını gösterir:

İlk olarak, gerekli işlevleri ve bileşenleri sunucudan içe aktarmanız gerekir. tepki Ve tepki-yönlendirici-dom modüller:

içe aktarmak { Rotalar, Rota, Çıkış, Bağlantı } itibaren"tepki-yönlendirici-dom";
içe aktarmak { tembel, Gerilim } itibaren"tepki";

Ardından, bileşenleri kullanarak dinamik olarak içe aktarmanız gerekir. tembel() işlev:

sabit ev = tembel(() =>içe aktarmak("./bileşenler/Giriş"));
sabit Hakkında = tembel(() =>içe aktarmak("./bileşenler/Hakkında"));
sabit Ürünler = tembel(() =>içe aktarmak("./bileşenler/Ürünler"));

Ardından, düzeni (gezinme menüsü) ayarlayın. Kullan geçerli rotaya karşılık gelen bileşeni oluşturmak için bileşen (Ev, Hakkında, veya Ürünler bileşen):

işlevGezinti Paketleyici() {
geri dönmek (
 <>

Bileşenleri içine sardığımızı görebilirsiniz.. Bu, React'e içindeki her şeyin tembel yüklenme potansiyeline sahiptir, bu da hemen kullanılamayabilir anlamına gelir. bu sebeple, gerilim bileşenin bir geri çekilmek mülk. Bizim durumumuzda değer, "Yükleniyor..." yazan basit bir metindir. Yani sayfaların her biri indirilirken ekranda yükleniyor yazacak.

Son olarak, rotayı ayarlayın:

ihracatvarsayılanişlevUygulama() {
geri dönmek (

"/" eleman={}>
"/" eleman={} />
"/ürünler" eleman={} />
"/hakkında" eleman={} />
 </Route>
 </Routes>
 );
}

Artık ana sayfayı ziyaret ettiğinizde, tarayıcı yalnızca Anasayfa.js dosya. Aynı şekilde üzerine tıkladığınızda Hakkında Hakkında sayfasını ziyaret etmek için gezinme menüsündeki bağlantı, tarayıcı yalnızca Hakkında.js dosya. Bu, Ürünler sayfası için de aynıdır.

Koşullu Kod Bölme

Çoğu zaman, sayfanızda yalnızca belirli kullanıcılar için geçerli olan içeriğe sahip olabilirsiniz. Örneğin, ana sayfanızda, yönetici kullanıcılarına özel yönetici verilerinin bulunduğu bir bölüme sahip olabilirsiniz. Bu, yönetici kullanıcılar için görünen ancak normal kullanıcılar için görünmeyen bir yönetici panosu olabilir.

Bu durumda, tüm bu verileri her seferinde göstermek istemezsiniz. Bu durumda, bu bilgiyi yalnızca bu kişi bir yönetici ise gösterdiğinizden emin olmak için kod bölme tekniğini kullanabilirsiniz.

İşte bu kodun nasıl görüneceği:

içe aktarmak { tembel, Gerilim } itibaren"tepki";
sabit AdminData = tembel(() =>içe aktarmak("./AdminData"));
ihracatvarsayılanişlevEv() { 
sabit [isAdmin, setIsAdmin] = useState(YANLIŞ)
geri dönmek ( 

"Ev"> 
Anasayfa</h1>
 setIsAdmin(önceki => !önceki)}>
 Yöneticiyi Değiştir
 </button> 

yükleniyor...</h1>}>
 {Admin mi? <Yönetici Verileri />: <h2> Yönetici değil h2>} 
 </Suspense>
 </div> 
 ); 
}

Şimdi, geçiş düğmesine tıkladığınızda, isAdmin ayarlanacak doğru. Sonuç olarak, uygulama şunları gösterecektir: tembelce yükleniyor. Ancak yönetici kullanıcı değilseniz uygulama asla indirilmez AdminData.js çünkü buna ihtiyacı olmayacak.

Koşullu kod bölme, aynı kavramı kullanır React'te koşullu oluşturma.

Gelişmiş Kod Bölme Kavramları

Kodu bölerken etkinleştirebileceğiniz gelişmiş bir teknik geçişlerdir. bu useTransition() kanca, güncelleme tamamlanana kadar kullanıcı arayüzünüzü değiştirmeyecek acil olmayan güncellemeler yapmanızı sağlar.

İlk olarak, kancayı içe aktarırsınız:

içe aktarmak {useTransition} itibaren"tepki"

Sonra geri dönen kancayı çağırırsın beklemede Ve Başlangıç ​​Geçişi:

sabit [isPending, startTransition] = useTransition()

Son olarak, durumunuzu güncellemek için kodu içine sarın geçişe başla():

geçişe başla(() => {
 setIsAdmin((önceki) => !önceki)
})

Artık gerçek kullanıcı arabiriminiz, tarayıcı geçişi tamamlayana kadar geri dönüş değerini (yükleme metni) göstermeyecektir. Bu, herhangi bir veri göstermeye çalışmadan önce tarayıcının tüm yönetici verilerini indirmesini bekleyeceği anlamına gelir.

Reaksiyon Performansını Optimize Etmenin Diğer Yolları

Bu makale, React uygulamalarınızın performansını iyileştirme yöntemi olarak kod bölmeyi ele aldı. Ancak, size sağlam uygulamalar oluşturmak için gerekli bilgileri verebilecek birkaç başka yöntem de vardır.