Bir JS bundle'ını ne büyütür ve boyut neden zarar verir?

Question

IT Interview Practice · Accepted Answer

Bir **bundle**, build aracınızın paketleyip tarayıcıya gönderdiği JavaScript'tir. Esas olarak **bağımlılıklardan** (dependency), **tekrarlanan koddan** ve **sayfanın henüz ihtiyaç duymadığı kodu göndermekten** büyür.

## Onu ne şişirir

- **Ağır kütüphaneler** — bir tarih veya ikon kütüphanesi yüzlerce KB ekleyebilir. Tek bir fonksiyon için `lodash`'ın tamamını import etmek, hepsini içeri çeker.
- **İhtiyacınız olan yerine her şeyi import etmek**:

```js
import _ from "lodash";           // ~70KB — kütüphanenin tamamı
import debounce from "lodash/debounce"; // ~2KB — yalnızca ihtiyacınız olan fonksiyon
```

- **Code splitting yok** — tüm uygulama (her rota, her modal) baştan yüklenen tek bir dosyada paketlenir.
- **Polyfill'ler ve tekrarlanan bağımlılıklar** — aynı paketin iki sürümü iki kez paketlenir.

## Boyut neden zarar verir

Byte'lar küçük sorundur; JS'yi **ayrıştırmak ve çalıştırmak** büyük olandır. Tarayıcı her byte'ı indirmeli, sonra ana thread'de ayrıştırmalı, derlemeli ve çalıştırmalıdır — bu, orta seviye bir telefonda bir dizüstüne göre çok daha yavaştır. Ağır JS, etkileşilebilirliği geciktirir ve doğrudan **INP** ile **LCP**'yi kötüleştirir.

## Neden önemli

"Sadece kütüphaneyi ekle", uygulamaların sessizce nasıl yavaşladığıdır. Görüşmeciler, *bağımlılık başına maliyeti* düşündüğünüzü ve bundle şişmeden önce fonksiyon-bazında import'lara, tree shaking'e ve code splitting'e yöneldiğinizi görmek ister — özellikle kullanıcılarınızın telefonları dev makinenizden çok daha zayıf olduğundan.

Onu ne şişirir

Boyut neden zarar verir

Neden önemli

İlgili sorular