Code Splitting

Okunuşu: kod spliting

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Code splitting, bir web uygulamasının JavaScript'ini istenince yüklenen küçük parçalara bölen tekniktir; böylece ilk sayfa yalnızca gereken kodu indirir.

Code splitting nedir?

Code splitting olmadan bir bundler tüm uygulamayı tek bir büyük JavaScript dosyasına koyabilir; bu durumda ana sayfayı açan bir ziyaretçi ayarlar, yönetim ekranları ve nadiren kullanılan her özellik için de kod indirir. Code splitting çıktıyı chunk adı verilen birkaç küçük dosyaya böler ve her birini yalnızca gerektiğinde yükler. Tarayıcının indirip ayrıştıracağı ve çalıştıracağı kod azaldığı için ilk sayfa daha erken etkileşimli hale gelir.

Ana araç, bir promise döndüren ve bundler'a import edilen modülü ayrı bir chunk'a koymasını söyleyen dinamik import() ifadesidir. Framework'ler bunun üzerine kurulur: rota tabanlı bölme her sayfaya otomatik olarak kendi chunk'ını verir; Suspense ile React.lazy() gibi bileşen düzeyinde bölme ise grafikler, haritalar veya zengin metin editörleri gibi ağır bileşenleri yalnızca göründüklerinde yükler. Bundler'lar ayrıca paylaşılan bağımlılıkları ortak chunk'lara taşır; böylece tarayıcı bunları bir kez önbelleğe alıp sayfalar arasında yeniden kullanabilir.

Code splitting, oynat tuşuna basmadan önce tüm sezonu indirmenizi istemek yerine her seferinde tek bölüm gönderen bir yayın hizmeti gibidir. Özellikle telefonlarda Largest Contentful Paint ve Interaction to Next Paint gibi Core Web Vitals metriklerini iyileştirir. Bedeli sonradan yapılan ek ağ istekleridir; bu yüzden uygulamalar, örneğin işaretçi bir bağlantının üzerine geldiğinde, kullanıcının sırada büyük olasılıkla ihtiyaç duyacağı chunk'ları önceden çeker (prefetch).

Code splitting çoğunlukla lazy loading ve tree shaking ile karıştırılır. Code splitting kodun hangi dosyalara bölüneceğine karar veren derleme zamanı adımıdır; lazy loading ise bir şeyin yalnızca gerektiğinde çekilmesine dair çalışma zamanı davranışıdır. JavaScript'i lazy load etmek code splitting'e bağlıdır, ama görseller ve iframe'ler onsuz da lazy load edilebilir. Tree shaking ise bir başka şeydir: kullanılmayan kodu tümüyle siler, code splitting ise tüm kodu tutar ve parçalar halinde teslim eder.

Önemli noktalar

Code splitting, tek büyük bir paketi istenince yüklenen küçük chunk'lara böler.
Dinamik import(), bundler'ın yeni bir chunk başlatacağı yeri işaretler.
Rota tabanlı bölme her sayfaya kendi kodunu verir; bileşen düzeyinde bölme ağır bileşenleri erteler.
Paylaşılan chunk'lar tarayıcının ortak kütüphaneleri sayfalar arasında önbelleğe almasını sağlar.
Code splitting kodu parçalara böler; tree shaking hiç kullanılmayan kodu kaldırır.

Örnek

Ağır bir modülü yalnızca gerektiğinde yüklemekjavascript

// Static import: always included in the main bundle
import { renderHeader } from "./header.js";
renderHeader();

// Dynamic import: the bundler puts chart.js in its own chunk,
// downloaded only when the user clicks the button
document.querySelector("#show-chart").addEventListener("click", async () => {
  const { drawChart } = await import("./chart.js");
  drawChart(document.querySelector("#chart"));
});

// In React, the same idea for a component:
// const Editor = React.lazy(() => import("./Editor.jsx"));

Sık sorulan sorular

Code splitting ile lazy loading arasındaki fark nedir?

Code splitting derleme zamanında gerçekleşir ve hangi kodun hangi dosyaya gideceğine karar verir. Lazy loading çalışma zamanında gerçekleşir ve bir dosyanın ne zaman çekileceğine karar verir; bu yüzden JavaScript'i lazy load etmek, kodun önceden bölünmüş olmasına dayanır.

Code splitting SEO'ya yardımcı olur mu?

Dolaylı olarak evet; çünkü daha hızlı sayfalar ve daha iyi Core Web Vitals hem sıralamalara hem kullanıcılara yardımcı olur. Arama motorlarının görmesi gereken içerik, yalnızca bir tıklamadan sonra yüklenen bir chunk'ın arkasına gizlenmemelidir.

Kodu fazla bölmek mümkün mü?

Evet. Yüzlerce küçük chunk istek yükünü artırır ve bir chunk'ın yüklenmesi tarayıcı bir sonrakini keşfedemeden bitmek zorunda olduğunda şelaleler (waterfall) oluşturabilir. Rotalarda ve gerçekten ağır özelliklerde bölmek genellikle en uygun noktadır.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin