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

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:

import Chart from 'chart.js/auto';

Uzun yol:

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ı.

Etkileşimli grafiği aç

Tooltip ve imleç okuması için ~60 kB JavaScript iner. Aşağıdaki veri tablosu her hâlde açık.

Veri tablosu

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

Seri	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

Grafik tarayıcıda çizilir; aşağıdaki tablo aynı veriyi taşır.

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 bu sitede kullanılan	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)

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,0 kB daha götürüyor; çizgi grafiği hiç kullanmayan bir sayfa 5,1 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.

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

Framework tarafı toplamın %10’undan azı (6,5 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.

Ne yaptım

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

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.