Küçültme (Minification) Nedir?
Kısa tanım
Küçültme (minification), JavaScript, CSS ve HTML dosyalarından boşluklar, satır sonları ve yorumlar gibi çalışma için gereksiz karakterleri, kodun davranışını değiştirmeden çıkarma işlemidir. JavaScript'te yerel değişken adlarının kısaltılmasını da kapsayabilir. Genellikle derleme (build) aşamasında otomatik yapılır ve sunucunun uyguladığı gzip ya da Brotli sıkıştırmasından ayrı, onu tamamlayan bir adımdır.
Diğer adları: Minification, minify, minifikasyon, kod küçültme, minify etme
Küçültücü tam olarak neyi atar?
İnsanlar için yazılan kod, okunabilirlik adına bolca girinti, açıklayıcı değişken adları ve yorum içerir. Tarayıcının bunlara ihtiyacı yoktur. Bir küçültücü (minifier) bu fazlalığı atar ve aynı işi yapan daha kısa bir metin üretir:
// Önce
function toplamFiyat(sepet) {
// KDV dahil toplam
let toplam = 0;
for (const urun of sepet) {
toplam += urun.fiyat * urun.adet;
}
return toplam * 1.2;
}
// Sonra
function toplamFiyat(t){let n=0;for(const o of t)n+=o.fiyat*o.adet;return 1.2*n}Yorum ve boşluklar gitti, yerel değişkenler tek harfe indi. Fonksiyonun dışarıdan çağrılan adı ve nesnenin özellik adları (fiyat, adet) ise korundu; çünkü bunlar başka dosyalardan ya da API yanıtlarından gelebilir. CSS tarafında boşlukların yanı sıra gereksiz noktalı virgüller silinir, #ffffff gibi değerler #fff'e kısaltılır. HTML küçültme de mümkündür ama kazancı genellikle daha sınırlıdır ve pre içeriği gibi boşluğun anlamlı olduğu yerlerde dikkat ister.
Küçültme ile sıkıştırma aynı şey değil
Sık karıştırılan iki adım vardır. Küçültme, dosyanın içeriğini kalıcı olarak değiştirir ve derleme sırasında bir kez yapılır. HTTP sıkıştırma (gzip, Brotli) ise dosyayı aktarım için paketler; tarayıcı indirdikten sonra açar ve orijinal metne geri döner. İkisi birlikte kullanılır ve birbirinin yerine geçmez. Sıkıştırma, tekrar eden kalıpları zaten iyi yakaladığı için küçültmenin sıkıştırılmış boyuta katkısı, sıkıştırılmamış boyuta katkısından daha mütevazı görünür. Yine de anlamlıdır; ayrıca tarayıcının ayrıştırması gereken metin de kısalır.
Derleme hattındaki yeri
Modern projelerde küçültmeyi elle yapan pek kimse yoktur. Vite, webpack, Next.js gibi araçlar üretim derlemesinde terser, esbuild, SWC ya da Lightning CSS benzeri küçültücüleri otomatik çalıştırır. Bu, build süreci içinde genellikle şu sırayla gelir: modüllerin birleştirilmesi, kullanılmayan kodun ayıklanması (tree shaking), küçültme ve dosya adlarına içerik özeti (hash) eklenmesi. Kontrol edilmesi gereken asıl şey, canlı ortama gerçekten üretim derlemesinin gitmesidir; geliştirme modunda derlenmiş bir paket hem küçültülmemiş hem de ek hata ayıklama koduyla dolu olabilir.
Hata ayıklama ve sınırlar
Küçültülmüş kodda hata satırı "1. satır, 48213. sütun" gibi okunamaz bir yere düşer. Bunu çözen şey source map dosyalarıdır: tarayıcı geliştirici araçları ve hata izleme servisleri, küçültülmüş konumu orijinal dosya ve satıra çevirir. Source map'leri herkese açık yayınlayıp yayınlamamak bir tercih meselesidir; kaynak kodunuzun okunabilir hâlini dışarı açar.
Küçültmenin hızlandırabileceği şeyin de bir sınırı vardır. 900 KB'lık bir JavaScript paketi küçültülünce 600 KB'a inebilir, ama tarayıcı yine 600 KB kodu ayrıştırıp çalıştırmak zorundadır. Asıl kazanç çoğu zaman o kodun bir kısmını hiç göndermemekten gelir: gereksiz kütüphaneleri kaldırmak ve sayfaya özel parçalara bölmek. Küçültme bu işlerin üstüne eklenen, maliyeti neredeyse sıfır olan son katmandır.