Softonic

JavaScript Minörü

Adım 1 / 3

En fazla 1.000.000 karakterlik bir betik veya ES modülü yapıştırın ya da bir .js dosyası açın.

Sonraki: seçenekleri seç

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 /* */ yorumlarını siler (/*! gibi lisans yorumları korunabilir)
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
İfade birleştirme ve boolean değerler a(); b(); → a(),b();, true → !0

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

  • Güvenli mod değişken adlarını korur, yalnızca boşlukları ve yorumları 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[key], 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_" + type]) 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ı (source map) da oluştur” seçeneğini işaretleyin; küçültülmüş kodla birlikte bir .map dosyası alırsınız. Bu dosya küçültülmüş kodu orijinal satırlarınıza ve adlarınıza bağlar, böylece tarayıcının DevTools araçları okunabilir kod ve yığın izleri gösterir. İki dosyayı da aynı klasörden sunun: küçültülmüş kod, haritayı dosya adıyla bulan bir //# sourceMappingURL= yorumuyla biter. Harita orijinal kodunuzu içerir; bu yüzden onu yalnızca bu kodu herkesin okuyabileceği yerlerde yayımlayın.

Evet. Üst düzey await (ES modüllerinde), sınıf alanları, özel yöntemler, null birleştirme (nullish coalescing), isteğe bağlı zincirleme (optional chaining) ve sayısal ayraçlar desteklenir. Dekoratörler desteklenmez: bunları TypeScript veya JSX gibi önce düz JavaScript’e derleyin. Küçültücü yeni sözdizimini hiçbir zaman eski bir sürüme dönüştürmez: ECMAScript sürümü seçeneği yalnızca küçültülmüş kodun bayt kazanmak için kullanabileceği en yeni sözdizimini belirler.

Hayır. Yapıştırdığınız veya açtığınız kod tarayıcınızda küçültülür. Sunucularımıza gönderilmez ve sayfa bağlantısına eklenmez. Adımlar arasında bu sekmenin oturum depolama alanında tutulur; tarayıcı, sekmeyi kapattığınızda bu alanı temizler.

İlgili Araçlar

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.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur