Softonic

JavaScript Minörü

Adım 1 / 3
Sonraki

JavaScript kodunu yapıştırın ve boşluklar çıkarılmış, değişkenler tek harflere indirilmiş, işlevsiz dallar kaldırılmış, sabitler kısaltılmış ve (etkinleştirdiğinizde) yorumlar silinmiş olan, %40–70 daha küçük bir kısaltılmış versiyon elde edin. Tam bir derleme zinciri kullanmadığınız hızlı boyut kontrolü, tek kullanımlık gömme içeriği veya giriş sayfaları için uygundur.

JavaScript nasıl küçültülür

  1. 1

    Kaynağı yapıştırın

    Geçerli herhangi bir ES5+ JavaScript kodu. ES6 ve üzeri için (şablon dizgileri, sınıflar, modüller) hedefinizin uyumlu olduğundan emin olun.

  2. 2

    Küçültme düzeyini seçin

    Güvenli (boşluk + yorumlar); varsayılan (+ değişken adı küçültme); agresif (+ özellik adı küçültme, DOM erişimini bozabilir).

  3. 3

    Küçült

    Araç, Terser ile uyumlu bir dönüşüm uygular ve sonucu, öncesi/sonrası bayt sayılarıyla birlikte verir.

  4. 4

    Kopyalayın veya indirin

    Çıktıyı bir `<script>` etiketine yapıştırın veya CDN'inizden sunmak için `.min.js` olarak kaydedin.

Baytlar nereye gider

Tipik bir küçültülmüş dosya, kaynaktan %40–70 daha küçüktür. Bunu gzip (veya Cloudflare ile çoğu CDN’in kullandığı Brotli) ile sıkıştırmak %60–75 daha kazandırır. İkisi birleşince 100 KB’lık bir kaynak, ağ üzerinden yaklaşık 15–25 KB olarak iletilebilir.

Kaynak Küçültülmüş +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Uygulanan teknikler

Teknik Ne yapar
Boşluk kaldırma Boşlukları, sekmeleri ve satır sonlarını siler
Yorum kaldırma // ve /* */ ifadelerini siler (!important hariç)
Değişken adı küçültme userName adını u olarak değiştirir (kapsam açısından güvenli)
Özellik adı küçültme obj.foo adını obj.a olarak değiştirir (GÜVENLİ DEĞİL)
Sabit katlama 1 + 2 + 3 → 6
Ölü kod temizleme return sonrasındaki dalları kaldırır
Kontrol akışını satır içine alma Bir kez kullanılan küçük fonksiyonları satır içine alır
Dize değişmezi sıkıştırma Tekrarlanan dize sabitlerini birleştirir

Güvenli mod ve agresif mod karşılaştırması

  • Güvenli mod değişken adlarını korur, yalnızca boşlukları siler. Okunabilir yığın izlerine ihtiyaç duyduğunuz hata ayıklama için uygundur.
  • Varsayılan mod yerel değişkenleri küçültür ancak küresel adları ve özellik adlarını korur. Kodun çoğuyla çalışır.
  • Agresif mod, özellik adları dahil her şeyi küçültür. Ayrılmış adları yapılandırmadığınız sürece, özelliklere dinamik olarak erişen kodu (obj["prop"], Object.keys(obj)) çoğu zaman bozar.

Ne zaman küçültmeli, ne zaman küçültmemeli

  • Tarayıcının indirdiği her varlığı, üretim ortamında küçültün.
  • Hata ayıklama sırasında tarayıcının DevTools’unun orijinal adları gösterebilmesi için bir kaynak haritası sunun.
  • Geliştirme sırasında küçültmeyin; derleme süresini boşa harcar ve okunabilir hataları kaybedersiniz.
  • Zaten küçültülmüş kodu yeniden küçültmeyin. .min.js dosyaları yeniden küçültmede yalnızca %1–3 küçülürken bozulma riski taşır.

Yaygın hatalar

  • Ayrılmış adları yapılandırmamak. payment_method özelliği a olarak küçültüldüğünde dinamik özellik erişimi (obj["payment_method"]) bozulur.
  • Kaynak haritalarını unutmak. .map dosyaları olmadan üretim hataları okunamaz.
  • CommonJS ve ESM’yi birlikte küçültmek. Karışık modül sistemleri, küçültmeden önce dikkatli bir tree-shaking gerektirir.

Sık Sorulan Sorular

Genellikle sıkıştırılmamış halde %40–70 daha küçük olur; gzip veya Brotli ile sıkıştırıldığında %60–75 daha küçülür. 100 KB’lık bir kaynak genellikle ağ üzerinden yaklaşık 15–25 KB olarak iletilir.

Varsayılan (yerel değişken) küçültme neredeyse her zaman güvenlidir. Agresif özellik adı küçültme ise özelliklere dinamik olarak erişen tüm kodları bozar. Etkinleştirmeden önce reserved listesini dikkatlice yapılandırın.

Evet, “Kaynak haritası oluştur” seçeneğini açın; araç, küçültülmüş kodun yanı sıra her baytı orijinal kaynağa geri eşleyen bir .map dosyası döndürür. İkisini de CDN’inize yükleyin ki DevTools okunabilir yığın izlerini gösterebilsin.

Evet, top-level await, sınıf alanları, özel yöntemler, null birleştirme (nullish coalescing), isteğe bağlı zincirleme (optional chaining) ve sayısal ayraçların tamamı desteklenir. Çok yeni öneriler (decorator stage-3 gibi) için ilgili bayrağı kontrol edin.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur