Softonic

Minifier JavaScript

Langkah 1 / 3
Berikutnya

Tempel kode JavaScript dan dapatkan versi yang telah diminifikasi dengan ukuran 40–70% lebih kecil: spasi kosong dihilangkan, variabel disingkat menjadi satu huruf, cabang mati dihapus, konstanta dilipat, serta komentar dihapus jika Anda mengaktifkannya. Sangat berguna untuk pemeriksaan ukuran secara cepat, penyematan sekali pakai, dan halaman landing saat Anda tidak menjalankan rantai alat build lengkap.

Cara meminimalkan ukuran kode JavaScript

  1. 1

    Tempel sumber

    Semua kode JavaScript ES5+ yang valid. Untuk ES6 dan versi lebih baru (literalis templat, kelas, modul), pastikan tujuan implementasinya sesuai dengan spesifikasi yang ditentukan.

  2. 2

    Pilih tingkat minifikasi

    Aman (spasi kosong + komentar); default (+ mangling variabel); agresif (+ mangling nama properti, dapat merusak akses ke DOM).

  3. 3

    Kurangi ukuran (minimize)

    Alat ini menjalankan transformasi yang kompatibel dengan Terser dan menghasilkan data dengan jumlah byte sebelum serta sesudah proses transformasi.

  4. 4

    Salin atau unduh

    Tempelkan hasilnya ke dalam tag `<script>` atau simpan sebagai file `.min.js` untuk ditampilkan melalui CDN Anda.

Ke mana byte itu pergi

File yang telah diminifikasi biasanya berukuran 40–70% lebih kecil dibandingkan versi sumbernya. Dengan mengompresinya menggunakan gzip (atau Brotli, yang digunakan oleh Cloudflare dan sebagian besar CDN), ukurannya berkurang lagi sebesar 60–75%. Secara keseluruhan, file sumber berukuran 100 KB dapat dikirim dengan ukuran hanya sekitar 15–25 KB melalui jaringan.

Sumber Diminifikasi +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Teknik yang diterapkan

Teknik Fungsinya
Penghapusan spasi kosong Menghapus spasi, tab, dan baris baru
Penghapusan komentar Menghapus // dan /* */ (kecuali !important)
Mangling nama variabel Mengubah nama userName menjadi u (aman dalam cakupan)
Mangling nama properti Mengubah nama obj.foo menjadi obj.a (TIDAK AMAN)
Pelipatan konstanta 1 + 2 + 3 → 6
Penghapusan kode mati Menghapus cabang setelah return
Inlining alur kontrol Menyisipkan fungsi kecil yang hanya dipakai sekali
Kompresi literal string Menggabungkan konstanta string yang berulang

Mode aman vs mode agresif

  • Aman mempertahankan nama variabel dan hanya menghapus spasi kosong. Cocok untuk debugging saat Anda ingin jejak stack yang mudah dibaca.
  • Default melakukan mangling pada variabel lokal, tetapi mempertahankan nama global dan nama properti. Berfungsi dengan sebagian besar kode.
  • Agresif melakukan mangling pada semuanya, termasuk nama properti. Mode ini sering merusak kode yang mengakses properti secara dinamis (obj["prop"], Object.keys(obj)), kecuali Anda mengonfigurasi nama yang dicadangkan.

Kapan harus meminifikasi: dan kapan tidak

  • Minifikasi setiap aset yang diunduh peramban di lingkungan produksi.
  • Sediakan peta sumber agar DevTools peramban tetap dapat menampilkan nama asli saat debugging.
  • Jangan meminifikasi saat pengembangan; Anda membuang waktu build dan kehilangan pesan kesalahan yang mudah dibaca.
  • Jangan meminifikasi kode yang sudah diminifikasi. File .min.js hanya menyusut sekitar 1–3% saat diminifikasi ulang, sekaligus berisiko rusak.

Kesalahan umum

  • Tidak mengonfigurasi nama yang dicadangkan. Akses properti dinamis (obj["payment_method"]) rusak ketika payment_method di-mangling menjadi a.
  • Melupakan peta sumber. Tanpa file .map, kesalahan produksi tidak dapat dibaca.
  • Meminifikasi CommonJS dan ESM bersamaan. Sistem modul campuran memerlukan tree-shaking yang cermat sebelum minifikasi.

Pertanyaan yang Sering Diajukan

Biasanya 40–70% lebih kecil tanpa kompresi, dan turun lagi 60–75% saat dikompresi dengan gzip atau Brotli. Sumber berukuran 100 KB sering kali terkirim melalui jaringan dengan ukuran sekitar 15–25 KB.

Mangling default (variabel lokal) hampir selalu aman. Mangling nama properti yang agresif merusak setiap kode yang mengakses properti secara dinamis. Konfigurasikan daftar reserved dengan cermat sebelum mengaktifkannya.

Ya, aktifkan opsi “buat peta sumber”; alat akan mengembalikan kode yang telah diminifikasi beserta berkas .map yang memetakan setiap byte kembali ke kode sumber aslinya. Unggah kedua file tersebut ke CDN Anda agar DevTools dapat menampilkan jejak stack yang mudah dibaca.

Ya, top-level await, field kelas, metode privat, penggabungan nilai null (nullish coalescing), rantai opsional (optional chaining), serta pemisah angka semuanya didukung. Untuk proposal yang sangat baru (decorator stage-3), periksa flag khususnya.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Alat ini tersedia dalam bahasa lain