Penukar Percuma

JavaScript Pemecil

Kecilkan dan mampatkan kod JavaScript serta-merta dalam penyemak imbas anda. Alih keluar ulasan, runtuhkan ruang putih dan kecilkan saiz fail. Percuma dan peribadi.

Seret & Lepaskan fail JS di sini

Menyokong fail .js. Atau tampal JavaScript anda di atas.

Ataupun

Tentang alat ini

Penipisan JavaScript mengurangkan saiz kod sumber dengan mengalih keluar aksara yang tidak diperlukan dan (dengan pengecil yang betul) menamakan semula pembolehubah tempatan kepada nama yang lebih pendek. Kategori pertama — ruang kosong dan penyingkiran ulasan — adalah mudah dan bebas risiko. Yang kedua — penamaan semula pembolehubah — memerlukan pemahaman peraturan skop dan merupakan perkara yang terbaik yang dilakukan oleh pengecil pengeluaran seperti Terser dan esbuild.

Alat ini memfokuskan pada minifikasi selamat: menanggalkan ulasan, meruntuhkan ruang putih, mengalih keluar koma bertitik berlebihan dan memendekkan corak yang jelas. Penamaan semula pembolehubah adalah konservatif — hanya pembolehubah tempatan dalam skop yang jelas disentuh dan nama yang dirujuk secara luaran dibiarkan sahaja. Hasilnya adalah sama secara fungsional dengan sumber.

Untuk pengurangan gred pengeluaran, alatan khusus (Terser, esbuild, swc) memahami model skop ECMAScript penuh dan menghasilkan output yang lebih kecil dengan ketara. Alat ini adalah untuk pengurangan sebelah penyemak imbas pantas apabila persediaan binaan penuh tidak tersedia.

Mengapa Kecilkan JavaScript

Himpunan JavaScript biasanya merupakan sumber tunggal terbesar pada halaman web moden. Pengurangan saiz secara rutin menghasilkan 30–60% pengurangan berbanding sumber yang tidak dikecilkan. Digabungkan dengan gzip atau Brotli, pengurangan agak mengecut, tetapi gabungan itu masih menjimatkan bait yang boleh diukur — terutamanya untuk pengguna pada sambungan perlahan.

JavaScript yang lebih pantas juga bermakna Masa untuk Interaktif yang lebih pantas. Skrip yang lebih kecil memuat turun lebih cepat, menghuraikan lebih cepat dan melaksanakan lebih cepat. Untuk tapak yang TTI mempengaruhi kadar lantunan dan kedudukan SEO, pengurangan adalah salah satu kemenangan termurah yang tersedia.

Cara menggunakan

Tampal JavaScript, dapatkan versi yang lebih kecil.

  1. Tambahkan input JavaScript: Tampal sumber ke dalam kawasan input atau lepaskan fail .js. Minifier menerima JavaScript moden (ES2015+) termasuk fungsi anak panah, literal templat, kelas dan modul.
  2. Pilih pilihan: Lalai menanggalkan ulasan dan runtuhkan ruang putih. Penamaan semula pembolehubah tempatan adalah konservatif; dayakan penamaan semula yang lebih agresif jika anda memerlukan pemampatan maksimum.
  3. Kecilkan: Pemecil menghuraikan sumber, mengalih keluar ruang kosong dan ulasan, dan mengeluarkan output padat. Ralat sintaks dalam sumber menghasilkan mesej ralat yang jelas.
  4. Gunakan output: Gantikan sumber skrip anda dalam pengeluaran. Untuk pengoptimuman penuh, gandingkan dengan pengikat yang mengendalikan penyingkiran kod yang menggoncang pokok dan mati.

Kes Penggunaan Biasa

Butiran Teknikal

Pembesar kecil menandakan JavaScript menggunakan penghurai yang menghormati sintaks ECMAScript. Ulasan (baris tunggal dan berbilang baris) dialih keluar kecuali ulasan lesen bertanda /*! awalan. Ruang putih diruntuhkan kecuali jika diperlukan secara sintaksis (antara pengecam, selepas kata kunci).

Penamaan semula pembolehubah konservatif memendekkan pembolehubah tempatan dalam skop yang mudah. Nama global, eksport dan import tidak dinamakan semula — yang akan memecahkan rujukan luaran. Untuk penamaan semula mendalam, gunakan Terser atau esbuild dengan analisis kesedaran modul yang betul.

Kes tepi: sisipan koma bertitik automatik (ASI) bermakna pemendek mesti mengekalkan baris baharu dalam beberapa konteks untuk mengelakkan perubahan tingkah laku program. Literal templat, literal regex dan JSX (jika input menyertakannya) dipelihara dengan tepat kerana kandungannya mungkin tidak selamat untuk dimampatkan.

Amalan Terbaik

Soalan lazim

Adakah minifikasi mengubah cara kod saya berfungsi?
Tidak. Minification mengalih keluar ruang kosong dan ulasan, yang tidak menjejaskan pelaksanaan. Pemendekkan pembolehubah (mangling) menamakan semula pembolehubah tempatan tetapi mengekalkan tingkah laku. Pembolehubah global dan nama yang dieksport kekal utuh.
Perlukah saya mengecilkan dalam pembangunan atau pengeluaran?
Hanya gunakan kod kecil dalam pengeluaran. Semasa pembangunan, simpan kod asal yang boleh dibaca. Kebanyakan alat binaan (Webpack, Vite, esbuild) mengendalikan minifikasi secara automatik sebagai sebahagian daripada proses binaan pengeluaran.
Apakah perbezaan antara minifikasi dan kekeliruan?
Minifikasi mengurangkan saiz sambil memastikan kod boleh dibaca secara berfungsi jika diformatkan. Kekeliruan sengaja menjadikan kod sukar difahami (pengekodan rentetan, kawalan aliran merata). Alat ini memfokuskan pada pengurangan saiz, bukan kebingungan.
Berapa banyak pengurangan saiz yang perlu saya jangkakan?
Biasanya 30-60% sebelum gzip. Kod yang diulas dengan baik dengan nama pembolehubah yang panjang menyaksikan pengurangan terbesar. Digabungkan dengan pemampatan gzip, fail JavaScript selalunya 80-90% lebih kecil daripada sumber asal.
Adakah kod saya dimuat naik ke pelayan?
Tidak. Pemecil dijalankan dalam penyemak imbas anda.
Berapa lebih kecilkah JavaScript saya?
Biasanya pengurangan 30-60%. Kod berat boleh ubah dengan pengecam panjang memampatkan lebih banyak; kod ekspresi berat kurang memampatkan.
Adakah saya perlu mengecil dengan tangan?
tidak pernah. Kekalkan JavaScript yang boleh dibaca dalam sumber. Jalankan minifikasi sebagai langkah binaan atau sebagai sebahagian daripada penggunaan.
Adakah ia berfungsi pada TypeScript?
TypeScript perlu dikompilasi ke JavaScript terlebih dahulu menggunakan tsc atau esbuild. Setelah disusun, JavaScript yang terhasil boleh dikecilkan.