Unminify JS: Memulihkan Keterbacaan JavaScript Terminifikasi
JavaScript yang diminifikasi memadatkan bundle menjadi satu baris padat dengan nama variabel satu huruf. Tempelkan ke unminifier JS online dan alat ini menyisipkan kembali spasi, jeda baris, dan indentasi dalam detik - tidak ada unggahan, tidak ada instalasi, tidak ada yang dikirim ke server.
FreetoolOnline editorial team| Properti | Nilai |
|---|---|
| Format | Alat online, tanpa install |
| Kecepatan | Di sisi browser; output terbaca dalam hitungan detik |
| Privasi | Sumber tetap di perangkat; tidak ada yang di-upload |
| Penggantian nama variabel | Tidak dilakukan - nama satu huruf tetap satu huruf |
| Alat implementasi | https://freetoolonline.com/developer-tools/js-unminifier.html |
Apa yang sebenarnya dilakukan unminify (dan apa yang tidak bisa dilakukannya)
Unminify membalikkan separuh murah dari minifikasi: ia menyisipkan kembali spasi putih, baris baru, dan indentasi konsisten, sehingga bundle satu baris menjadi kode terformat yang terbaca. Ia TIDAK membalikkan separuh mahal - penggantian nama. Variabel bernama a, b, t di bundle yang terminifikasi tetap dipanggil a, b, t setelah unminify, karena nama aslinya dibuang saat build dan tidak ada source map yang dipertahankan. Jika source map (file .map atau komentar inline //# sourceMappingURL=) tersedia, file itu menunjuk ke simbol asli dan merupakan artefak yang tepat untuk dimuat - bukan pass unminify. Pembingkaian untuk pembaca: unminify adalah alat yang tepat untuk "saya punya bundle pihak ketiga dan ingin membaca apa yang dilakukannya"; source map adalah alat yang tepat untuk "saya punya build saya sendiri dan ingin debug simbol asli".
Walkthrough tiga menit
- Salin bundle terminifikasi. Buka file
.min.jsdi editor Anda atau di tab network browser (Response body), pilih semua, salin. - Tempel ke editor. Buka https://freetoolonline.com/developer-tools/js-unminifier.html dan tempel ke panel input. Bundle panjang - ratusan KB atau lebih - bekerja, tetapi tunggu pass format butuh satu atau dua detik saat parser berjalan melewati AST.
- Klik Unminify. Panel kanan menampilkan output yang terindentasi. Salin hasil kembali ke editor Anda atau simpan sebagai file
.jslokal untuk pembacaan gaya grep.
Di mana output unminified membantu dan di mana tidak
Membaca kode pihak ketiga yang sudah di-unminify bermanfaat dalam tiga situasi konkret. Pertama, triase kerentanan - ketika CVE menyebut fungsi di dalam bundle vendor, unminify memungkinkan Anda menemukan situs panggilan dan membaca alur sekitarnya tanpa menyiapkan repo asli. Kedua, konfirmasi perilaku - ketika perilaku library berubah antar versi, membandingkan versi unminified menampilkan perubahan jauh lebih cepat daripada membaca bentuk padat satu baris. Ketiga, verifikasi output build - ketika pipeline Anda sendiri memancarkan bundle yang secara misterius memuat ganda polyfill, bentuk unminified menampilkan blok IIFE duplikat sekilas. Unminify tidak akan membantu ketika tujuannya adalah nama semantik asli; untuk itu, kirim source map bersama bundle dan muat di debugger Anda.
Apa yang dipertahankan, apa yang hilang
Spasi putih, baris baru, dan indentasi dipulihkan secara deterministik dari AST. Komentar tidak dipulihkan - minifier menghapusnya saat build, dan tidak ada informasi yang tersisa di bundle untuk merekonstruksinya. Struktur modul (panggilan CommonJS require, pernyataan ESM import) dipertahankan seperti yang muncul dalam bentuk bundled, yang sering merupakan wrapper hasil generate alih-alih batas modul asli. Optimisasi tingkat sumber seperti constant folding (5*60*60*1000 diciutkan ke 18000000) tidak dibalikkan - unminify tidak memahami semantik, hanya sintaks. Jika angka tampak rahasia dalam output unminified, cari di repo asli atau tebak unitnya (milidetik, byte, indeks).
Ingin ke arah sebaliknya?
Jika Anda tiba di sini ingin mengecilkan JS untuk produksi alih-alih memperluasnya, alat pendamping di https://freetoolonline.com/developer-tools/js-minifier.html melakukan arah maju (penghapusan spasi putih, penyingkatan identifier) dan panduan perbandingan CSS Minifier vs Uglifier vs Tree-Shaking mencakup bagaimana tiga transformasi bertumpuk dalam pipeline build tipikal. Untuk padanan sisi CSS, lihat CSS Unminifier vs Prettier: Kapan Menggunakan yang Mana - keputusan sisi JS serupa: unminify saat membaca output pihak ketiga, source map saat debug milik Anda sendiri.
Pertanyaan yang sering diajukan
Apakah unminify memulihkan nama variabel asli?
Tidak. Minifier mengganti identifier dengan nama sintetis pendek saat build dan membuang yang asli; output unminified mempertahankan nama sintetis. Muat source map yang sesuai di debugger browser Anda untuk melihat simbol asli.
Apakah sumber diunggah ke mana pun?
Tidak. Pass unminify berjalan sepenuhnya di browser Anda; teks terminifikasi tidak pernah dikirim ke server. Tutup tab dan input hilang.
Apakah unminify akan merusak JavaScript?
Tidak. Transformasi murni kosmetik - spasi putih, baris baru, dan indentasi. AST tidak berubah, sehingga kode unminified berjalan identik dengan minified asli. Jalankan melalui pemeriksa sintaks jika Anda ingin konfirmasi sabuk-pengaman.
Berapa batas ukuran file?
Bundle hingga beberapa megabyte bekerja di browser modern; waktu pass format tumbuh hampir linear dengan panjang input. Bundle yang sangat besar (10 MB+) dapat menggagalkan tab; dalam hal itu pisahkan bundle berdasarkan batas closure dan unminify setiap chunk secara terpisah.
Apa perbedaan antara unminify dan prettier?
Unminify memulihkan format terbaca pada kode yang sengaja dipadatkan. Prettier (atau formatter serupa) memberlakukan style guide yang dipilih pada kode yang sudah terbaca. Untuk bundle pihak ketiga yang terminifikasi, unminify dulu; jika Anda kemudian ingin lebar indentasi atau gaya tanda kutip tertentu, jalankan prettier pada output.
Ketika tujuan Anda adalah menghasilkan JS lebih kecil daripada membacanya, panduan how to minify css js for cloud run cold start mencakup langkah-langkah pipeline build untuk menghapus CSS dan JS sebelum deployment container.