JavaScript Minifier

Tampal JavaScript untuk mengecilkannya dengan Terser: kod mati dibuang, nama dipendekkan dan ruang putih hilang. Ralat sintaks menunjukkan baris dan lajur yang tepat.

Berjalan dalam pelayar andaTanpa pendaftaranTiada apa dimuat naik

Output yang di-minify

Cara menggunakan JavaScript Minifier

  1. Tampal JavaScript anda atau buka fail .js.
  2. Pilih pilihan: Kaburkan nama memendekkan pemboleh ubah setempat, Mampatkan menulis semula kod kepada setara yang lebih kecil, Modul ES membolehkan import/export peringkat atas.
  3. Pilih sasaran ECMAScript yang disokong oleh pelayar pengguna anda. ES2020 selamat untuk semua pelayar evergreen.
  4. Semak saiz, penjimatan dan anggaran gzip di bawah output.
  5. Salin kod yang di-minify atau muat turunnya sebagai output.min.js.

Apakah fungsi JavaScript minifier?

Minify menjadikan JavaScript lebih kecil tanpa mengubah apa yang dilakukannya. Alat ini menggunakan Terser, minifier di sebalik webpack, Vite dan Rollup, dan menggunakan tiga jenis perubahan:

  • Pembuangan ruang putih dan komen: inden, baris baharu dan komen tidak diperlukan oleh enjin JavaScript.
  • Mangling: nama pemboleh ubah setempat dan parameter fungsi seperti subtotal menjadi satu huruf. Nama global dan sifat objek tidak disentuh supaya API awam anda terus berfungsi.
  • Pemampatan: ungkapan pemalar dilipat, kod yang tidak dapat dicapai dibuang, pernyataan if menjadi ternary dan fungsi pendek dimasukkan sebaris.

Minify lwn. gzip: perlukah kedua-duanya?

Ya. Gzip dan Brotli memampatkan corak bait berulang semasa penghantaran, manakala minify membuang bait yang sebaliknya perlu dimuat turun, dihurai dan dikompil oleh pelayar. Skrip biasa mengecil 40–60% melalui minify dan kemudian 60–70% lagi melalui gzip. Saiz gzip yang ditunjukkan di sini ialah anggaran yang baik bagi apa yang sebenarnya akan dihantar oleh pelayan anda.

Mengekalkan komen lesen

Banyak lesen sumber terbuka (MIT, BSD, Apache) memerlukan notis hak cipta kekal bersama kod. Mengikut konvensyen, komen yang bermula dengan /*! atau mengandungi @license atau @preserve dikekalkan apabila Kekalkan komen lesen dihidupkan.

Bila tidak perlu minify secara manual

Jika projek anda sudah menggunakan bundler, biarkan ia minify build produksi dan menjana source map untuk debugging. Minifier dalam talian sesuai untuk skrip sekali guna, snippet untuk CMS atau tag manager, bookmarklet dan untuk melihat sekecil mana sesuatu kod boleh jadi.

Soalan lazim

Adakah kod saya dimuat naik ke pelayan?
Tidak. Terser berjalan dalam tab pelayar anda, jadi kod proprietari tidak pernah meninggalkan mesin anda.
Bolehkah minify merosakkan kod saya?
Terser hanya menggunakan transformasi yang mengekalkan tingkah laku yang sama untuk JavaScript yang sah. Kod yang bergantung pada Function.prototype.toString() atau pada nama pemboleh ubah setempat melalui eval boleh terjejas; matikan Kaburkan nama dalam kes itu.
Adakah ia menyokong sintaks moden seperti async/await, kelas dan optional chaining?
Ya. Terser menghurai sintaks ES2022+. Tetapan sasaran hanya mengawal sintaks yang boleh digunakan oleh output; ia tidak mentranspil ciri baharu kepada yang lebih lama.
Apakah perbezaan antara minify dan uglify?
Maksudnya sama. UglifyJS ialah alat klasik; Terser ialah fork yang diselenggara dengan sokongan penuh ES2015+.

Alat berkaitan

CSS Minifier Kecilkan stylesheet: pendekkan nilai dan gabung peraturan berganda. HTML Minifier Buang komen dan ruang putih, serta minify CSS/JS sebaris. JSON Formatter Kemaskan, minify dan sahkan JSON dengan ralat baris/lajur. SQL Formatter Kemaskan atau minify SQL untuk PostgreSQL, MySQL, T-SQL, BigQuery dan lain-lain.