Pemampat JS

Pemampat JS ialah alat percuma yang membuang aksara tidak diperlukan daripada JavaScript serta melaporkan bilangan aksara sebelum dan selepas pemampatan.

Apakah masalah yang diselesaikan oleh pemampatan JavaScript?

Pemampatan JavaScript mengurangkan jumlah kod sumber yang perlu dimuat turun oleh pelayar. Proses ini biasanya membuang pemformatan seperti inden, pemisah baris dan ruang apabila aksara tersebut tidak diperlukan oleh sintaks JavaScript.

Skrip yang lebih kecil boleh mengurangkan saiz pemindahan dan kerja penghuraian, terutamanya apabila laman menghantar beberapa berkas besar. Pemampatan HTTP seperti Brotli atau gzip masih penting kerana pemampatan kod dan pemampatan pemindahan menyelesaikan bahagian masalah yang berbeza. Pemampatan kod membuang aksara sumber, manakala pemampatan pemindahan mengekod data berulang dalam bentuk yang lebih padat semasa penghantaran.

Proses ini biasanya dilakukan semasa binaan sebelum pelaksanaan. Ia juga berguna untuk memeriksa skrip pihak ketiga yang belum dimampatkan, membandingkan saiz berkas atau menyediakan fail kendiri bagi laman yang tidak mempunyai saluran binaan.

Pemampatan tidak membuktikan bahawa JavaScript berfungsi dengan betul. Skrip mungkin berjaya dimampatkan tetapi masih mengandungi panggilan API yang salah, pemboleh ubah yang tidak boleh dicapai atau kod yang hanya gagal ketika dijalankan.

Bagaimanakah cara menggunakan Pemampat JS?

Tampalkan JavaScript dalam medan JS dan jalankan alat, kemudian salin nilai yang dipaparkan dalam JS termampat. Simpan fail sumber asal dalam kawalan versi dan laksanakan salinan padat, bukannya menggantikan sumber yang mudah dibaca.

1. Jalankan pemeriksaan sintaks, pelinter dan ujian automatik pada kod sumber terlebih dahulu.
2. Tampalkan keseluruhan skrip dalam JS, termasuk sebarang import modul atau fungsi pembalut yang merupakan sebahagian daripada fail.
3. Semak Aksara JS dan Aksara JS termampat untuk melihat perubahan bilangan aksara.
4. Uji bahawa JavaScript yang dimampatkan dapat dijalankan dengan betul dalam pelayar dan konteks pelaksanaan yang sama seperti fail produksi.
5. Gunakan nama fail yang mudah dikenal pasti seperti app.min.js jika versi mampat dan versi mudah dibaca disimpan bersama.

Pemprosesan dilakukan pada pelayan. Input anda dihantar kepada pelayan melalui HTTPS dan tidak disimpan. Pelayan masih perlu menerima JavaScript tersebut untuk memprosesnya, jadi jangan serahkan kod sumber yang dilarang oleh organisasi anda daripada dihantar kepada perkhidmatan luaran.

Apakah yang terkandung dalam hasil mampatan?

Hasilnya mengandungi JavaScript padat dan dua bilangan aksara. Aksara JS ialah panjang input, manakala Aksara JS termampat ialah panjang JS termampat yang dikembalikan.

Bilangan ini dikira menggunakan fungsi mb_strlen PHP, yang mengukur panjang rentetan berbilang bait dan bukan sekadar melaporkan jumlah bait. Oleh itu, bilangan aksara tidak sama dengan saiz akhir pemindahan rangkaian. Aksara UTF-8 mungkin menggunakan lebih daripada satu bait, manakala gzip atau Brotli boleh mengurangkan lagi saiz fail yang dihantar.

Alat ini tidak menyediakan medan pengesahan atau diagnostik yang berasingan. Jangan mengharapkannya untuk mengenal pasti setiap kurungan yang hilang, ungkapan nalar yang tidak sah atau ciri bahasa yang tidak disokong. Khususnya, ralat yang dikaitkan dengan JSON, seperti nama sifat tanpa tanda petik atau koma di hujung, bukan pemeriksaan JavaScript yang boleh dipercayai kerana sintaks literal objek JavaScript berbeza daripada sintaks JSON. Gunakan Pengesah & pencantik JSON untuk data JSON.

Contoh ringkas dan input yang rumit

Perubahan ruang yang mudah boleh ditunjukkan seperti berikut.

Input

function add(a, b) { return a + b; }

Bentuk padat

function add(a,b){return a+b;}

Pemformatan di sekeliling objek juga boleh dibuang tanpa mengubah nilai sifatnya.

Input

const settings = { theme: "dark", retries: 2 };

Bentuk padat

const settings={theme:"dark",retries:2};

Pemformatan tepat mungkin berbeza antara alat pemampat, terutamanya di sekitar koma bernoktah pilihan. JavaScript tidak boleh dipadatkan dengan selamat hanya dengan memadamkan setiap ruang atau pemisah baris. Pemampatan yang selamat perlu mengambil kira konteks leksikal dan sintaksis untuk membezakan pemformatan daripada aksara yang mempengaruhi atur cara.

• Ruang dalam rentetan ialah data. Ruang dalam "Newcastle upon Tyne" mesti dikekalkan.
• Tanda baca mungkin mempunyai fungsi sintaksis. Membuang ruang daripada a + +b mungkin menghasilkan jujukan token yang berbeza.
• Pemisah baris kadangkala mempengaruhi penyisipan koma bernoktah automatik, termasuk dalam kod selepas return, break atau continue. Pemisah baris sejurus selepas throw tidak dibenarkan kerana ungkapannya mesti bermula pada baris yang sama.
• Aksara beraksen dan bukan Latin mungkin terdapat dalam rentetan dan, jika dibenarkan oleh peraturan pengecam JavaScript, dalam pengecam. Saiz baitnya boleh berbeza daripada bilangan aksaranya.
• Nombor ialah token sumber, bukannya arahan bilangan aksara. Alat pemampat mesti mengekalkan nilai berangkanya walaupun memilih tatatanda setara yang lebih pendek.

Bilakah JavaScript tidak berbaloi untuk dimampatkan?

Pemampatan biasanya tidak berbaloi diulang jika fail sudah dimampatkan. Pemampatan kali kedua mungkin hanya menjimatkan sedikit ruang atau langsung tidak mengurangkannya, di samping menyukarkan penjejakan output binaan dan berpotensi mengganggu peta sumber sedia ada.

Tiada banyak sebab untuk mencantikkan dan kemudian memampatkan JavaScript yang hanya akan dibaca oleh mesin. Simpan sumber yang mudah dibaca untuk penyelenggaraan dan hasilkan artifak pelaksanaan daripadanya. Bagi aplikasi yang sudah mantap, alat binaan seperti esbuild, Rollup atau webpack secara umumnya lebih sesuai kerana alat tersebut boleh mengautomasikan penggabungan modul dan penjanaan peta sumber. Pemampatan mungkin tersedia secara terbina dalam atau ditambahkan melalui konfigurasi atau pemalam, manakala Terser ialah alat pemampat khusus.

Jangan anggap pemampatan sebagai pengaburan kod atau kawalan akses. Nama fungsi dan pemboleh ubah mungkin masih kelihatan, literal rentetan masih boleh dibaca, dan alat pembangun pelayar boleh memformat semula kod padat. Rahsia, kunci peribadi dan kelayakan berkeistimewaan tidak boleh sama sekali dibenamkan dalam JavaScript bahagian klien.

Jika anda menyediakan semua aset statik halaman, Pemampat CSS dan Pemampat minimum HTML boleh menjalankan operasi yang sepadan untuk format tersebut. Gunakan alat berasingan bagi setiap format kerana peraturan penghuraian dan ruang putihnya berbeza.

Soalan lazim

Adakah alat ini menjana peta sumber?

Tidak, alat ini tidak menyediakan medan peta sumber. Jika anda perlu memetakan surihan tindanan produksi kembali kepada fail asal, jana skrip yang dimampatkan dan fail .map yang sepadan dalam proses binaan yang sama. Melaksanakan peta sumber daripada binaan yang berbeza boleh menghasilkan rujukan baris dan lajur yang mengelirukan.

Bolehkah pemampatan menghalang orang daripada menyalin JavaScript saya?

Tidak. Pelayar mesti menerima kod bahagian klien yang boleh dijalankan, jadi pelawat boleh memuat turun dan memeriksanya. Pemampatan menjadikan sumber kurang mudah dibaca, tetapi tidak menyediakan kerahsiaan, penguatkuasaan lesen atau perlindungan bermakna untuk rahsia yang dibenamkan.

Bolehkah saya menampal kod yang mengandungi kunci API?

Jangan tampal kunci API rahsia, token atau kelayakan peribadi. Input dihantar melalui HTTPS dan tidak disimpan, tetapi pemprosesan dilakukan pada pelayan. Kunci pelayar awam yang sengaja diedarkan kepada setiap pelawat masih memerlukan sekatan domain, asal, kuota atau kebenaran jika disokong oleh perkhidmatan berkaitan.

Adakah bilangan aksara yang lebih kecil sentiasa mempercepatkan pemuatan halaman?

Tidak. Kesannya bergantung pada saiz fail asal, cache, keadaan sambungan, pemampatan pelayan serta jumlah JavaScript yang perlu dihuraikan dan dijalankan oleh pelayar. Periksa saiz pemindahan selepas pemampatan dan tingkah laku masa jalan, bukan sekadar jumlah aksara.

Perlukah sambungan .js dikekalkan selepas pemampatan?

Ya. JavaScript yang dimampatkan biasanya mengekalkan sambungan .js, dengan .min.js digunakan sebagai kelaziman penamaan apabila kedua-dua versi tersedia. Sebelum pelaksanaan, pastikan pelayan menghantar jenis kandungan JavaScript yang sesuai dan HTML atau import modul merujuk kepada fail yang dimaksudkan.