Cara menggunakan Minifier JavaScript
- Tempel JavaScript kamu atau buka file
.js. - Biarkan Compress dan Mangle names aktif agar hasilnya paling kecil; centang ES module untuk kode dengan
import/export. - Opsional: hapus panggilan
consoledan pilih komentar mana yang ingin disimpan. - Salin hasilnya atau unduh sebagai
.min.js.
Apa fungsi minifier JavaScript?
Minifikasi membuat file JavaScript lebih kecil tanpa mengubah cara kerjanya. Prosesnya menghapus spasi dan komentar, memendekkan nama variabel dan fungsi lokal, serta menulis ulang kode ke bentuk lain yang lebih ringkas tetapi setara. File yang lebih kecil lebih cepat diunduh dan diurai, sehingga membantu kecepatan halaman dan Core Web Vitals, terutama di perangkat seluler.
Tool ini menjalankan Terser, minifier di balik Vite, webpack, dan Rollup, langsung di browser kamu.
Opsi utama
| Opsi | Fungsinya | Risiko |
|---|---|---|
| Compress | Menghapus kode yang tidak pernah dijalankan, menggabungkan konstanta (60 * 60 → 3600), menyederhanakan kondisi, dan menggabungkan pernyataan | Sangat rendah |
| Mangle names | Mengganti nama variabel dan parameter lokal menjadi satu atau dua huruf | Rendah — kode yang memakai eval atau Function.name bisa rusak |
| Mangle top-level | Juga mengganti nama fungsi dan variabel global | Merusak kode lain yang memanggil fungsi tersebut dengan nama |
| ES module | Mengurai import/export dan mengaktifkan strict mode serta mangling tingkat atas | Tidak ada untuk modul sungguhan |
| Remove console.* | Menghapus console.log dan panggilan sejenis | Menghilangkan log yang mungkin masih dibutuhkan di produksi |
Minifikasi vs kompresi
Minifikasi dan kompresi gzip/Brotli bekerja bersama. Minifikasi biasanya memangkas 30–60 % ukuran file; lalu kompresi gzip atau Brotli di server memperkecil sisanya lagi sebesar 60–70 %. Statistik di atas menampilkan keduanya: ukuran hasil minify dan ukuran gzip yang benar-benar dikirim lewat jaringan.
Pertahankan komentar lisensi
Lisensi open-source seperti MIT mewajibkan pemberitahuan hak cipta tetap menyertai kode. Sesuai konvensi, komentar ini diawali /*! atau memuat @license, dan pengaturan default akan menyimpannya.
Pemecahan masalah
- Syntax error: baris dan kolom kesalahan akan ditampilkan. TypeScript dan JSX harus dikompilasi ke JavaScript terlebih dahulu.
- Kode berhenti berfungsi setelah mangling: matikan Mangle top-level names; jika belum membantu, cek penggunaan
evalatau kode yang membaca nama fungsi. - Butuh versi yang mudah dibaca lagi? Gunakan formatter JavaScript untuk merapikan kembali kode hasil minify.
Juga dicari sebagai: minify js, kompres javascript, perkecil kode js, minify javascript online, uglify js online, terser online, minify es6.
Tool yang cocok dipakai bersama Minifier JavaScript
- Minify HTML — Perkecil halaman dan template HTML dengan menghapus komentar serta spasi yang tidak perlu, meminify <style> dan <script> inline, dan merapikan atribut, tanpa mengubah tampilan tata letak.
- CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
- Minifier JSON — Hapus semua spasi yang tidak perlu dari JSON, validasi sekaligus, dan lihat berapa byte yang berhasil dihemat, baik sebelum maupun sesudah gzip.
- Tes Kompresi Website — Masukkan URL untuk melihat kompresi apa yang dikirim server untuk setiap Accept-Encoding, berapa byte yang dihemat, apakah CSS dan JavaScript-nya sudah terkompresi, dan berapa penghematan yang bisa didapat dengan Brotli.
Pertanyaan yang sering diajukan
Apakah Terser lebih baik dari UglifyJS?
Apakah kode hasil minify akan berjalan persis sama?
eval, with, atau nama fungsi saat runtime; matikan mangling untuk kode seperti itu.