Minikan JavaScript _

Cara peminifikasian JavaScript berfungsi

Terser berfungsi dalam empat peringkat ke atas Abstract Syntax Tree kod anda. Setiap peringkat adalah bebas, jadi anda boleh menghidupkan atau mematikan mana-mana daripadanya tanpa merosakkan yang lain.

1. Hurai. Terser menghurai JavaScript anda kepada AST. Sebarang ralat sintaks muncul di sini bersama token dan baris yang menyebabkannya, supaya anda menemui masalah sebenar sebelum sebarang transformasi dijalankan. Penghurai menerima setiap konstruk ECMAScript standard sehingga cadangan peringkat-4 terbaru.
2. Mampatkan. Pemadat menelusuri AST dan menggunakan berpuluh transformasi yang memelihara semantik: pelipatan pemalar, penyingkiran cawangan mati, penyebarisan fungsi tulen yang pendek, penyatuan pengisytiharan var berurutan, dan penulisan semula bentuk pernyataan yang setara (if/else kepada ternari, pemendekkan rantai perbandingan, penyatuan pulang bersyarat). Setiap transformasi boleh diterbalikkan secara prinsip; pemadat tidak pernah mengubah tingkah laku yang boleh diperhatikan.
3. Mangle. Mangler menamakan semula pengikat tempatan kepada pengecam unik terpendek (a, b, c, …) dalam setiap skop. Hanya nama yang tidak dapat melepasi sempadan modul yang dinamakan semula, jadi pengikat yang dieksport, kunci sifat, dan rujukan global kekal tidak disentuh. Hasilnya adalah penjimatan bait tunggal terbesar bagi mana-mana peringkat.
4. Render. Terser mencetak semula AST yang ditransformasi kepada rentetan JavaScript dengan ruang kosong yang diruntuhkan dan pemisah pernyataan dikurangkan kepada minimum yang diterima oleh tatabahasa. Komen dibuang melainkan togol kekalkan-lesen mengekalkan blok /*! … */, yang dikehendaki oleh kebanyakan lesen CDN untuk dikekalkan.

Mengapa minikan JavaScript

• Muat halaman lebih pantas. Skrip yang lebih kecil dihurai dan dilaksanakan lebih awal. Pada sambungan mudah alih 4G, pengurangan bait sebanyak 40 peratus mengurangkan beberapa saat daripada Time to Interactive, yang merupakan metrik yang paling agresif diukur oleh Google PageSpeed Insights.
• Bil keluar CDN yang lebih rendah. CloudFront, Cloudflare, dan Fastly mengenakan caj setiap gigabait keluar. Pengurangan skrip sebanyak 40 peratus merentas jutaan paparan halaman bulanan terkumpul menjadi penjimatan nyata sebelum sebarang kerja imej atau CSS mendarat. Pengiraan ini berlaku walaupun selepas gzip dan brotli — peminifikasian membuang token yang perlu dikodkan oleh pemampat.
• Peminifier ini tidak membebankan halaman anda. Terser berukuran ~1 MB tanpa mampatan. Kebanyakan peminifier dalam talian menghantar seluruh perpustakaan semasa halaman dimuatkan, yang merendahkan skor Lighthouse mereka sendiri dan membuat halaman terasa perlahan sebelum pengguna menaip apa-apa. Halaman ini memuatkan Terser secara malas hanya apabila anda mengklik Minify atau menghidupkan mod Langsung — jadi render awal kekal di bawah ambang Core Web Vitals yang dijanjikan alat ini untuk membantu anda capai.
• Lulus Core Web Vitals. Lighthouse dan PageSpeed Insights menandakan JavaScript yang besar sebagai penyumbang langsung kepada Total Blocking Time yang buruk. Peminifikasian perpustakaan vendor dan bundle aplikasi adalah kemenangan terpantas dalam audit Lighthouse "Kurangkan JavaScript tidak digunakan" dan "Buang modul pendua" — biasanya pengurangan sekali gus bernilai sepuluh atau dua puluh mata.

Aplikasi biasa

Peminifikasian JavaScript muncul hampir di setiap peringkat projek web moden.

• Hook pra-komit: minikan skrip utiliti individu sebelum komit ke repositori supaya artifak yang dilakukan sedia untuk pengeluaran dan perbezaan menunjukkan perubahan logik dan bukannya perubahan ruang kosong.
• Audit widget pihak ketiga: tampalkan snippet benam vendor dan semak sama ada ia sudah diminikan atau boleh dikecilkan lagi sebelum menghantarnya kepada jutaan pengguna.
• Pembersihan skrip lama: mampatkan pemalam jQuery lama dan skrip yang ditulis secara manual yang mendahului saluran paip binaan semasa anda, tanpa menyentuh pokok sumber.

Contoh yang dikerjakan

Ambil fungsi kecil: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — kira-kira 130 bait termasuk komen. Tampalkan di atas dengan Mangle dan Compress kedua-duanya dihidupkan. Output dipendekkan kepada lebih kurang function add(n,o){return n+o}console.log(add(1,2)); — kira-kira 55 bait, pengurangan 58 peratus. Nama fungsi add kekal kerana ia dirujuk dalam panggilan console.log; nama parameter firstNumber dan secondNumber dipendekkan kepada huruf tunggal kerana ia adalah tempatan kepada badan fungsi. Matikan Mangle untuk mengekalkan nama parameter yang boleh dibaca sambil masih meruntuhkan ruang kosong dan membuang komen.

FAQ

Adakah ini berjalan di pelayar saya?

Ya. Terser dimuatkan secara malas kali pertama anda mengklik Minify atau mendayakan mod Langsung — kira-kira 200 KB dimampatkan mendarat dalam cache pelayar anda, kemudian tiada lagi yang dimuat turun. Kod anda tidak pernah meninggalkan halaman.

Apakah mangling nama dan adakah ia selamat?

Mangling menamakan semula pemboleh ubah tempatan kepada huruf tunggal untuk menjimatkan bait. Ia selamat untuk skrip bebas dan bundle IIFE kerana penamaan semula tidak pernah meninggalkan skop. Ia TIDAK selamat untuk skrip yang mendedahkan global mengikut nama (cth. window.myLib = …) tanpa pembungkus. Matikan Mangle apabila tidak pasti.

Mengapa kod saya rosak selepas peminifikasian?

Tiga suspek biasa: eval atau with merujuk pemboleh ubah mengikut rentetan; pembacaan Function.name atau arguments.callee yang bergantung kepada pengecam asal; atau global yang didedahkan mengikut nama yang telah dinamakan semula. Matikan Mangle dahulu untuk mengasingkan sama ada penamaan semula atau transformasi Compress yang menjadi puncanya.

Adakah ini menyokong sintaks moden (ES2020+)?

Ya. Tetapkan sasaran ECMAScript kepada ES2020 atau Next dan Terser memelihara optional chaining, nullish coalescing, top-level await, dan operator logical-assignment. Tetapkan kepada ES5 dan Terser menurunkan kompilasi di mana boleh, tetapi ia bukan transpiler penuh — gunakan Babel untuk sintaks yang tidak dapat diwakili oleh ES5 sama sekali.

Peminifikasian JavaScript berasaskan pelayar dengan Terser memberikan anda output berkualiti pengeluaran tanpa menambah alat binaan. Tampalkan skrip, pilih sasaran ECMAScript, salin atau muat turun hasilnya. Tiada apa yang dimuat naik, tiada akaun, tiada saluran paip binaan. Peminifier itu sendiri hanya dimuatkan apabila anda memintanya — jadi membuka halaman ini hanya memerlukan beberapa kilobait, bukan satu megabait.