JavaScript Küçültücü ve Biçimlendirici

Bu Araç Nedir?

Bir JavaScript minifikatörü, kodun aynı şekilde çalışmasını sağlarken mümkün olduğunca küçük hale getirmek için kodu yeniden yazar: güvenli olduğu durumlarda değişken ve işlev adlarını kısaltır, yorumları ve boşlukları kaldırır, sabitleri birleştirir ve erişilemeyen kodları ortadan kaldırır.

Bu araç, webpack, Vite, Rollup ve çoğu modern JavaScript derleme aracı tarafından kullanılan, AST tabanlı bir kod küçültücü olan Terser üzerine geliştirilmiştir. Metni kalıp eşleştirme yerine kodunuzu gerçekten ayrıştırdığı için, bölme operatörünü düzenli ifade sabitinden doğru bir şekilde ayırt eder, //'ye benzeyen diziler içeren şablon dizelerini bozmaz ve bir değişkeni dış kapsamdaki bir öğeyle çakışan bir ada yeniden adlandırmaz.

Neden Kullanmalısınız?

• AST tabanlı kod küçültme (Terser); önde gelen paketleyiciler tarafından da kullanılan aynı motor — düzenli ifade sabitleri, şablon dizeleri ve kapanışlarla uyumludur.
• Sadece boşlukları kaldırmakla kalmayıp, gerçek boyut tasarrufu sağlamak için değişken adlarını değiştirir.
• Tam olarak kaç bayt ve yüzde kaç tasarruf ettiğinizi görün.
• Biçimlendirme modu, karmaşık hale getirilmiş, tek satırlık ve küçültülmüş JS kodunu tekrar okunabilir, girintili bir koda dönüştürür — bu, üçüncü taraf komut dosyalarını anlamak için yararlıdır.
• %100 yerel işleme — özel kod, tarayıcınızdan asla dışarı çıkmaz.

Nasıl Kullanılır

1. JavaScript kodunuzu giriş kutusuna yapıştırın veya "Örneği Yükle" seçeneğine tıklayarak, düzenli ifade sabiti ve şablon dizesi içeren bir örneği deneyin.
2. Sıkıştırmak için "Minify" düğmesine tıklayın ya da 2 boşlukluk girintiyle metni düzgün bir şekilde biçimlendirmek için "Format" düğmesine tıklayın.
3. Kutuların altındaki mesajı kontrol edin — minify modu, boyut azalmasını gösterir; kodunuzdaki bir sözdizimi hatası, hatalı çıktı üretip sessizce geçiştirmek yerine net bir mesaj gösterir.
4. Sonucu almak için "Kopyala" düğmesine tıklayın.

Örnek

Giriş

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Çıkış

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Değişken adları kısaltılır, açıklama ve if ifadesi bir ifadeye indirgenir; ancak düzenli ifade sabiti ve şablon dizesi aynen korunur ve davranışta herhangi bir değişiklik olmaz.

Pratik ipuçları

• El ile düzenleme yerine derleme sırasında minifiye edin — okunabilir kaynak kodunu sürüm kontrolü altında tutun ve minifiye edilmiş paketi bir derleme adımı olarak oluşturun.
• Minifiye edilmiş çıktı beklenmedik bir şekilde davranıyorsa, Function.prototype.name veya yansıma (reflection) özelliğine dayanan kod olup olmadığını kontrol edin — kod karıştırma işlemi fonksiyonların adlarını değiştirir ve bu durum nadir görülen istisnai durumlarda ortaya çıkabilir.
• Üçüncü taraf bir komut dosyasını okumadan önce biçimlendirmek, 2.000 karakterlik tek bir satırı ayrıştırmaya çalışmaktan çok daha hızlıdır.
• Dağıtım için tam bir statik paket hazırlıyorsanız, bunları aşağıdaki HTML ve CSS küçültme araçlarıyla birleştirin.

Bunun gerçek iş akışlarında nasıl bir yeri var?

JavaScript genellikle bir sayfadaki en büyük görüntülemeyi veya ayrıştırmayı engelleyen öğedir; bu nedenle onu küçültmek, yükleme süresi üzerinde gerçek ve ölçülebilir bir etkiye sahiptir — bayt bazında HTML veya CSS’ten daha fazla. Çoğu modern çerçeve, bunu derleme aşamasında otomatik olarak yapar; ancak elle yazılmış komut dosyaları, tarayıcı uzantıları ve yer imi komutları, genellikle birisi bunları bu tür bir araçtan geçirmediği sürece minifiye edilmemiş olarak dağıtılır.

Format komutu genellikle tam tersi şekilde kullanılır: Çevredeki kod yeniden biçimlendirilip okunabilir hale getirildiğinde, orijinal değişken adları olmasa bile, küçültülmüş bir yığın izinden bir üretim hatasını gidermek çok daha kolay hale gelir.

→ HTML Küçültücü · CSS Küçültücü

Yaygın kullanım örnekleri

• Bağımsız bir komut dosyasını veya yer imi komutunu yayınlamadan önce küçültme.
• Canlı bir siteden alınan minifiye edilmiş bir komut dosyasını, ne işe yaradığını anlamak için yeniden biçimlendirme.
• Bir forum gönderisinden yapıştırılan veya yapay zeka tarafından oluşturulan JavaScript kodunu, dikkatlice okumadan önce temizlemek.
• El yazısı bir JS kod parçacığında sözdizimi hatası olup olmadığını hızlıca kontrol etmek; zira sözdizimi hatası, açık bir mesaj olarak görüntülenir.

Sıkça Sorulan Sorular