Pemampat & Pemformat HTML Dalam Talian — Percuma, Tiada Muat Naik

Tampal HTML di bawah untuk sama ada memampatkannya — membuang komen, atribut berlebihan dan ruang putih tambahan — atau mencantikkannya menjadi markup boleh dibaca dan berindent. Kedua-dua arah berjalan sepenuhnya dalam pelayar anda menggunakan penghurai HTML sebenar, bukan helah regex, jadi kandungan dalam <pre> dan <textarea> kekal utuh.

Apakah alat ini?

Pemampat HTML membuang segala yang pelayar tidak perlukan untuk memaparkan halaman dengan betul: komen, ruang putih tambahan antara tag, atribut berlebihan seperti type="text/javascript", dan slash penutup pilihan. Hasilnya ialah HTML yang secara fungsi sama tetapi dimuat turun dan dihurai lebih pantas.

Alat ini dibina atas html-minifier-terser, pemampat yang sama yang digunakan dalam alat pembinaan popular, jadi ia memahami struktur HTML dan bukannya membuang ruang putih secara membuta tuli — ia tidak akan menyentuh kandungan sensitif pemformatan dalam <pre>, <textarea>, atau blok <script>/<style> sebaris, dan ia juga memampatkan CSS dan JS yang terbenam dalam markup anda.

Kenapa guna alat ini?

Penghurai sebenar di sebalik, bukan regex — selamat pada kes tepi seperti blok <pre>, skrip sebaris, dan komen bersyarat.
Memampatkan kandungan <style> dan <script> terbenam juga, bukan hanya markup sekeliling.
Lihat dengan tepat berapa bait anda jimatkan sebelum menghantar fail.
Mod Format menukar HTML termampat sebaris kembali menjadi sesuatu yang boleh dibaca dan disunting oleh manusia.
Pemprosesan 100% lokal — markup anda, dan apa jua yang peribadi di dalamnya, tidak pernah meninggalkan pelayar anda.

Cara menggunakannya

Tampal HTML anda ke dalam kotak input, atau klik "Load Example" untuk mencuba sampel.
Klik "Minify" untuk memampatkannya, atau "Format" untuk mencantikkannya dengan indentasi 2-ruang.
Semak mesej di bawah kotak — mod minify menunjukkan pengurangan saiz; jika HTML tidak boleh dihurai, anda akan melihat ralat yang tepat dan bukannya output rosak.
Klik "Copy" untuk mengambil hasilnya.

Contoh

Input

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Hasil

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Komen, indentasi dan pemisah baris dibuang; doctype dipendekkan. Halaman yang kelihatan dipaparkan secara sama.

Petua praktikal

Mampatkan sejurus sebelum penerapan, bukan semasa pembangunan — kekalkan HTML boleh dibaca dalam kawalan sumber dan mampatkan hanya output pembinaan.
Jika halaman berkelakuan pelik selepas dimampatkan, semak JavaScript yang bergantung pada ruang putih tepat dalam nod teks (jarang, tetapi berlaku dengan sesetengah widget lama).
Memformatkan HTML termampat daripada laman langsung ialah cara pantas untuk memeriksa strukturnya sebelum menulis pengikis atau menyahpepijat isu susun atur.
Gabungkan dengan pemampat CSS dan JS di bawah jika proses pembinaan anda menyimpan gaya dan skrip dalam fail berasingan.

Di mana ini sesuai dalam aliran kerja sebenar

Laman statik, templat e-mel dan halaman pendaratan yang dibina secara manual sering dihantar dengan indentasi dan komen yang sama digunakan semasa pembangunan. Pemampatan sebelum penerapan mengurangkan jumlah berat pemindahan yang sebenar, walaupun sederhana — dan untuk HTML e-mel khususnya, bilangan aksara kadangkala mempengaruhi ambang pemotongan Gmail, jadi markup lebih kecil mempunyai manfaat fungsi melebihi kelajuan.

Arah Format sama bergunanya dalam songsang: menampal halaman termampat daripada view-source dan memformatkan semula sering cara paling pantas untuk memahami struktur halaman pendaratan pesaing atau menyahpepijat embed pihak ketiga.

→ Pemin CSS · Pemin JS

Kes penggunaan biasa

Mengurangkan bait daripada halaman pendaratan statik atau templat e-mel sebelum ia dilancarkan.
Memformatkan semula serpihan HTML termampat yang diambil daripada view-source untuk memahami strukturnya.
Membersihkan HTML yang ditampal daripada editor WYSIWYG atau eksport CMS, yang selalunya membawa ruang putih berlebihan.
Menyemak dengan pantas sama ada serpihan HTML tulisan tangan terbentuk dengan baik, kerana kegagalan huraian muncul sebagai ralat yang jelas.

Soalan lazim

Adakah HTML saya dimuat naik ke mana-mana?

Tidak. Pemampatan dan pemformatan kedua-duanya berlaku secara lokal dalam pelayar anda menggunakan JavaScript. Tiada apa yang anda tampal dihantar ke pelayan, jadi selamat digunakan dengan templat dalaman atau halaman yang belum dikeluarkan.

Adakah pemampatan akan merosakkan halaman saya?

Sepatutnya tidak — alat ini menggunakan penghurai HTML sebenar (html-minifier-terser) yang memahami struktur tag, jadi ia mengekalkan elemen sensitif ruang putih seperti <pre> dan <textarea> dan tidak akan menggabungkan atribut secara salah. Sentiasa semak halaman kritikal selepas pemampatan, terutamanya jika anda bergantung pada skrip sebaris yang luar biasa.

Adakah ia juga memampatkan CSS dan JavaScript di dalam HTML?

Ya. Blok <style> dan <script> sebaris dimampatkan di tempat menggunakan enjin yang sama seperti alat pemampat CSS dan JS khusus, jadi anda tidak perlu mengekstraknya secara manual.

Berapa lebih kecil biasanya HTML menjadi?

Ia bergantung pada berapa banyak ruang putih, komen dan pemformatan yang ada pada asal — HTML tulisan tangan dengan banyak indentasi dan komen biasanya mengecut 20-40%. HTML dijana rangka kerja yang sudah padat akan menjimatkan lebih sedikit.

Bolehkah saya menukar HTML termampat kembali kepada format boleh dibaca?

Ya — tampal HTML termampat dan klik "Format" dan bukannya "Minify" untuk mendapatkan kembali markup berindent yang sesuai dan boleh dibaca.

Pemampat & Pemformat HTML