JavaScript Formatter dan Minifier

Cara memformat atau minify JavaScript

1. Tempel kode Anda, atau klik Buka file untuk memuat file .js, .mjs, atau .jsx (hingga 10 MB).
2. Pilih Indentasi dan, jika Anda lebih suka gaya Allman, centang Kurung kurawal di baris sendiri.
3. Klik Format (rapikan) agar kode mudah dibaca.
4. Untuk memperkecilnya, atur Opsi minify lalu klik Minify. Untuk sekadar mencari kesalahan, klik Cek sintaks.
5. Salin atau unduh hasilnya. Baris status menampilkan ukuran sebelum dan sesudah, serta persentase yang dihemat.

Kode hanya dibaca dan ditransformasi, tidak pernah dijalankan: tidak ada yang Anda tempel yang dieksekusi di halaman ini.

Rapikan dengan js-beautify

Format (rapikan) memakai js-beautify. Alat ini menaruh satu pernyataan per baris, memberi indentasi pada blok, menambahkan spasi di sekitar operator dan setelah kata kunci, serta mempertahankan paling banyak satu baris kosong di tempat yang memang ada baris kosongnya. Alat ini juga memahami sintaks modern (class, arrow function, template literal, async/await) dan JSX. Inilah cara tercepat untuk membaca pustaka yang sudah di-minify atau cuplikan satu baris yang disalin dari halaman web.

Merapikan hanya mengubah spasi. Proses ini tidak memeriksa apakah kode valid: tanda kurung yang hilang hanya menghasilkan indentasi yang aneh. Gunakan Cek sintaks untuk itu.

Minify dengan Terser

Minify memakai Terser, minifier yang dipakai sebagian besar build tool JavaScript. Karena ukurannya besar, Terser baru diunduh saat Anda pertama kali mengklik Minify atau Cek sintaks. Opsinya dipetakan langsung ke pengaturan Terser:

• Modul ES (import/export) mem-parse kode sebagai modul (module: true): strict mode berlaku dan nama tingkat atas bersifat privat, sehingga bisa diganti namanya dan yang tidak terpakai bisa dihapus. Biarkan tidak dicentang untuk skrip klasik yang fungsi globalnya dipakai oleh skrip lain.
• Kompres (compress) menulis ulang kode menjadi kode setara yang lebih pendek: constant folding (2*60 menjadi 120), penghapusan kode mati, penggabungan deklarasi var, dan kondisi yang lebih ringkas.
• Persingkat nama variabel (mangle) mengganti nama variabel lokal dan parameter menjadi satu atau dua huruf. Nama global dan properti objek tidak pernah diganti.
• Pertahankan komentar lisensi mempertahankan komentar yang diawali /*! atau berisi @license atau @preserve. Semua komentar lain dihapus.

Minify tidak bisa mengubah apa yang dilakukan kode, tetapi kode yang bergantung pada nama fungsi (fn.name) atau pada eval bisa berperilaku berbeda setelah namanya diganti. Hapus centang Persingkat nama variabel dalam kasus itu.

Kesalahan sintaksis dengan baris dan kolom

Jika Terser tidak bisa mem-parse kode, Minify dan Cek sintaks menampilkan pesan kesalahan beserta baris dan kolomnya, misalnya “Baris 12, kolom 8 – Kesalahan sintaksis: Unexpected token punc «)»”. Penjelasan detailnya berasal dari Terser dan ditulis dalam bahasa Inggris. Kolom dihitung dari karakter ke-1. Penyebab umumnya adalah kurung yang hilang lebih awal di file, jadi periksa juga baris-baris tepat sebelum posisi yang dilaporkan.