Minifier JavaScript & CSS

Fungsinya

Minify menghapus semua yang tidak dibutuhkan browser untuk menjalankan kode Anda: whitespace, pindah baris, komentar, dan nama yang panjang. File yang lebih kecil diunduh lebih cepat, sehingga memperbaiki waktu muat halaman dan Core Web Vitals, terutama di jaringan seluler.

Alat ini me-minify JavaScript dengan Terser, minifier yang dipakai webpack, Rollup, dan Vite, dan CSS dengan CSSO, yang juga merestrukturisasi stylesheet: menyingkat warna (#ffffff menjadi #fff), menghapus satuan dan nilai yang berlebihan (0px 0px menjadi 0), dan menggabungkan aturan yang memiliki selector atau deklarasi yang sama.

Cara menggunakan

1. Tempel kode ke kotak Input, seret file .js atau .css ke sana, atau klik Contoh.
2. Pilih JavaScript atau CSS.
3. Untuk JavaScript, Persingkat nama variabel mengganti nama variabel lokal dan parameter menjadi satu huruf. Nama yang diekspor dan global tidak pernah diubah.
4. Untuk CSS, Gabungkan aturan duplikat menyatukan aturan dengan deklarasi yang sama.
5. Salin hasilnya atau unduh. Penghitung ukuran di bawah setiap kotak menunjukkan berapa banyak yang Anda hemat.

Jika JavaScript memiliki syntax error, pesan error menampilkan baris dan kolomnya sehingga Anda bisa langsung melompat ke sana.

Contoh

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

menjadi

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Kapan memakainya

Gunakan untuk keperluan cepat sekali pakai: potongan kode untuk CDN, script inline di email HTML, bookmarklet, atau untuk mengecek seberapa kecil sebuah library bisa dibuat. Di proyek sungguhan, bundler Anda sebaiknya melakukan minify di setiap build agar kode sumber tetap mudah dibaca.