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.
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.
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.