Minifikasi JavaScript sering disamakan dengan obfuscation, padahal keduanya adalah dua hal berbeda dengan tujuan berbeda: yang satu menghemat byte, yang satu lagi membuat logika kode lebih sulit dipahami.
Apa yang dilakukan minifikasi
Minifier menghapus spasi, komentar, dan baris baru, serta mempersingkat nama variabel lokal menjadi satu atau dua karakter di tempat yang aman untuk dilakukan. Logika program tetap sepenuhnya tidak berubah — ini murni kompresi teknis pada file.
Dari JSMin hingga Terser: sejarah singkat
Douglas Crockford merilis JSMin di awal tahun 2000-an, salah satu minifier JS pertama yang banyak dipakai — alat ini hanya menghapus spasi dan komentar, tanpa menyentuh nama variabel. Alat modern seperti Terser (turunan dari UglifyJS) dan esbuild melangkah lebih jauh: mereka mem-parsing kode menjadi AST (abstract syntax tree) lalu mengganti nama variabel lokal dan parameter fungsi menjadi satu huruf di mana pun itu aman dilakukan — dan justru langkah inilah, bukan sekadar penghapusan spasi, yang paling besar memangkas ukuran file pada proyek nyata.
Source map: cara men-debug kode yang variabelnya sudah diganti nama
Setelah nama variabel jadi a, b, dan c, dan semua baris baru hilang, stack trace error di produksi hanya menunjuk ke posisi yang sulit dibaca di dalam satu baris yang sangat panjang. Source map menyelesaikan masalah ini — file terpisah yang memetakan setiap posisi di kode hasil minifikasi kembali ke baris, kolom, dan nama variabel aslinya, sehingga DevTools browser bisa menampilkan stack trace yang mudah dibaca meski yang sebenarnya dijalankan browser adalah kode yang sudah diminifikasi.
Untuk apa ini dibutuhkan
- Mengecilkan ukuran bundel JS sebelum di-deploy ke produksi.
- Mempercepat proses unduh dan parsing skrip di browser.
- Memahami kenapa kode hasil minifikasi masih bisa dibaca kalau perlu, sementara kode hasil obfuscation jauh lebih sulit dipahami.
Tree shaking versus minifikasi
Tree shaking adalah teknik terpisah yang jangan disamakan dengan minifikasi: teknik ini menganalisis graf dependensi antar-modul dan menghapus sepenuhnya fungsi maupun ekspor yang tidak pernah dipakai di mana pun dari bundel akhir, pada tahap build. Minifikasi sebaliknya bekerja pada kode yang sudah jadi dan hanya memperpendek representasi teksnya, tanpa menghapus logika apa pun yang benar-benar dipakai. Build tool modern seperti Vite atau webpack biasanya menerapkan keduanya secara berurutan: tree shaking dulu membuang kode mati, baru minifikasi memampatkan sisanya.