Frontend optimizasyonunda tree shaking nedir?

02 Tem 21:36

Tree shaking dediğimiz şey aslında daha çok build araçlarının (Webpack, Rollup, esbuild vs.) derliyici stratejilerinden biri. Basitçe anlatayım, kanka: sen bir JS modülünde 10 fonksiyon tanımladın diyelim, ama frontend'te sadece 2'sini kullanıyorsun. Normalde build sürecinde tüm bu fonksiyonlar paketin içine girer, dağıtımda da yüklenir. Tree shaking'in yaptığı şey, kullanmadığın o 8 fonksiyonu süpürüp atmak değil aslında, **derleme zamanı analizinden faydalanarak modüllerin kullanılmayan kısımlarını ayıklamak**. Bence burada en önemli detay, bunu çalıştırabilmen için modüllerinizi **ES Modules (ESM)** şeklinde yazman gerektiği. CommonJS kullanırsan tree shaking’e elveda demek olur, çünkü statik analiz yapamazsın. Ayrıca, örneğin Lodash kullanıyorsan ve `import _ from 'lodash'` yerine `import { get } from 'lodash'` yazarsan, sadece get fonksiyonunu alırsın. Bunu da niteliğine bakarak derleyici anlayıp gereksiz kodları attıyor. Ama valla biraz da hype’a gelmemek lazım. Tree shaking’in 100% çalıştığını düşünmek büyük bir yanılsama olabilir. Mesela type tanımlamaları varsa, yanlışlıkla bazı fonksiyonlar kalıntı olarak kalabiliyor. Aynı zamanda sadece fonksiyonlar değil, ölü değişkenler, gereksiz gereçler de temizlenir. Alternatif olarak, Rollup gibi araçlar daha agresif temizleme yapabilir ama bazen fazla temizlediği için runtime hataları da oluşabiliyor. Ne kadarına ihtiyacın varsa o kadarına güven bence.

02 Tem 22:28

Tree shaking aslında hantal bir terim değil, dosya boyutunu küçültmek için modern JS toolchain'lerinin yaptığı bir optimizasyon tekniği. Temelde çalışma sürecini anlatırsam: derleme (build) aşamasında statik analiz yapıyorlar, yani koda "bakarken" hangi fonksiyonların/variableların hiç çağrılmadığını (ölü dal) tespit ediyor ve sonuçta çıktıya sadece kullanılabilirleri ekliyor. Örneğin `lodash` kütüphanesinden sadece `_.get()` metodunu kullanıyorsanız, tree shaking sonucunda paketten sadece o metod kalıyor, geri kalan 300+ metod paketten çıkartılıyor. Benim deneyimimde özellikle ES6 module sistemiyle (`import/export`) çalışırken en iyi sonuçları alıyorum. Webpack'te varsayılan olarak aktif olan tree shaking, Rollup ya da Vite gibi araçlarda da standart. Projede bir şeyler ters gittiğindeyse hep şunu kontrol ediyorum: klasik CommonJS `require()` kullanıyorsan tree shaking çalışmıyor, direkt ES6 modüllerine geçmen lazım. Ayrıca `"sideEffects": false` satırını `package.json` dosyasına eklemeyi de unutmamak gerekiyor, aksi taktirde saf ES6 modüllerinin bile çıktıları bozulabiliyor.