React Bundle Size Nasıl Düşürülür? (Code Splitting, React.lazy & Suspense)

Bir React projesi yayınlanmadan önce derlenmesi ve tüm bileşen dosyaları tek bir bundle (demet) haline getirilmesi gerekir. Bu yazıda React sitenizin açılış hızını artırabilecek ve ilk aşamada yüklenen dosya boyutunu düşerecek bir yöntemi anlatmak istiyorum.

Bu yazının içeriği, React Dersleri kanalındaki ilgili videonun metni olarak hazırlanmıştır. Örneği detaylı incelemek için videoya göz atabilirsiniz.

Code-splitting neden gereklidir?

Uygulamanızın boyutu büyüdükçe ve özellikle kullandığınız üçüncü parti paketlerin sayısı arttıkça bundle yani derlenen demetin boyutu da büyür.

Temelde React uygulamaları birer SPA (single page application – tek sayfa uygulama) olduğu için, bu demetin tamamı kullanıcı sitenize ilk giriş yaptığında tek seferde yüklenir ve uygulamanın tamamı tek bir JavaScript dosyası olarak sunulur.

İşte bu aşamada kullanıcının ilk yüklediği demetin boyutunu düşürüp, ilk render’da görünmeyen bileşenleri kullanıcı o bileşenleri göreceği adrese gidene kadar yüklememek için code-splitting dediğimiz yönteme başvuruyoruz.

Code splitting sayesinde, import edilen her bir bileşen ayrı bir demet JavaScript dosyası olarak derleniyor. Kullanıcı sitenize ilk bağlandığında açılan sayfada göreceği bileşenleri yüklüyor. Herhangi bir linke tıkladığında, tıkladığı sayfadaki bileşenlerin demetleri render aşamasında yükleniyor.

Bu işlemi import aşamasında React.lazy fonksiyonu sayesinde yapıyoruz.

Şimdi üç ana bileşenden oluşan bir uygulamamız olsun.

İlk açılan sayfada Anasayfa bileşeni yüklensin. Code-splitting yapmadığımızda, kullanıcı Hakkımızda ve İletişim bileşenlerini de ilk render aşamasında yükleyecektir. Bunun kontrolünü konsolu açıp Sources sekmesinden yapabiliriz (`GENERATE_SOURCEMAP=false` olmadığından emin olun).

Bu aşamada uygulamanızın ilk yüklenme süresi düşük olsa da bundan sonraki sayfa geçişleri çok hızlı bir şekilde gerçekleşecektir çünkü kullanıcı zaten bütün bileşenleri ilk render aşamasında indirmişti.

Ancak code-splitting yaptıktan sonra açılışı hızlandırdığımız gibi diğer sayfaların açılma hızını da göreceli olarak düşürmüş olabiliriz. Bu hız o sayfalardaki bileşenlerin boyutuna ve kullanıcının internet hızına bağlıdır.

Açılış hızı SEO açısından önemli olduğu gibi kullanıcının siteniz hakkındaki ilk izlenimini de etkileyeceğinden, diğer sayfaların açılmasından daha önemlidir diyebilirim. Buna karşı çıkanlar olabilir ancak benim görüşüm açılış hızının daha önemli olduğu yönünde. Siz de kendi araştırmanızı yapıp uygulamanız hakkında kendi kararlarınızı vermelisiniz.

Adım adım code-splitting uygulanması

1. Import ifadelerinizi güncelleyin

Ayrı bir demek halinde yüklemek istediğiniz bileşenleri React.lazy metoduyla import etmeniz gerekir. Bu metod parametre olarak bir fonksiyon alır ve buraya girdiğiniz fonksiyon import metodunu kullanarak bileşeninizi mevcut dosyaya dahil eder.

// eski
import Hakkimizda from "./Hakkimizda";

// yeni
const Hakkimizda = React.lazy(() => import("./Hakkimizda"));

NOT: React.lazy fonksiyonu şimdilik yalnızca default export edilen bileşenlerle kullanılabiliyor.

2. Suspense bileşeninden faydalanın

Lazy import yöntemiyle aktardığınız bileşenler Promise aracılığıyla, yani asynchronous olarak yüklenir. Bu yüzden o bileşenler yüklenene kadar ekranda yükleme işleminin gerçekleştiğine dair kullanıcıyla bir bileşen göstermemiz gerekir. Bunun için React’ın Suspense bileşeninden faydalanıyoruz.

Suspense, sizin bileşeniniz render edilene kadar uygulamanızı bekletiyor ve bu esnada sizin fallback parametresine girdiğiniz bileşeni gösteriyor.

Bizim uygulamamızda Suspense, React.lazy ile import ettiğimiz bileşenler yüklenene kadar ekranın boş kalmamasını sağlayacak.

<Suspense fallback={<p>Loading...</p>}>
	// Lazily imported components
</Suspense>

İşlem tamam!

Bu yöntemle uygulamalarınızın açılış hızını artırabilir, kullanıcınızın uygulamanızı ilk açtığı andaki dosya transfer miktarını düşürebilirsiniz.

Bu yöntem LightHouse (eski adıyla Google PageSpeed) raporlarındaki “remove unused javascript” uyarısının kaldırılmasına da yardımcı olur.

Leave a Reply