# Chart.js'i nasıl import ettiğin, ziyaretçiye kaç kilobayt gönderdiğini belirliyor

> Aynı grafik, dört import stratejisi. Farkı sentetik bir bundler'da değil, bu sitenin kendi Astro + Rolldown derlemesinde ölçtüm.

- Tür: Ölçüm
- Soru: `chart.js/auto` ile seçmeli `Chart.register()` arasındaki fark, gerçek bir üretim derlemesinde kaç kilobayt?
- Bulgu: Seçmeli register, `chart.js/auto` yerine 9,7 kB gzip tasarruf ettiriyor (67,8 → 58,1 kB, %14,3). Asıl büyük düşüş kütüphanenin kendisinde değil, hiç kullanılmayan controller'ları dışarıda bırakmakta: yalnız çubuk grafiği kaydeden bir sayfa 46,0 kB'a iniyor — auto'nun üçte ikisi.
- Yöntem: Aynı depo, aynı grafik bileşeni ve aynı içerik dosyasıyla dört ayrı `npx astro build` koşuldu; her koşuda yalnız `chart-render.ts`'in import/register satırları değiştirildi. Ölçülen şey Rolldown'ın ürettiği `dist/_astro/chart-render.*.js` parçasının `gzip -9` boyutudur. Derleme deterministik olduğu için tek koşu yeterli: aynı girdi aynı baytı üretti, dört strateji de iki kez koşulup aynı sonuç doğrulandı.
- Ölçüm tarihi: 2026-08-19
- Güven: Yüksek güven
- Program: Arayüz performansı
- Ortam: Astro 7.1.3 · Chart.js 4.5.1 · Bundler Rolldown (Astro 7 varsayılanı) · Node 24.18.0 · İşletim sistemi macOS (Darwin 25.6) · Sıkıştırma gzip -9
- Teknolojiler: Chart.js, Astro, Rolldown, Preact
- Yayın: 2026-08-19
- Kaynak: https://www.muhammetsafak.com.tr/research/chartjs-import-stratejisi/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
Bu sitede yıllardır tek bir kural vardı: **zorunlu istemci JS yok.** Research
bölümünü açarken o kuralı bilerek deldim — çok serili bir ölçüm, tooltip'i
olmayan bir grafikte okunmuyor. Ama "deldim" ile "önemsedim" arasındaki fark,
gönderilen baytı ölçüp ölçmediğinde ortaya çıkıyor.

Chart.js'in dokümantasyonu iki yol gösteriyor. Kısa yol:

```ts
import Chart from 'chart.js/auto';
```

Uzun yol:

```ts
import { Chart, BarController, BarElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(BarController, BarElement, CategoryScale, LinearScale);
```

İkisi de çalışıyor. Sorum şuydu: aradaki fark, gerçek bir derlemede ölçülebilir
bir sayı mı, yoksa mikro-optimizasyon mu?

## Neyi ölçtüm

Sentetik bir bundler kurmadım — çünkü ölçmek istediğim şey "Chart.js ne kadar
küçülebilir" değil, **bu depo ne kadar gönderiyor.** O yüzden dört koşunun
dördü de sitenin kendi `astro build` hattından geçti: aynı MDX kaydı, aynı
grafik bileşeni, aynı Preact adası. Koşular arasında değişen tek şey
`src/components/research/chart-render.ts` dosyasının ilk on satırıydı.

**Chart.js parçasının gzip boyutu, import stratejisine göre**

Dördü de aynı grafiği çiziyor. Fark yalnızca hangi controller ve eklentinin pakete girdiğinde.

Kaynak: astro build çıktısı, dist/_astro/chart-render.*.js, gzip -9

|  | chart.js/auto | bar+line+tooltip+filler | bar+line, eklentisiz | yalnız bar |
| --- | --- | --- | --- | --- |
| gzip | 67.8 kB | 58.1 kB | 51.2 kB | 46 kB |

Ham (sıkıştırılmamış) boyutlarla birlikte tablo şöyle:

| Strateji | Ham | gzip | auto’ya göre |
| --- | --- | --- | --- |
| chart.js/auto | 204.965 B | 69.466 B | — |
| bar + line + Tooltip + Filler | 172.313 B | 59.538 B | −9.928 B (%14,3) |
| bar + line, eklentisiz | 149.793 B | 52.378 B | −17.088 B (%24,6) |
| yalnız bar | 134.868 B | 47.114 B | −22.352 B (%32,2) |

Ham boyut ile gzip boyutu aynı yönde ama aynı oranda hareket etmiyor: sıkıştırma, silinen kodun bir kısmını zaten sıkıştırıyordu.

## Sayı ne söylüyor

Seçmeli register, `auto`'ya göre **9,7 kB gzip** kazandırdı. Bu, dokümantasyonun
"tree-shaking destekleniyor" cümlesinin arkasındaki gerçek rakam — ve tek başına
bakıldığında mütevazı: %14,3.

Asıl bilgi ikinci ve üçüncü satırda. `Tooltip` ile `Filler` eklentilerini
düşürmek 7,2 kB daha götürüyor; çizgi grafiği hiç kullanmayan bir sayfa 5,3 kB
daha kazanıyor. Yani **maliyetin çoğu kütüphanenin çekirdeğinde değil,
kullanılmayan çizim türlerinde.** `auto`'nun yaptığı şey de tam olarak bu:
hepsini kaydediyor.

> **Sonuç**
>
> Kural olarak şu çıkıyor: `auto`'dan kaçmak tek başına küçük bir kazanç. Kazancı
> büyüten şey, sayfanın **gerçekten çizdiği** grafik türünü bilmek ve gerisini
> hiç paketlememek. Bu sitede çubuk ve çizgi birlikte kullanılıyor, tooltip'ten
> de vazgeçemiyorum — o yüzden 58,1 kB'da duruyorum, 46,0'a inemiyorum.

## Sayfanın tamamı ne ödüyor

Chart.js parçası tek başına anlamlı değil; ziyaretçi ada hidratlandığında
şunları indiriyor:

| Parça | gzip | Ne |
| --- | --- | --- |
| chart-render | 58,1 kB | Chart.js + tema köprüsü |
| preact | 4,9 kB | çalışma zamanı çekirdeği |
| hooks | 0,8 kB | useRef / useEffect |
| client | 0,8 kB | @astrojs/preact istemci köprüsü |
| ChartIsland | 0,6 kB | bileşenin kendisi |
| Toplam | 65,3 kB |  |

Ölçüm, tek grafikli bir research sayfasının ada maliyetidir. `signals.module` parçası derlemede üretiliyor ama sayfa onu hiç istemiyor — @astrojs/preact yalnız `data-preact-signals` varsa yüklüyor.

Framework tarafı toplamın **%10'undan azı** (6,3 kB). Yani Preact yerine React
seçmek burada asıl fark yaratmazdı demek yanlış olur — tam tersi: React'in
`react-dom` maliyeti tek başına Chart.js'e yaklaşıyor. Ama bu ayrı bir ölçüm,
ayrı bir kayıt.

> **Sınır**
>
> Ölçüm **derleme çıktısının** boyutudur, ziyaretçinin gerçek indirme süresi
> değil. Parçalar `/_astro/` altında bir yıl `immutable` cache'leniyor ve
> `client:visible` ile yalnız grafik görünürken isteniyor; yani ilk ziyaretin
> ötesinde bu bayt bir daha ödenmiyor. Ayrıca gzip ölçtüm — Cloudflare çoğu
> tarayıcıya brotli sunuyor, oradaki rakam daha düşük olacaktır.

## Ne yaptım

`chart-render.ts` bu dört satırla açılıyor ve `auto` girişini hiç kullanmıyor:

```ts
import {
  BarController, BarElement, LineController, LineElement, PointElement,
  CategoryScale, LinearScale, Tooltip, Filler,
} from 'chart.js';

Chart.register(
  BarController, BarElement, LineController, LineElement, PointElement,
  CategoryScale, LinearScale, Tooltip, Filler,
);
```

`Legend` listede yok: gösterge sunucuda HTML olarak basılıyor. Böylece hem
sitenin kendi token'larıyla biçimleniyor hem de JavaScript hiç çalışmasa bile
yerinde duruyor — bu sayfadaki grafiğin altındaki "Veri tablosu" katlamasıyla
aynı mantık.