Peminimum & Pemformat JavaScript

Apakah alat ini?

Peminimum JavaScript menulis semula kod supaya sekecil mungkin sambil bertindak sama: ia memendekkan nama pemboleh ubah dan fungsi apabila selamat, membuang komen dan ruang kosong, melipat pemalar, dan menghapuskan kod yang tidak boleh dicapai.

Alat ini dibina atas Terser, peminimum berasaskan AST yang digunakan oleh webpack, Vite, Rollup dan kebanyakan alat pembinaan JavaScript moden. Oleh sebab ia benar-benar menghurai kod anda dan bukannya memadankan corak teks, ia betul membezakan operator bahagi daripada literal regex, tidak merosakkan rentetan templat yang mengandungi jujukan kelihatan //, dan tidak akan menamakan semula pemboleh ubah kepada nama yang berlanggar dengan sesuatu dalam skop luar.

Kenapa guna alat ini?

• Peminimuman berasaskan AST (Terser), enjin yang sama digunakan oleh pembundel utama — selamat dengan literal regex, rentetan templat dan penutup (closures).
• Mengaburkan nama pemboleh ubah untuk penjimatan saiz sebenar, bukan sekadar membuang ruang kosong.
• Lihat tepat berapa banyak bait dan peratusan yang anda jimatkan.
• Mod Format mengubah JS yang diminimumkan dan sukar difahami kembali kepada kod yang boleh dibaca dan berindent — berguna untuk memahami skrip pihak ketiga.
• Pemprosesan 100% tempatan — kod milik anda tidak pernah meninggalkan pelayar anda.

Cara menggunakannya

1. Tampal JavaScript anda ke dalam kotak input, atau klik "Load Example" untuk mencuba sampel dengan literal regex dan rentetan templat.
2. Klik "Minify" untuk memampatkannya, atau "Format" untuk mencantikkannya dengan indent 2 ruang.
3. Semak mesej di bawah kotak — mod minify menunjukkan pengurangan saiz; ralat sintaks dalam kod anda menunjukkan mesej yang jelas dan bukannya menghasilkan output rosak secara senyap.
4. Klik "Copy" untuk mendapatkan hasil.

Contoh

Input

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

Hasil

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

Nama pemboleh ubah dipendekkan, komen dan pernyataan if digabungkan menjadi ungkapan, tetapi literal regex dan rentetan templat dikekalkan tepat dan tingkah laku tidak berubah.

Tip praktikal

• Minimumkan pada masa pembinaan, bukan dengan menyunting tangan — kekalkan sumber yang boleh dibaca di bawah kawalan versi dan jana bundel diminimumkan sebagai langkah pembinaan.
• Jika output diminimumkan berkelakuan tidak dijangka, semak kod yang bergantung pada Function.prototype.name atau refleksi — pengaburan menamakan semula fungsi dan itu boleh muncul dalam kes tepi yang jarang berlaku.
• Memformat skrip pihak ketiga sebelum membacanya jauh lebih pantas berbanding cuba menghurai satu baris sepanjang 2,000 aksara.
• Gabungkan dengan peminimum HTML dan CSS di bawah jika anda menyediakan bundel statik penuh untuk penggunaan.

Kedudukan ini dalam aliran kerja sebenar

JavaScript biasanya adalah aset penyekat-render atau penyekat-huraian terbesar pada sesuatu halaman, jadi meminimumkannya memberikan kesan sebenar dan boleh diukur pada masa memuat — lebih daripada HTML atau CSS bait demi bait. Kebanyakan rangka kerja moden melakukan ini secara automatik pada masa pembinaan, tetapi skrip yang ditulis tangan, sambungan pelayar dan bookmarklet selalunya dihantar tanpa diminimumkan melainkan seseorang menjalankannya melalui alat seperti ini.

Arah Format biasa digunakan secara sebaliknya: menyahpepijat ralat pengeluaran daripada surih tindanan yang diminimumkan jauh lebih mudah setelah kod sekeliling diformat semula dan boleh dibaca, walaupun tanpa nama pemboleh ubah asal.

→ Pemampat & Pemformat HTML · Pemin CSS

Kes penggunaan biasa

• Mengecilkan skrip berdiri sendiri atau bookmarklet sebelum menerbitkannya.
• Memformat semula skrip diminimumkan yang diambil daripada laman langsung untuk memahami apa yang ia lakukan.
• Membersihkan JavaScript yang ditampal daripada hantaran forum atau serpihan yang dijana AI sebelum membacanya dengan teliti.
• Menyemak dengan pantas sama ada serpihan JS yang ditulis tangan mempunyai ralat sintaks, kerana kegagalan huraian muncul sebagai mesej yang jelas.

Soalan lazim