JavaScript ve CSS Küçültücü

Ne işe yarar

Küçültme (minification), bir tarayıcının kodunuzu çalıştırmak için ihtiyaç duymadığı her şeyi kaldırır: boşluklar, satır sonları, yorumlar ve uzun adlar. Daha küçük dosyalar daha hızlı indirilir; bu da özellikle mobil ağlarda sayfa yükleme süresini ve Core Web Vitals değerlerini iyileştirir.

Bu araç JavaScript’i webpack, Rollup ve Vite’ın kullandığı küçültücü olan Terser ile, CSS’i ise stil dosyalarını yeniden yapılandıran CSSO ile küçültür: CSSO renkleri kısaltır (#ffffff → #fff), gereksiz birimleri ve değerleri kaldırır (0px 0px → 0) ve seçicileri veya bildirimleri ortak olan kuralları birleştirir.

Nasıl kullanılır

1. Kodu Girdi kutusuna yapıştırın, üzerine bir .js veya .css dosyası bırakın ya da Örnek düğmesine tıklayın.
2. JavaScript veya CSS seçin.
3. JavaScript için Değişken adlarını kısalt, yerel değişkenleri ve parametreleri tek harfe yeniden adlandırır. Dışa aktarılan ve global adlar asla değiştirilmez.
4. CSS için Yinelenen kuralları birleştir, aynı bildirimlere sahip kuralları birleştirir.
5. Sonucu kopyalayın veya indirin. Her kutunun altındaki boyut sayaçları ne kadar tasarruf ettiğinizi gösterir.

JavaScript’te bir sözdizimi hatası varsa hata mesajı satırı ve sütunu gösterir; böylece doğrudan oraya atlayabilirsiniz.

Örnek

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

şuna dönüşür:

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Ne zaman kullanılmalı

Hızlı, tek seferlik işler için kullanın: bir CDN için kod parçası, bir HTML e-postasındaki satır içi betik, bir bookmarklet veya bir kütüphanenin ne kadar küçülebileceğini görmek için. Gerçek bir projede ise kaynak kodun okunabilir kalması için bundler’ınız her derlemede küçültme yapmalıdır.