Minify JavaScript

Mengganti nama, menghapus, dan apa yang tidak boleh disentuh

Ada tiga hal yang terjadi, diurutkan dari yang paling kecil penghematan dan biayanya bagi Anda. Spasi dan komentar dihapus, dan itu tanpa biaya. Kode mati dihapus — cabang yang tidak pernah bisa dijalankan, variabel yang diisi tetapi tidak pernah dibaca. Dan nama lokal dipersingkat, sehingga calculateMonthlyTotal yang diberi nama dengan cermat menjadi satu huruf. Yang terakhir inilah sumber sebagian besar penghematan, sekaligus penyebab hasilnya tidak terbaca — tidak masalah untuk dirilis, tetapi tidak berguna untuk debugging.

Yang tidak boleh diganti namanya adalah apa pun yang dirujuk dunia luar berdasarkan nama, dan kesalahan di sini adalah cara minifier merusak kode. Fungsi yang diekspor, properti objek yang diakses sebagai string, apa pun yang dijangkau melalui window, dan nama yang dipakai di eval semuanya harus tetap utuh, karena ada sesuatu di tempat lain yang mencarinya berdasarkan nama yang Anda tulis. Properti khususnya dibiarkan secara default: mengganti nama user.emailAddress akan langsung rusak begitu objek itu diserialisasi ke JSON atau dibaca oleh kode yang di-minify secara terpisah.

Simpan source map atau file aslinya. Begitu nama-nama hilang, stack trace dari pengguna sungguhan terbaca sebagai error di fungsi t pada karakter 48.213, yang sama sekali tidak memberi tahu apa pun. Source map mengembalikan nama dan nomor baris asli di debugger dan di pelaporan error, dan membuatnya tidak memakan biaya karena dikirim sebagai file terpisah yang hanya dimuat saat seseorang membuka developer tools.

Komentar lisensi dipertahankan secara default, dan itu adalah sikap hukum, bukan sekadar preferensi. Banyak sekali kode open-source berlisensi permisif dengan satu syarat: pemberitahuan hak ciptanya harus ikut disertakan — MIT dan BSD sama-sama menyatakannya secara eksplisit. Menghapus komentar itu dari bundle yang berisi kode pihak ketiga membuat Anda melanggar lisensi yang mengizinkan Anda memakainya. Ukurannya hanya beberapa ratus byte.

Jika Anda butuh hal lain

Proses ini seharusnya ada di build, bukan di tab browser, dan bundler modern melakukannya secara otomatis. esbuild --minify serta Rollup atau Vite me-minify saat build, membuat source map secara otomatis, dan — yang jauh lebih penting — melakukan tree shaking, membuang ekspor dependensi yang tidak pernah Anda impor. Pada aplikasi sungguhan, penghematannya jauh lebih besar daripada yang bisa dicapai dengan me-minify file jadi.

Sebelum mengoptimalkan, ukur dulu. Bundle analyzer biasanya menunjukkan bahwa satu dependensi besar menyumbang sebagian besar isi file — library tanggal, set ikon, paket grafik yang dimuat utuh hanya untuk satu grafik. Mengganti atau memuat dependensi itu secara lazy lebih efektif daripada minify sebanyak apa pun, dan code splitting agar halaman hanya memuat yang diperlukannya lebih efektif daripada keduanya.