Code splitting ve tree shaking nedir?

Question

IT Interview Practice · Accepted Answer

Her ikisi de kullanıcıların indirdiği JavaScript'i kısar. **Code splitting**, bundle'ı talep üzerine yüklenen parçalara (chunk) böler; **tree shaking**, asla kullanmadığınız kodu kaldırır. Birbirini tamamlarlar: *neyin* yükleneceğini bölün, her parçanın içindeki *ölü* kodu silkeleyin.

## Code splitting

Tek büyük bir bundle yerine, uygulama her rota veya ağır özellik yalnızca gerektiğinde getirilen ayrı bir parça olacak şekilde bölünür:

```js
// Rota bazlı bölme: dashboard kodu siz ziyaret edene kadar indirilmez
const Dashboard = lazy(() => import("./routes/Dashboard")); // kendi parçası

// Bileşen bazlı bölme: ağır editör etkileşimde yüklenir
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // tıklamada getirilir
  openEditor();
};
```

Dinamik `import()` sinyaldir — bundler o sınırda ayrı bir dosya yayınlar.

## Tree shaking

Bundler, ES modül `import`/`export`'unu statik olarak analiz eder ve hiçbir şeyin başvurmadığı export'ları düşürür. Yalnızca **ESM** ile (statik, analiz edilebilir) çalışır — CommonJS `require` ile değil:

```js
import { debounce } from "utils"; // yalnızca debounce tutulur; throttle vb. silkelenir
```

`package.json`'daki `"sideEffects": false`'a ve fonksiyon-bazında import'lara dayanır; barrel dosyaları veya yan etkili (side-effectful) modüller onu bozabilir.

## Ödünleşimler

- Aşırı bölme → birçok küçük istek ve şelaleler (waterfall); ilişkili kodu gruplayın.
- Tree shaking kırılgandır — yanlış işaretlenmiş bir yan etki ölü kodu içeride tutar.

## Neden önemli

Bunlar "daha az JS gönder"in arkasındaki iki kaldıraçtır. Görüşmeciler code splitting'in *ne zaman neyin yükleneceğine*, tree shaking'in *içinde neyin bulunduğuna* karar verdiğini ve tree shaking'in statik ESM'ye bağlı olduğunu bilmenizi ister — bir bundle'ı gerçekten ayarlamış olanları yalnızca hakkında okumuş olanlardan ayıran bir ayrıntı.

Code splitting

Tree shaking

Ödünleşimler

Neden önemli

İlgili sorular