JavaScript Minifier

Tempel JavaScript untuk memperkecilnya dengan Terser: kode mati dihapus, nama dipersingkat, dan spasi hilang. Syntax error ditunjukkan hingga baris dan kolom yang tepat.

Berjalan di browser AndaTanpa daftarTidak ada yang diunggah

Output terminifikasi

Cara menggunakan JavaScript Minifier

  1. Tempel JavaScript Anda atau buka file .js.
  2. Pilih opsi: Mangle nama mempersingkat variabel lokal, Kompres menulis ulang kode menjadi bentuk setara yang lebih kecil, Modul ES mengaktifkan import/export di level atas.
  3. Pilih target ECMAScript yang didukung browser pengguna Anda. ES2020 aman untuk semua browser evergreen.
  4. Periksa ukuran, penghematan, dan estimasi gzip di bawah output.
  5. Salin kode terminifikasi atau unduh sebagai output.min.js.

Apa yang dilakukan JavaScript minifier?

Minifikasi membuat JavaScript lebih kecil tanpa mengubah perilakunya. Tool ini memakai Terser, minifier di balik webpack, Vite, dan Rollup, dan menerapkan tiga jenis perubahan:

  • Penghapusan spasi dan komentar: indentasi, baris baru, dan komentar tidak dibutuhkan oleh engine JavaScript.
  • Mangling: nama variabel lokal dan parameter fungsi seperti subtotal menjadi satu huruf. Nama global dan properti objek tidak disentuh agar API publik Anda tetap berfungsi.
  • Kompresi: ekspresi konstan disederhanakan, kode yang tidak terjangkau dibuang, statement if menjadi ternary, dan fungsi pendek di-inline.

Minify vs. gzip: perlukah keduanya?

Ya. Gzip dan Brotli mengompres pola byte yang berulang saat transfer, sedangkan minifikasi menghapus byte yang seharusnya diunduh, di-parse, dan dikompilasi browser. Script biasa menyusut 40–60% dari minifikasi lalu 60–70% lagi dari gzip. Ukuran gzip yang ditampilkan di sini adalah perkiraan yang baik dari apa yang benar-benar dikirim server Anda.

Mempertahankan komentar lisensi

Banyak lisensi open source (MIT, BSD, Apache) mewajibkan pemberitahuan hak cipta tetap menyertai kode. Sesuai konvensi, komentar yang diawali /*! atau berisi @license atau @preserve dipertahankan saat Pertahankan komentar lisensi aktif.

Kapan sebaiknya tidak minify secara manual

Jika proyek Anda sudah memakai bundler, biarkan bundler yang meminifikasi build produksi dan membuat source map untuk debugging. Minifier online ideal untuk skrip sekali pakai, snippet untuk CMS atau tag manager, bookmarklet, dan untuk melihat seberapa kecil sebuah kode bisa dibuat.

Pertanyaan yang sering diajukan

Apakah kode saya diunggah ke server?
Tidak. Terser berjalan di dalam tab browser Anda, jadi kode proprietary tidak pernah meninggalkan mesin Anda.
Bisakah minifikasi merusak kode saya?
Terser hanya menerapkan transformasi yang menjaga perilaku tetap identik untuk JavaScript yang valid. Kode yang bergantung pada Function.prototype.toString() atau pada nama variabel lokal lewat eval bisa terpengaruh; matikan Mangle nama dalam kasus itu.
Apakah mendukung sintaks modern seperti async/await, class, dan optional chaining?
Ya. Terser mem-parsing sintaks ES2022+. Pengaturan target hanya mengontrol sintaks yang boleh dipakai output; fitur baru tidak ditranspilasi ke versi lama.
Apa bedanya minify dan uglify?
Artinya sama. UglifyJS adalah tool klasiknya; Terser adalah fork yang terus dikelola dengan dukungan penuh ES2015+.

Tools terkait

CSS Minifier Perkecil stylesheet: persingkat nilai dan gabungkan rule duplikat. HTML Minifier Hapus komentar dan spasi, serta minify CSS/JS inline. JSON Formatter Rapikan, minify, dan validasi JSON dengan error per baris/kolom. SQL Formatter Rapikan atau minify SQL untuk PostgreSQL, MySQL, T-SQL, BigQuery, dan lainnya.