Minikan HTML _

Cara peminifikasian HTML berfungsi

Minifier melalui input anda dengan mesin keadaan kecil yang membezakan kawasan pelihara-seadanya (<pre>, <textarea>, <script>, <style>) daripada kawasan yang boleh diedit di mana ruang kosong dan komen selamat untuk diruntuhkan.

1. Tokenkan blok pelihara. Pengimbas membaca input aksara demi aksara dan bertukar kepada keadaan pelihara apabila ia mengenai tag pembuka <pre>, <textarea>, <script>, atau <style>. Segala-galanya di dalam tag tersebut dikekalkan bait demi bait sehingga penutup yang sepadan.
2. Runtuhkan ruang kosong yang boleh diedit. Dalam kawasan yang boleh diedit, pengimbas meruntuhkan setiap deretan ruang, tab, dan baris baharu kepada satu ruang, kemudian memangkas ruang kosong di awal dan akhir di sekeliling sempadan tag. Teks yang kelihatan mengalir semula seperti cara pelayar merendernya.
3. Buang komen. Blok <!-- ... --> dibuang apabila togol dihidupkan. Komen bersyarat IE (<!--[if IE]> ... <![endif]-->) kekal apabila togol pelihara-bersyarat dihidupkan, kerana klien e-mel lama masih bergantung padanya.
4. Runtuhkan atribut boolean. Bentuk panjang seperti checked="checked", disabled="disabled", dan required="required" mengecil kepada nama atribut sahaja. Spec HTML5 menganggap bentuk sahaja sebagai sama dari segi semantik, jadi DOM yang dirender tidak berubah.
5. Laporan delta bait. Kedua-dua teks asal dan yang diminikan diukur dengan new TextEncoder().encode(...).byteLength, kiraan bait UTF-8 yang sama yang dilihat oleh CDN atau pelayan HTTP pada wayar. Jalur metrik menunjukkan saiz asal, saiz diminikan, bait yang disimpan, dan peratus yang disimpan.

Mengapa minikan HTML

• Muat halaman yang lebih pantas. HTML yang lebih kecil sampai ke pelayar lebih cepat dan penghurai selesai lebih awal. Pada rangkaian mudah alih, penjimatan bait diterjemahkan terus kepada First Contentful Paint yang lebih pantas dan skor prestasi Lighthouse yang lebih baik.
• Bil keluar CDN yang lebih rendah. CloudFront, Cloudflare, dan Fastly membil setiap gigabait keluar. Pengurangan HTML sebanyak 20 peratus merentas jutaan paparan bulanan berganda kepada penjimatan nyata pada invois, sebelum sebarang pengoptimuman imej atau skrip mendarat.
• Diff permintaan tarikan yang lebih bersih. HTML statik pra-bina yang dikomit ke repositori menjadi bising apabila setiap tweakan templat mengalir semula indentasi. HTML yang diminikan dalam folder dist menghasilkan diff PR yang lebih ketat yang memberi tumpuan kepada perubahan kandungan sebenar dan bukannya perputaran ruang kosong.
• Benam dan coretan yang lebih kecil. Templat e-mel, coretan widget pihak ketiga, dan HTML yang disimpan dalam konfigurasi JSON atau YAML semuanya mendapat manfaat daripada pengurangan bait yang sama. Benam yang diminikan mengekalkan e-mel transaksi di bawah had saiz ESP dan mengecilkan bundel widget.

Aplikasi biasa

Peminifikasian HTML muncul pada penghujung hampir setiap saluran paip binaan tapak statik atau JAMstack, ditambah beberapa konteks masa jalan di mana bait lebih penting daripada kebolehbacaan sumber.

• Langkah binaan tapak statik: binaan pengeluaran Eleventy, Hugo, Astro, dan Next.js menjalankan HTML melalui minifier sebelum menulis ke folder dist supaya bundel yang digunakan lebih kecil daripada sumber.
• E-mel transaksi: ESP (SendGrid, Postmark, Mailgun) mengehadkan saiz badan HTML dan pengembangan CSS sebaris mengembung kiraan itu dengan cepat. Meminikan badan sebelum menghantar mengekalkan mesej di bawah had.
• Widget terbenam: widget pihak ketiga dan coretan sembang yang dihantar sebagai HTML sebaris mendapat manfaat daripada setiap pengurangan bait kerana halaman hos perlu memuat turunnya pada setiap lawatan.

Contoh yang dikerjakan

Tampalkan coretan borang panjang 500 bait dengan indentasi dua ruang, tiga peralihan baris antara baris, blok komen HTML di bahagian atas, dan <input type="checkbox" checked="checked" />. Dengan setiap pilihan dihidupkan, output diruntuhkan kepada kira-kira 300 bait — kira-kira penjimatan 40 peratus — sementara pepohon DOM yang dirender kekal sama bait dengan sumber.

Adakah peminifikasian akan memecahkan HTML saya?

Tidak, apabila digunakan dengan togol lalai. Minifier memelihara kandungan tag <pre>, <textarea>, <script>, dan <style> secara verbatim, meninggalkan komen bersyarat IE utuh apabila togol tersebut dihidupkan, dan hanya meruntuhkan ruang kosong yang penghurai HTML5 sudah klasifikasikan sebagai tidak signifikan. Pepohon DOM yang dirender adalah sama bait dengan sumber. Togol agresif (buang-atribut-kosong) boleh mengubah tingkah laku untuk coretan yang sengaja menggunakan value="" atau alt="", jadi semak output jika anda menghidupkannya.

Adakah ini minikan CSS dan JS sebaris?

Tidak dalam alat ini. Badan <style> dan <script> sebaris dipelihara secara verbatim supaya minifier tidak pernah memecahkan peraturan CSS atau pernyataan JS dengan meruntuhkan ruang kosong di dalam literal rentetan atau regex. Untuk peminifikasian khusus CSS gunakan CSS Minifier; untuk JS gunakan JS Minifier. HTML Minifier memberi tumpuan kepada markup itu sendiri.

Berapa banyak yang boleh saya jimatkan?

Penjimatan tipikal pada HTML yang ditulis secara manual berkisar antara 10 hingga 30 peratus, bergantung pada seberapa banyak sumber menggunakan indentasi, baris kosong, dan bentuk atribut panjang. HTML statik pra-bina daripada rangka kerja seperti Next.js sering menjimatkan 15 hingga 25 peratus kerana rangka kerja sudah melakukan beberapa pengoptimuman tetapi meninggalkan ruang kosong yang boleh dibaca manusia. Templat yang banyak dikomentari dan HTML gaya e-mel dengan penyarangan mendalam boleh mencapai 40 peratus atau lebih.

Adakah kandungan pre dipelihara?

Ya. Minifier secara eksplisit mentokenkan blok <pre>, <textarea>, <script>, dan <style> sebagai kawasan pelihara-seadanya dan menyalin kandungannya bait demi bait ke output. Ruang kosong, peralihan baris, dan indentasi di dalam tag tersebut kekal tidak disentuh, jadi sampel kod dan seni ASCII dirender persis sama selepas peminifikasian.

Peminifikasian HTML bahagian pelayar mengekalkan saluran paip binaan anda mudah dan markup anda kecil. Tampalkan sebarang HTML di atas, laraskan togol pilihan, dan salin atau muat turun output yang diminikan — tiada muat naik, tiada akaun, tiada perpustakaan vendor.