Code Splitting (Kod Bölme) Nedir?

Bundle, chunk ve bundler

Modern bir uygulama yüzlerce, bağımlılıklarıyla birlikte binlerce modülden oluşur. Paketleyici (bundler), giriş noktasından başlayarak import ilişkilerini izler, bir modül grafiği çıkarır, TypeScript veya JSX gibi kaynakları dönüştürür ve tarayıcıya gönderilecek dosyaları üretir. Bu çıktı dosyalarına bundle (paket), bölme sonucu ortaya çıkan her bir parçaya da chunk denir. Çıktı genellikle build sürecinin parçası olarak küçültülür ve dosya adlarına içerik özetinden (hash) türetilen bir ek alır:

_next/static/chunks/main-8f3c21.js        (ortak çekirdek)
_next/static/chunks/app/page-1a7d90.js    (ana sayfa rotası)
_next/static/chunks/app/sepet/page-c44e02.js
_next/static/chunks/942-5b1f6e.js         (paylaşılan bağımlılık)

İçerik değişmedikçe dosya adı da değişmediği için tarayıcı bu parçaları uzun süre önbellekte tutabilir; bir rotada yapılan değişiklik yalnızca o rotanın chunk'ını geçersiz kılar.

Nereden bölünür?

• Rota bazlı: En yaygın ve en kazançlı bölme. Next.js, kodu rotalara göre otomatik olarak böler; kullanıcı ödeme sayfasını açmadıkça ödeme kodunu indirmez.
• Bileşen veya özellik bazlı: Bir harita, zengin metin editörü veya grafik kütüphanesi gibi ağır ve her ziyaretçinin kullanmadığı parçalar ancak gerektiğinde yüklenir.
• Kütüphane bazlı: Sık değişmeyen üçüncü taraf kod ayrı bir chunk'a alınarak uygulama kodu güncellendiğinde önbellekte kalması sağlanır.

// Kütüphane yalnızca kullanıcı "Dışa aktar"a tıklayınca iner
button.addEventListener("click", async () => {
  const { disaAktar } = await import("./pdf-disa-aktar.js");
  disaAktar(rapor);
});

Dinamik import() bölme noktası oluşturmanın standart yoludur. React'te React.lazy, Next.js'te next/dynamic aynı mekanizmayı bileşen düzeyinde kullanır.

Performans metriklerine etkisi

İlk yüklemede gönderilen JavaScript azaldıkça tarayıcının ayrıştırıp çalıştırması gereken kod da azalır. Bu, ana iş parçacığının daha erken serbest kalması demektir: laboratuvarda TBT düşer, sahada etkileşimlere daha hızlı yanıt verilir ve INP iyileşir. İçeriği JavaScript ile çizen sayfalarda ana içerik de daha erken görünür.

Aşırı bölmenin bedeli

Kod bölme "ne kadar çok parça, o kadar iyi" demek değildir. Çok sayıda küçük chunk, HTTP/2 ile hafiflese de istek başına bir ek yük getirir ve küçük dosyalar daha az verimli sıkıştırılır. İsteğe bağlı yüklenen bir özellik, kullanıcı tıkladığı anda indirilmeye başlarsa gecikme hissedilir; bunun çözümü parçayı fare üzerine geldiğinde veya tarayıcı boştayken önceden almaktır (prefetch). Bir chunk'ın başka bir chunk'ı, onun da bir başkasını yüklediği istek şelaleleri de sık görülür. İlk ekranda görünen kritik arayüzü ertelemek ise kazanç yerine kayıp üretir.

Nasıl ölçülür?

Bundle analizi araçları her chunk'ın içinde hangi modüllerin bulunduğunu ve ne kadar yer kapladığını görselleştirir. Next.js 16.1 ve sonrasında next experimental-analyze komutu Turbopack'in modül grafiği üzerinden bu analizi yapar; webpack kullanan projelerde @next/bundle-analyzer eklentisi aynı işi görür. Chrome DevTools'taki Coverage paneli ise yüklenen kodun ne kadarının sayfada gerçekten çalıştığını gösterir. Bölmenin tamamlayıcısı, hiç kullanılmayan kodu paketten tamamen çıkaran tree shaking'dir.