Araçlarım

JS ve CSS küçült

Kod yapıştırın, küçültülmüş sürüm siz yazarken görünsün — kazanılan karakterlerle birlikte.

Nasıl kullanılır

  1. JavaScript veya CSS'i kutuya yapıştırın — küçültülmüş sürüm siz yazarken görünür, basılacak bir düğme yok.
  2. Sözdizimini Otomatik'te bırakın ya da algılama tahmininde yanıldıysa JavaScript / CSS'i kendiniz seçin; sonuç anında yeniden çizilir.
  3. Başlık, kazanılan karakterleri önce → sonra biçiminde gösterir. Çıktıyı kopyalayın veya .js / .css dosyası olarak indirin.

Örnek

Girdi

// Cart total with the free-shipping badge
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

Küçültülmüş

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

Yorum gitti ve boşluklar daraldı, ama her tanımlayıcı adını, her sabit değer tam yazılışını koruyor. Ölçüm 279 → 177 karakter diyor (−%37).

Kurallar, sınırlar ve bilinen sorunlar

  • Yalnızca boşluklar ve yorumlar. Hiçbir şey yeniden adlandırılmaz, hiçbir deyim katlanmaz ve kod silinmez — bu yüzden küçültülmüş çıktı özgünü gibi davranır, ancak Terser üreticinden daha büyüktür.
  • /*! veya //! ile başlayan yorumlar ile @license ya da @preserve anan yorumlar korunur; diğer tüm yorumlar silinir.
  • Satır sonları, silinmesi programı değiştireceği her yerde kalır: return / throw / break / continue / yield / async sonrasında ve JavaScript'in kendiliğinden noktalı virgül koyacağı iki deyim arasında (a\nb, x={}\nfoo()). Çoğu kalan kod tek satır olarak çıkar.
  • JavaScript ayrıştırılmaz, belirteçlere bölünür: bir dize, normal ifade veya şablon dizesi içindeki "/*" asla değiştirilmez. Bölme ile normal ifade, önceki belirtece göre ayırt edilir; satır aşan bir normal ifade bölme işlemi sayılır.
  • CSS yalnızca hiçbir şey ifade edemeyecek boşlukları yitirir: { } ; , > ~ ! çevresindeki, ":" sonrasındaki ve bir "}" önündeki son ";" silinir. Alt öğe (descendant) boşlukları kalır (.a .b, .a.b olmaz), ":" önündeki boşluk kalır (a :hover, a:hover değildir) ve calc(100% - 10px) boşluklarını korur çünkü bunlar sözdiziminin parçası.
  • Yeniden adlandırma (mangle), ölü kod silme ve drop_console yoktur: bunlar davranışı değiştirir; bir "küçült" düğmesinin sessizce yapacağı şeyler değildir.
  • Desteklenmeyenler: HTML/SVG (oralardaki boşluk <pre>, <textarea> ve satır içi öğelere bağlıdır), TypeScript tür düzeyi yeniden yazımları, JSX/TSX girdisi, kaynak haritaları ve çok dosyalı birleştirme. JSX algılanır ve bir uyarıyla işaretlenir.
  • Girdinin sonunda kapanmamış bir dize, şablon, yorum veya url( hata değil uyarıdır: kodun kalanı yine de küçültülür. Dengesiz ayraçlar da uyarıdır — bu bir doğrulayıcı değildir.
  • Ölçümler bayt değil, UTF-16 birimi de değil, Unicode kod noktası sayar; yüzdeler tam sayıya yuvarlanır ve çıktı büyürse +n% olarak gösterilir. Her şey tarayıcınızda çalışır: hiçbir şey yüklenmez, saklanmaz veya URL'ye eklenmez.
  • 200.000 karakter üzerinde sonuç, yazmayı bıraktıktan yaklaşık 0,6 s sonra güncellenir; metin asla kesilmez. Çıktı LF kullanır ve sonda satır sonu yoktur.

Kod küçüldükten sonra genellikle sırada ihtiyaç duyulan şeyler.

Kod biçimlendirici (güzelleştirici)

JSON araç kutusu

XML biçimlendirici