Minify JavaScript _

Cara kerja minifikasi JavaScript

Terser bekerja dalam empat tahap pada Abstract Syntax Tree kode Anda. Setiap tahap independen, sehingga Anda bisa mengaktifkan atau menonaktifkan salah satunya tanpa merusak yang lain.

1. Parse. Terser mengurai JavaScript Anda menjadi AST. Setiap kesalahan sintaks muncul di sini beserta token dan baris yang menyebabkannya, sehingga Anda menemukan masalah nyata sebelum transformasi apa pun berjalan. Parser menerima setiap konstruk ECMAScript standar hingga proposal stage-4 terbaru.
2. Compress. Kompressor menelusuri AST dan menerapkan lusinan transformasi yang mempertahankan semantik: pelipatan konstanta, eliminasi cabang mati, inlining fungsi pendek murni, penggabungan deklarasi var berurutan, dan penulisan ulang bentuk pernyataan yang setara (if/else ke ternary, pemendekan rantai perbandingan, penggabungan return kondisional). Setiap transformasi secara prinsip dapat dibalik; kompressor tidak pernah mengubah perilaku yang dapat diamati.
3. Mangle. Mangler mengganti nama binding lokal menjadi identifier terpendek yang unik (a, b, c, …) dalam setiap cakupan. Hanya nama yang tidak bisa keluar dari batas modul yang diganti namanya, sehingga binding yang diekspor, kunci properti, dan referensi global tetap tidak tersentuh. Hasilnya adalah penghematan byte terbesar dari semua tahap.
4. Render. Terser mencetak AST yang telah ditransformasi kembali ke string JavaScript dengan spasi yang disusutkan dan pemisah pernyataan dikurangi menjadi minimum yang diterima oleh tata bahasa. Komentar dihapus kecuali toggle preserve-license menyimpan blok /*! … */, yang oleh sebagian besar lisensi CDN mengharuskan Anda untuk mempertahankannya.

Mengapa minify JavaScript

• Halaman memuat lebih cepat. Skrip yang lebih kecil diurai dan dieksekusi lebih cepat. Pada koneksi seluler 4G, pengurangan byte 40 persen memangkas detik nyata dari Time to Interactive, yang merupakan metrik yang paling agresif diukur oleh PageSpeed Insights Google.
• Tagihan egress CDN lebih rendah. CloudFront, Cloudflare, dan Fastly menagih per gigabyte egress. Pengurangan skrip 40 persen di jutaan tampilan halaman bulanan mengumpulkan penghematan nyata bahkan sebelum pekerjaan gambar atau CSS apa pun dimulai. Matematikanya berlaku bahkan setelah gzip dan brotli — minifikasi menghapus token yang seharusnya harus dikodekan oleh kompressor.
• Peminifikasi ini tidak membebani halaman Anda. Terser berukuran ~1 MB tidak terkompresi. Sebagian besar peminifikasi online mengirimkan seluruh pustaka saat halaman dimuat, yang menghancurkan skor Lighthouse mereka sendiri dan membuat halaman terasa lambat sebelum pengguna mengetik apa pun. Halaman ini memuat Terser secara lazy hanya saat Anda mengklik Minify atau mengaktifkan mode langsung — sehingga render awal tetap di bawah ambang Core Web Vitals yang dijanjikan alat ini untuk membantu Anda capai.
• Lulus Core Web Vitals. Lighthouse dan PageSpeed Insights menandai JavaScript besar sebagai kontributor langsung terhadap Total Blocking Time yang buruk. Meminify pustaka vendor dan bundle aplikasi adalah kemenangan tercepat dalam audit Lighthouse "Kurangi JavaScript yang tidak digunakan" dan "Hapus modul duplikat" — biasanya pengurangan satu kali yang bernilai sepuluh atau dua puluh poin.

Aplikasi umum

Minifikasi JavaScript muncul di hampir setiap tahap proyek web modern.

• Hook pre-commit: minify skrip utilitas individual sebelum melakukan commit ke repositori sehingga artefak yang di-commit siap untuk produksi dan diff memperlihatkan perubahan logika, bukan pergantian spasi.
• Audit widget pihak ketiga: tempel snippet embed vendor dan periksa apakah sudah diminify atau dapat diperkecil lebih lanjut sebelum disajikan ke jutaan pengguna.
• Pembersihan skrip lama: kompresi plugin jQuery lama dan skrip yang ditulis tangan yang mendahului pipeline build Anda saat ini, tanpa menyentuh pohon sumber.

Contoh yang dikerjakan

Ambil fungsi kecil: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — sekitar 130 byte termasuk komentar. Tempel di atas dengan Mangle dan Compress keduanya aktif. Keluaran diperpendek menjadi kira-kira function add(n,o){return n+o}console.log(add(1,2)); — sekitar 55 byte, pengurangan 58 persen. Nama fungsi add bertahan karena direferensikan dalam panggilan console.log; nama parameter firstNumber dan secondNumber diperpendek menjadi huruf tunggal karena bersifat lokal pada badan fungsi. Matikan Mangle untuk mempertahankan nama parameter yang dapat dibaca sambil tetap menyusutkan spasi dan menghapus komentar.

FAQ

Apakah ini berjalan di peramban saya?

Ya. Terser dimuat secara lazy pertama kali Anda mengklik Minify atau mengaktifkan mode langsung — sekitar 200 KB terkompresi tersimpan dalam cache peramban Anda, lalu tidak ada lagi yang diunduh. Kode Anda tidak pernah meninggalkan halaman.

Apa itu name mangling dan apakah aman?

Mangling mengganti nama variabel lokal menjadi huruf tunggal untuk menghemat byte. Ini aman untuk skrip mandiri dan bundle IIFE karena penggantian nama tidak pernah keluar dari cakupan. TIDAK aman untuk skrip yang mengekspos global berdasarkan nama (mis. window.myLib = …) tanpa pembungkus. Matikan Mangle jika tidak yakin.

Mengapa kode saya rusak setelah minifikasi?

Tiga tersangka utama: eval atau with yang mereferensikan variabel berdasarkan string; pembacaan Function.name atau arguments.callee yang bergantung pada identifier asli; atau global yang diekspos dengan nama yang telah diganti. Matikan Mangle terlebih dahulu untuk mengisolasi apakah penggantian nama atau transformasi Compress yang menjadi penyebabnya.

Apakah ini mendukung sintaks modern (ES2020+)?

Ya. Atur target ECMAScript ke ES2020 atau Next dan Terser mempertahankan optional chaining, nullish coalescing, top-level await, dan operator logical-assignment. Atur ke ES5 dan Terser akan mengompilasi ke bawah sejauh bisa, tetapi ini bukan transpiler penuh — gunakan Babel untuk sintaks yang tidak dapat direpresentasikan oleh ES5 sama sekali.

Minifikasi JavaScript di sisi peramban dengan Terser memberi Anda keluaran berkualitas produksi tanpa menambahkan build tool. Tempel skrip, pilih target ECMAScript, salin atau unduh hasilnya. Tidak ada yang diunggah, tanpa akun, tanpa pipeline build. Peminifikasi itu sendiri hanya dimuat saat Anda memintanya — sehingga membuka halaman ini hanya memerlukan beberapa kilobyte, bukan satu megabyte.