CSS / JS Küçültücü

Kod küçültücü nasıl kullanılır?

Üstteki sekmelerden CSS veya JavaScript modunu seçin, kodunuzu kutuya yapıştırın, "Küçült" butonuna tıklayın. Sonuç aşağıdaki kutuda görünür, boyut karşılaştırması da hemen üstünde gösterilir. "Kopyala" ile küçültülmüş kodu panonuza alabilirsiniz.

Kod küçültme (minification) nedir?

Küçültme, kodun çalışmasını etkilemeyen gereksiz karakterleri (boşluk, satır sonu, yorum satırları) kaldırarak dosya boyutunu azaltma işlemidir. Daha küçük dosyalar, tarayıcı tarafından daha hızlı indirilir ve işlenir, bu da sayfa yükleme hızını doğrudan iyileştirir.

Önemli bir not: JavaScript küçültmesi hakkında

Bu araçtaki CSS küçültme tam kapsamlıdır. JavaScript küçültmesi ise "hafif" seviyededir: yorumları ve gereksiz boşlukları kaldırır, ancak değişken isimlerini kısaltmaz veya kodu yeniden yapılandırmaz (bunun için Terser gibi tam bir derleyici gerekir). Üretim (production) ortamına çıkmadan önce küçültülmüş kodu test etmenizi öneririz.

Kod küçültme (minify) site hızını nasıl etkiler?

Küçültülmüş dosyalar daha az bayt içerdiğinden, tarayıcının indirmesi gereken veri miktarı azalır — bu da özellikle mobil bağlantılarda ve büyük CSS/JS dosyalarında sayfa yükleme süresini gözle görülür şekilde kısaltabilir.

Küçültülmüş kodu geri eski haline getirebilir miyim?

Küçültme işlemi geri döndürülemez bir şekilde yorumları ve boşlukları siler, bu yüzden orijinal, okunabilir kaynak dosyanızı ayrı bir yerde saklamanız önemlidir. Küçültülmüş dosya sadece üretim/yayın için kullanılmalı, geliştirme sırasında orijinal dosya üzerinde çalışılmalıdır.

CSS ve JS küçültme arasındaki fark nedir?

CSS küçültme, seçici ve özellik yapısı nispeten basit olduğu için tam kapsamlı yapılabilir. JavaScript ise değişken kapsamları, fonksiyonlar ve çalışma zamanı davranışı içerdiğinden, güvenli bir şekilde tam küçültme yapmak daha karmaşıktır — bu yüzden bu araç JS için sadece temel (yorum/boşluk temizleme) düzeyde küçültme uygular.