Tree Shaking Nedir?

Tree Shaking Nedir?

Tree shaking, JavaScript uygulamasında import edilen modüllerin gerçekten kullanılan kısımlarını belirleyip kullanılmayan kodu final pakete almamaya çalışır. Adı, ağaçtan kuru dalların silkelenmesi benzetmesinden gelir.

Nasıl Çalışır?

Modern bundler’lar ES module sözdizimini statik olarak analiz edebilir. import { formatDate } from "./date" gibi bir kullanımda yalnızca formatDate export’u gerekiyorsa diğer export’lar üretim bundle’ından çıkarılabilir.

Tree shaking’in etkili olması için kodun yan etkileri doğru anlaşılmalıdır. package.json içindeki sideEffects alanı, CommonJS require kullanımı, dinamik import şekilleri ve top-level çalışan kodlar sonucu etkileyebilir.

Nerede Kullanılır?

Webpack, Rollup ve Vite gibi araçlar tree shaking uygular. Özellikle büyük UI kütüphaneleri, yardımcı fonksiyon paketleri ve ikon setlerinde gereksiz kodu azaltmak sayfa yükleme süresini ve JavaScript parse maliyetini düşürebilir.

Tree shaking tek başına yeterli değildir. Kod bölme, lazy loading, gereksiz bağımlılıkları kaldırma ve bundle analiziyle birlikte düşünülmelidir.