Boşlukları ve yorumları silmek dosyayı küçültür, ama gzip'in yerini tutmaz ve özensiz yapılırsa kodu bozar. Minify'ın gerçekte ne yaptığını, nerede risk taşıdığını ve küçültülmüş kodu yeniden nasıl okuyacağınızı örneklerle anlatıyoruz.
Minify (kod küçültme), HTML, CSS ve JavaScript dosyalarından tarayıcının ihtiyaç duymadığı karakterleri, yani boşlukları, satır sonlarını ve yorumları silerek dosyayı küçültme işlemidir. Kod aynı şekilde çalışır, yalnızca insan için okunması zorlaşır. Kod küçültme gzip ya da brotli sıkıştırmasının yerine geçmez; ikisi farklı katmanlarda çalışır ve birlikte kullanıldığında en küçük sonucu verir. Gelişmiş araçlar bunun üstüne değişken adlarını kısaltır ve kullanılmayan kodu atar; risklerin çoğu da bu adımdadır.
Sitedeki HTML küçültücü yorumları ve fazla boşlukları siler, sayfa içindeki CSS ve JavaScript'i de küçültür. JS küçültücü yorumları ve gereksiz boşlukları atar ama değişken adlarına dokunmaz. Tersi yön için, yani küçültülmüş bir dosyayı okumak için JS düzenleyici, CSS düzenleyici ve HTML düzenleyici kodu 2 boşluk girintiyle yeniden açar.
Bir kaynak dosyasında tarayıcı için anlamı olmayan pek çok karakter vardır: girinti, boş satırlar, açıklama satırları, bloktaki son noktalı virgül, gereksiz sıfırlar. Küçültücü bunları atar; anlamı değiştirecek hiçbir şeye dokunmamalıdır. Neyin güvenle silinebileceği dile göre değişir:
| Dil | Genellikle silinen | Korunması gereken | Gelişmiş araçların ek yaptığı |
|---|---|---|---|
| HTML | Yorumlar, etiketler arası fazla boşluk | pre ve textarea içeriği, kelimeler arası boşluk | İsteğe bağlı kapanış etiketlerini ve öznitelik tırnaklarını atmak |
| CSS | Yorumlar, boşluklar, bloktaki son noktalı virgül | calc() içindeki operatör boşlukları, metin değerleri | Renkleri kısaltmak, kuralları birleştirmek |
| JavaScript | Yorumlar, girinti, gereksiz satır sonları | ASI'nin ihtiyaç duyduğu satır sonları, metin ve regex içeriği | Değişken adlarını kısaltmak (mangling), ölü kodu atmak |
Sitedeki JS küçültücü tablonun ilk iki sütununu uygular, son sütunu uygulamaz: değişken adlarını kısaltmaz. Bu bilinçli bir sınırdır. Çıktı, ad kısaltan bir araca göre daha az küçülür ama okunabilir kalır ve çalışma anında fonksiyon adını okuyan kodu bozma riski taşımaz.
Noktalı virgül kullanılmadan yazılmış küçük bir fonksiyonu ele alalım:
// Sepet toplamını hesaplarfunction sepetToplami(urunler) {let toplam = 0for (const urun of urunler) {toplam += urun.fiyat * urun.adet}return toplam}
JS küçültücüden çıkan sonuç şudur:
function sepetToplami(urunler){let toplam=0for(const urun of urunler){toplam+=urun.fiyat*urun.adet}return toplam}
Orijinal girintisiyle 171 bayt olan dosya 115 bayta indi. İki satır sonunun korunduğuna dikkat edin. Bu bir eksiklik değil: kod noktalı virgülsüz yazıldığı için JavaScript, ifadelerin nerede bittiğini satır sonlarından anlar (otomatik noktalı virgül ekleme, ASI). Küçültücü bu satır sonlarını da silseydi let toplam=0for(...) gibi geçersiz bir kod ortaya çıkardı.
İki teknik sık karıştırılır, çünkü ikisi de dosyayı küçültür. Aralarındaki fark neyi, ne zaman ve nasıl yaptıklarıdır:
| Özellik | Küçültme (minify) | Gzip / Brotli |
|---|---|---|
| Ne zaman yapılır | Yayından önce, bir kez | Her yanıtta, sunucu ya da CDN tarafından |
| Ne yapar | Gereksiz karakterleri kalıcı olarak siler | Tekrarları kodlar; tarayıcı açınca dosya birebir geri gelir |
| Geri alınabilir mi | Hayır; yorumlar ve biçim kaybolur | Evet, kayıpsızdır |
| Nasıl anlaşılır | Dosyanın kendisine bakarak | Content-Encoding: gzip ya da br yanıt başlığıyla |
Brotli, RFC 7932'de tanımlanmış ve metin dosyalarında genellikle gzip'ten biraz daha iyi sıkıştıran bir algoritmadır; güncel tarayıcılar onu HTTPS bağlantılarında destekler. Sıkıştırma tekrar eden kalıpları çok iyi yakaladığı için girintinin maliyetinin bir kısmını zaten kendisi giderir. Bu yüzden sıkıştırılmış boyutta küçültmenin kazandırdığı fark, ham boyuttaki farktan daha küçük görünür. Ama sıfır değildir: yorumlar ve uzun açıklamalar sıkıştırmadan sonra da yer kaplar ve tarayıcı dosyayı açtıktan sonra onları yine okumak zorundadır. Doğru sıra her zaman aynıdır: derlerken küçült, gönderirken sıkıştır.
HTML'de satır içi öğeler arasındaki boşluk içeriğin parçasıdır. <a href="/">Ana sayfa</a> <a href="/blog">Blog</a> satırındaki tek boşluk silinirse iki bağlantı birbirine yapışır. Sitedeki HTML küçültücü bu yüzden boşlukları tamamen silmez, tek boşluğa indirir; görünen metni ve satır içi boşluğu korur. pre ve textarea içeriği olduğu gibi bırakılır. Yorumlar silinir, ama eski Internet Explorer sürümleri için yazılmış koşullu yorumlar (<!--[if IE]>) korunur. Sayfa içindeki <style> ve <script> blokları ile JSON-LD yapılandırılmış verisi de küçültülür; örneğin .menu a { color : #2563eb ; } bildirimi .menu a{color:#2563eb} olur.
CSS küçültmede klasik hata, calc(100% - 2rem) içindeki boşlukları silmektir. Toplama ve çıkarma işaretlerinin iki yanındaki boşluk orada zorunludur; calc(100%-2rem) geçersizdir ve tarayıcı bildirimi sessizce yok sayar. content özelliğindeki metinler ve url() içindeki yollar da olduğu gibi kalmalıdır. Bu sitede ayrı bir CSS küçültme sayfası yok; stil dosyaları genellikle derleme aracınızın küçültücüsüyle hazırlanır, sayfaya gömülü stiller ise HTML küçültücüden geçerken küçülür.
JavaScript'te iki tuzak öne çıkar. Birincisi yukarıdaki örnekte gördüğümüz otomatik noktalı virgül eklemedir: noktalı virgülsüz kodda satır sonlarını körlemesine silen bir küçültücü programı bozar; sitedeki araç gerekli satır sonlarını korur. İkincisi metin, şablon (template literal) ve düzenli ifade içerikleridir; içlerindeki boşluklar ve // karakterleri yorum ya da gereksiz boşluk sanılırsa program değişir. Araç kodu düz bul-değiştir ile değil, bu yapıları tanıyan bir sözcük çözümleyiciyle (tokenizer) işler.
Lisans yorumları teknik değil hukuki bir konudur. MIT dahil pek çok açık kaynak lisansı, telif ve izin bildiriminin yazılımın kopyalarında yer almasını şart koşar. Bu yüzden küçültücüler /*! ile başlayan yorumları korur. Sitedeki araç da diğer bütün yorumları silerken /*! kitaplik v1.2.0 | MIT */ gibi bir başlığı çıktıda bırakır.
Küçültülmüş bir dosyada hata oluştuğunda tarayıcı konsolu app.min.js:1:48213 gibi bir konum gösterir: birinci satır, 48.213. sütun. Bu bilgi tek başına neredeyse işe yaramaz. Kaynak haritası (source map), küçültülmüş koddaki her konumun orijinal dosyada nereye karşılık geldiğini tutan ayrı bir dosyadır. Derleme araçları onu app.min.js.map adıyla üretir ve küçültülmüş dosyanın sonuna //# sourceMappingURL=app.min.js.map satırını ekler; geliştirici araçları açıkken tarayıcı haritayı indirip hatayı orijinal satırda gösterir.
sourceMappingURL satırı da çıktıda kalmaz.Beautify (biçimlendirme), küçültmenin tersidir: tek satırlık yoğun kodu girintili satırlara yeniden yayar. Bir üçüncü taraf betiğin ne yaptığını anlamak, yayındaki bir stil dosyasında çakışan kuralı bulmak ya da e-postadan kopyalanan HTML'i incelemek için kullanılır. Sınırını da bilmek gerekir: biçimlendirici silinmiş yorumları ve kısaltılmış değişken adlarını geri getiremez, yalnızca yapıyı görünür kılar.
Küçültme üç yerde zaman kazandırır: ağ üzerinden daha az bayt taşınır, tarayıcı daha az metni ayrıştırır ve ilk görüntüyü geciktiren (render-blocking) CSS ile senkron betikler daha erken biter. Etkinin büyüklüğü tamamen dosyaya bağlıdır. Bol yorumlu, geniş girintili bir kaynak dosyada kazanç büyüktür; zaten sıkı yazılmış bir dosyada küçüktür.
Gerçekçi bakmak da gerekir. Çoğu sitede sayfa ağırlığının büyük kısmı görsellerdir. Küçültülmemiş bir stil dosyası kötü bir alışkanlıktır, ama birkaç megabaytlık sıkıştırılmamış bir kapak fotoğrafı çok daha büyük bir sorundur. Lighthouse gibi denetim araçları küçültülmemiş CSS ve JavaScript'i ayrıca işaretleyebilir; bu uyarıyı düzeltmek kolaydır, ama hız çalışmasına en büyük dosyalardan başlamak daha akıllıcadır.
app.3f9c1a.min.js) ve uzun süreli önbellek başlığıyla sunun.Çalışma hızı neredeyse aynıdır; kazanç indirme ve ayrıştırma aşamasındadır. Tarayıcı boşlukları ve yorumları zaten yok sayar. Küçültme programın mantığını değiştirmez, yalnızca programın motora daha çabuk ulaşmasını sağlar.
Hayır. Küçültülmüş kod bir düzenleyiciden geçirildiğinde yeniden okunur hâle gelir; değişken adları kısaltılmış olsa bile mantık izlenebilir. Gizli kalması gereken anahtarlar ve iş kuralları tarayıcıya gönderilen kodda bulunmamalıdır.
Olabilir. MIT gibi lisanslar telif bildiriminin kopyalarda korunmasını ister. /*! ile başlayan yorumları koruyan bir küçültücü kullanmak ya da lisans metinlerini ayrı bir dosyada yayımlamak bu yükümlülüğü karşılar.
Var, ama fark ham boyutların düşündürdüğü kadar büyük değildir. Sıkıştırma tekrarları yakalar; yorumları ve gereksiz kodu ise yalnızca küçültme ortadan kaldırır. İkisi birlikte en küçük aktarım boyutunu verir.
Sayfa ağırlığının asıl kaynağı olan görseller için görsel sıkıştırma ve web performansı rehberine bakın. Küçük dosyaları koda gömmenin bedelini Base64 nedir yazısında, sayfa daha açılmadan kaybedilen zamanın bir başka kaynağını da 301 ve 302 yönlendirme farkı yazısında anlattık.
