Alat saya

Minifikasi JS & CSS

Tempel kode dan versi terminifikasi muncul saat mengetik — dengan karakter yang dihemat.

Cara menggunakan

  1. Tempel JavaScript atau CSS ke kotak — versi terminifikasi muncul saat Anda mengetik, tidak ada tombol yang perlu ditekan.
  2. Biarkan sintaks di Otomatis, atau pilih JavaScript / CSS sendiri bila deteksinya salah; hasilnya langsung dirender ulang.
  3. Header menampilkan karakter yang dihemat sebelum → sesudah. Salin keluarannya atau unduh sebagai berkas .js / .css.

Contoh

Masukan

// 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 };
}

Terminifikasi

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};}

Komentarnya hilang dan spasinya dirapatkan, tetapi setiap pengenal tetap memakai namanya dan setiap literal tetap memakai ejaan persisnya. Bacaan menunjukkan 279 → 177 karakter (−37%).

Aturan, batasan, dan masalah yang diketahui

  • Hanya spasi dan komentar. Tidak ada yang diganti nama, tidak ada pernyataan yang dilipat, dan tidak ada kode yang dibuang — jadi keluaran terminifikasi berperilaku seperti aslinya, tetapi lebih besar daripada hasil Terser.
  • Komentar yang diawali /*! atau //!, serta komentar yang menyebut @license atau @preserve, dipertahankan; komentar lain dibuang.
  • Jeda baris tetap ada di tempat yang penghapusannya akan mengubah program: setelah return / throw / break / continue / yield / async, dan di antara dua pernyataan yang akan membuat JavaScript menyisipkan titik koma otomatis (a\nb, x={}\nfoo()). Sebagian besar kode lain keluar sebagai satu baris.
  • JavaScript ditokenkan, bukan diurai: "/*" di dalam string, ekspresi reguler, atau template literal tidak pernah disentuh. Pembagian dan ekspresi reguler dibedakan dari token sebelumnya; regex yang merentang baris diperlakukan sebagai pembagian.
  • CSS hanya kehilangan spasi yang tidak mungkin bermakna: di sekitar { } ; , > ~ ! dan setelah ":", serta ";" terakhir sebelum "}". Spasi keturunan tetap (.a .b bukan .a.b), spasi sebelum ":" tetap (a :hover bukan a:hover), dan calc(100% - 10px) mempertahankan spasinya karena bagian dari sintaks.
  • Tanpa penggantian nama (mangle), tanpa penghapusan kode mati, tanpa drop_console: semua itu mengubah perilaku, yang bukan tugas tombol "minifikasi" untuk dilakukan diam-diam.
  • Tidak didukung: HTML/SVG (spasinya bergantung pada <pre>, <textarea>, dan elemen inline), penulisan ulang tingkat tipe TypeScript, masukan JSX/TSX, source map, dan penggabungan multi-berkas. JSX dideteksi dan ditandai dengan peringatan.
  • String, template, komentar, atau url( yang tidak ditutup di ujung masukan adalah peringatan, bukan kesalahan: sisa kodenya tetap diminifikasi. Kurung yang tidak berpasangan juga peringatan — ini bukan validator.
  • Bacaan menghitung titik kode Unicode, bukan byte dan bukan unit UTF-16; persentase dibulatkan ke bilangan bulat dan ditampilkan sebagai +n% bila keluarannya membesar. Semua berjalan di peramban Anda: tidak ada yang diunggah, disimpan, atau ditambahkan ke URL.
  • Di atas 200.000 karakter, hasil diperbarui sekitar 0,6 dtk setelah Anda berhenti mengetik; teksnya tidak pernah dipotong. Keluaran memakai LF dan tanpa baris baru di akhir.

Yang biasanya dibutuhkan berikutnya setelah kodenya kecil.

Pemformat kode (perapi)

Kotak alat JSON

Pemformat XML