Minifier JavaScript
Perkecil file JavaScript dan lihat persis berapa banyak yang kamu hemat.
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- Memperpendek nama variabel
- Menampilkan byte yang dihemat
- Tidak ada yang diupload
Cara minify JavaScript
- Tempel JavaScript kamu.
- Matikan Compress atau Perpendek nama variabel kalau kamu perlu tetap mudah dibaca.
- Salin atau unduh file yang sudah di-minify.
Fungsi masing-masing Compress dan Perpendek nama variabel
| Opsi | Fungsinya |
|---|---|
| Compress | Menghapus dead code dan menyederhanakan ekspresi |
| Perpendek nama variabel | Mengganti nama variabel lokal jadi nama pendek seperti a, b, dan c |
Apa yang tetap sama
- Perilaku publik: input yang sama tetap menghasilkan output yang sama.
- Setiap string di kode, termasuk teks apa pun yang ditampilkan ke pengguna.
- Urutan operasi dijalankan.
- Komentar /*! ... */, karena Terser mempertahankan gaya itu secara default, yang jadi konvensi banyak library untuk banner lisensi.
Tips minify JavaScript
- Simpan salinan yang belum di-minify, atau buat source map di build tool kamu, supaya error production tetap terbaca.
- Matikan Perpendek nama variabel untuk library yang akan dibaca developer lain, supaya pesan error tetap punya nama yang bermakna.
- Jalankan test terhadap hasil minify sebelum merilisnya, karena edge case langka di sebuah minifier tetap mungkin terjadi walau yang ini sudah banyak dipakai.
FAQ Minifier JavaScript
Apakah JavaScript yang sudah di-minify masih kode yang valid?
Ya. Ini jalan persis sama seperti aslinya, hanya dengan nama yang lebih pendek dan tanpa whitespace ekstra.
Berapa banyak JavaScript biasanya mengecil?
Sering kali 30 sampai 60 persen lebih kecil, tergantung berapa banyak komentar dan nama variabel panjang yang dimiliki aslinya.
Apa yang terjadi kalau kodeku punya syntax error?
Error-nya ditampilkan dengan baris dan kolom di mana itu terjadi, jadi kamu bisa memperbaikinya dan coba lagi.
Apa bedanya Compress dan Perpendek nama variabel?
Compress menulis ulang kode untuk menghapus cabang mati dan menyederhanakan ekspresi. Perpendek nama variabel mengganti nama variabel lokal jadi satu huruf. Kamu bisa mematikan salah satunya saja.
Bisakah ini minify sintaks modern seperti async dan arrow function?
Bisa, termasuk sintaks ES2020 ke atas seperti optional chaining dan async atau await.
Minifier apa yang dipakai di sini?
Terser, penerus standar UglifyJS dan minifier yang dipakai secara default oleh kebanyakan bundler, termasuk webpack, Rollup, dan esbuild.
Bisakah minify merusak kodeku?
Seharusnya tidak mengubah perilaku untuk kode normal. Kode yang membaca nama asli sebuah fungsi atau variabel saat runtime, misalnya lewat trik introspeksi non-standar, bisa rusak setelah namanya diperpendek. Matikan Perpendek nama variabel kalau ini berlaku untukmu.
Apakah ini mendukung sintaks TypeScript?
Tidak, ini mengharapkan JavaScript polos. Anotasi tipe TypeScript bukan JavaScript yang valid dan akan menyebabkan syntax error di sini, jadi compile dulu TypeScript ke JavaScript.