Code Splitting Nedir?

Code Splitting Nedir?

Code splitting, tek büyük JavaScript dosyası yerine uygulama kodunu küçük parçalara ayırma yaklaşımıdır. Kullanıcı ana sayfayı açtığında yönetim paneli, grafik editörü veya ödeme adımı için gereken kod hemen indirilmez; ilgili ekran açıldığında yüklenir.

Nasıl Çalışır?

Modern bundler’lar import() gibi dinamik import ifadelerini ayrı chunk’lara dönüştürür. Rota bazlı splitting, her sayfanın kendi kodunu taşımasını sağlar. Bileşen bazlı splitting ise tarih seçici, harita, WYSIWYG editör gibi ağır parçaları ihtiyaç anına bırakır.

Webpack, Vite ve benzeri araçlar ortak bağımlılıkları ayrı dosyalara çıkarabilir. Böylece tarayıcı daha önce indirdiği vendor chunk’ını önbellekten kullanır. Code splitting çoğu zaman lazy loading ile birlikte uygulanır; ancak yanlış bölünmüş çok fazla küçük dosya da ek ağ gecikmesi yaratabilir.

Ne Zaman Kullanılır?

• İlk yüklemede gerekmeyen yönetim ekranları varsa
• Grafik, harita veya editör gibi büyük üçüncü parti kütüphaneler kullanılıyorsa
• Mobil bağlantılarda ilk etkileşime kadar geçen süre kritikse
• Tek sayfa uygulamasının bundle boyutu büyümüşse

İş Dünyasında Kullanımı

E-ticaret, SaaS ve portal projelerinde code splitting, kullanıcının ilk ekrana daha hızlı ulaşmasına yardım eder. Doğru chunk stratejisi yalnızca dosya boyutuna bakılarak değil; gerçek kullanıcı trafiği, en sık kullanılan rotalar ve önbellek davranışı ölçülerek belirlenmelidir.