JavaScript küçültme, sıklıkla obfuscation (şaşırtma) ile karıştırılır; oysa bunlar farklı amaçlara hizmet eden iki ayrı iştir: biri byte tasarrufu sağlar, diğeri kodun mantığını anlamayı zorlaştırır.
Küçültme ne yapar
Küçültücü boşlukları, yorumları ve satır sonlarını siler, güvenli olduğu yerlerde yerel değişken adlarını bir veya iki karaktere indirir. Programın mantığı tamamen değişmeden kalır — bu tamamen teknik bir dosya sıkıştırmasıdır.
JSMin'den Terser'a: kısa bir tarihçe
Douglas Crockford, 2000'lerin başında yaygın kullanılan ilk JS küçültücülerden biri olan JSMin'i yayımladı — bu araç yalnızca boşluk ve yorumları siliyor, değişken adlarına dokunmuyordu. Terser (UglifyJS'in bir çatalı) ve esbuild gibi modern araçlar ise kodu bir AST'ye (soyut söz dizimi ağacı) ayrıştırıp daha ileri gidiyor: yerel değişkenleri ve fonksiyon parametrelerini, güvenli olduğu her yerde tek harfli adlara yeniden adlandırıyorlar. Gerçek projelerde dosya boyutuna en büyük katkıyı sağlayan da boşluk silmekten çok bu yeniden adlandırma adımıdır.
Source map: yeniden adlandırılmış kod nasıl hata ayıklanır
Değişken adları a, b, c'ye indiğinde ve tüm satır sonları kaybolduğunda, üretim ortamındaki bir hata izi (stack trace) tek bir uzun satır içindeki okunaksız bir konumu gösterir. Source map tam olarak bu sorunu çözer: küçültülmüş koddaki her konumu, orijinal satır, sütun ve değişken adına eşleyen ayrı bir dosyadır. Bu sayede tarayıcının DevTools'u, aslında çalışan kod küçültülmüş olsa bile okunabilir bir hata izi gösterebilir.
Bu neden gerekli
- Canlıya dağıtmadan önce bir JS paketinin (bundle) boyutunu küçültmek.
- Betiğin tarayıcıda indirilmesini ve ayrıştırılmasını hızlandırmak.
- Küçültülmüş kodun istenirse hâlâ okunabildiğini, obfuscated kodun ise çok daha zor çözülebildiğini anlamak.
Tree shaking ile küçültme arasındaki fark
Tree shaking, küçültmeyle karıştırılmaması gereken ayrı bir tekniktir: modüller arasındaki bağımlılık grafiğini analiz eder ve derleme aşamasında hiçbir yerde kullanılmayan fonksiyon ve export'ları son paketten tamamen kaldırır. Küçültme ise zaten tamamlanmış kod üzerinde çalışır ve yalnızca metinsel gösterimini kısaltır, gerçekten kullanılan hiçbir mantığı silmez. Vite veya webpack gibi modern derleme araçları genellikle ikisini sırayla uygular: önce tree shaking ölü kodu temizler, sonra küçültme geriye kalanı sıkıştırır.