Softonic

Minifier JavaScript

Langkah 1 / 3

Tempel skrip atau modul ES hingga 1.000.000 karakter, atau buka file .js.

Berikutnya: pilih opsi

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 /* */ (komentar lisensi seperti /*! bisa dipertahankan)
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
Urutan ekspresi dan boolean a(); b(); → a(),b();, true → !0

Mode aman vs mode agresif

  • Aman mempertahankan nama variabel dan hanya menghapus spasi kosong serta komentar. 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[key], 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_" + type]) 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.

Bisa. Centang “Buat juga source map” dan Anda mendapatkan file .map bersama kode hasil minifikasi. File ini menghubungkan kode hasil minifikasi dengan baris dan nama asli Anda, sehingga DevTools di browser dapat menampilkan kode dan jejak stack yang mudah dibaca. Sajikan kedua file dari folder yang sama: kode hasil minifikasi diakhiri komentar //# sourceMappingURL= yang menemukan source map lewat nama filenya. Source map berisi kode asli Anda, jadi publikasikan hanya di tempat yang boleh dibaca siapa saja.

Ya. Top-level await (di modul ES), field kelas, metode privat, nullish coalescing, optional chaining, dan pemisah angka didukung. Decorator tidak didukung: kompilasi dulu ke JavaScript biasa, sama seperti TypeScript atau JSX. Minifier tidak pernah mengubah sintaks baru ke versi lama: opsi versi ECMAScript hanya menentukan sintaks terbaru yang boleh dipakai kode hasil minifikasi untuk menghemat byte.

Tidak. Kode yang Anda tempel atau buka diringkas di browser Anda. Kode itu tidak dikirim ke server kami dan tidak ditambahkan ke tautan halaman. Di antara langkah-langkah, kode disimpan di penyimpanan sesi tab ini, yang dihapus browser saat Anda menutup tab.

Alat Terkait

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 dari formulir singkat: atur entry, folder output, dan mode, lalu aktifkan TypeScript, Babel, loader CSS, HtmlWebpackPlugin, dan dev server.

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.

Dari SQL ke NoSQL

Ubah satu pernyataan SQL SELECT menjadi kueri find() MongoDB. Memetakan kolom, WHERE (=, >, <, >=, <=, !=), AND/OR, ORDER BY, dan LIMIT. Tanpa JOIN, GROUP BY, atau agregasi.

Validator XSD

Validasi dokumen XML terhadap skema XSD dan laporkan ketidakcocokan elemen dan tipe dengan nomor baris persis.

Generator Robots.txt

Buat file robots.txt yang valid: tetapkan user-agent, cantumkan jalur Disallow dan Allow, tambahkan Crawl-delay, dan deklarasikan sitemap Anda, lalu salin hasilnya.

Generator Slug

Konversi judul atau frasa apa pun menjadi slug yang aman untuk URL: huruf kecil, dipisahkan dengan tanda hubung, tanpa aksen, opsi membuang stop word, serta kompatibel dengan Unicode.

Alat ini tersedia dalam bahasa lain