CodeKitHubKas ir šis rīks?
HTML minificētājs noņem visu, kas pārlūkam nav nepieciešams, lai pareizi attēlotu lapu: komentārus, liekās atstarpes starp tagiem, liekos atribūtus, piemēram, type="text/javascript", un neobligātas aizverošās slīpsvītras. Rezultāts ir funkcionāli identisks HTML, kas lejupielādējas un tiek parsēts ātrāk.
Šis rīks ir veidots uz html-minifier-terser bāzes — tā paša minificētāja, ko izmanto populāri būvēšanas rīki, tāpēc tas saprot HTML struktūru, nevis aklu atstarpju noņemšanu — tas neaiztiks formatēšanai jutīgu saturu iekšpus <pre>, <textarea> vai iekļauto <script>/<style> blokos, un tas arī minificē tavā iezīmējumā iegulto CSS un JS.
Kāpēc to izmantot?
- Zem pārsega īsts parseris, nevis regulāras izteiksmes — droši ar robežgadījumiem, piemēram, <pre> blokiem, iekļautiem skriptiem un nosacītiem komentāriem.
- Minificē arī iegulto <style> un <script> saturu, ne tikai apkārtējo iezīmējumu.
- Redzi, cik precīzi baitus ietaupīji pirms faila izlaišanas.
- Formatēšanas režīms pārvērš saspiestu, vienā rindā esošu HTML atpakaļ kaut kā cilvēkam lasāmā un rediģējamā.
- 100% lokāla apstrāde — tavs iezīmējums un jebkas privāts tajā nekad neatstāj pārlūku.
Kā to lietot
- Ielīmē HTML ievades laukā vai noklikšķini "Ielādēt piemēru", lai izmēģinātu paraugu.
- Noklikšķini "Minificēt", lai to saspiestu, vai "Formatēt", lai sakārtotu ar 2 atstarpju atkāpēm.
- Apskati ziņojumu zem laukiem — minificēšanas režīms rāda izmēra samazinājumu; ja HTML nevar parsēt, redzēsi precīzu kļūdu, nevis salauztu izvadi.
- Noklikšķini "Kopēt", lai iegūtu rezultātu.
Piemērs
Ievade
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Izvade
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>Komentāri, atkāpes un rindiņu pārtraukumi ir noņemti; doctype ir saīsināts. Redzamā lapa tiek attēlota identiski.
Praktiski padomi
- Minificē tieši pirms izvietošanas, nevis izstrādes laikā — glabā lasāmu HTML versiju kontrolē un minificē tikai būvēšanas rezultātu.
- Ja lapa pēc minificēšanas uzvedas dīvaini, pārbaudi, vai JavaScript nepaļaujas uz precīzām atstarpēm teksta mezglos (reti, bet gadās dažiem vecākiem sīkrīkiem).
- Dzīvas vietnes minificēta HTML formatēšana ir ātrs veids, kā izpētīt tās struktūru pirms skrāpera rakstīšanas vai izkārtojuma problēmu atkļūdošanas.
- Kombinē ar CSS un JS minificētājiem zemāk, ja tavs būvēšanas process glabā stilus un skriptus atsevišķos failos.
Kur tas iekļaujas reālās darbplūsmās
Statiskas vietnes, e-pasta veidnes un piesaistes lapas, kas veidotas ar roku, bieži tiek izplatītas ar tām pašām atkāpēm un komentāriem, kas izmantoti izstrādes laikā. Minificēšana pirms izvietošanas samazina reālu, kaut arī nelielu, pārraides svaru — un e-pasta HTML gadījumā simbolu skaits dažreiz ietekmē Gmail apgriešanas slieksni, tāpēc mazāks iezīmējums dod funkcionālu labumu, ne tikai ātrumu.
Formatēšanas virziens ir tikpat noderīgs otrādi: minificētas lapas ielīmēšana no view-source un tās pārformatēšana bieži ir ātrākais veids, kā saprast konkurenta piesaistes lapas struktūru vai atkļūdot trešās puses iegulto saturu.
Biežākie lietojuma gadījumi
- Baitu nogriešana no statiskas piesaistes lapas vai e-pasta veidnes pirms tās publiskošanas.
- No view-source izvilktas minificētas HTML fragmenta pārformatēšana, lai saprastu tā struktūru.
- No WYSIWYG redaktora vai CMS eksporta ielīmēta HTML sakārtošana, kas bieži satur lieku atstarpi.
- Ātra pārbaude, vai ar roku rakstīts HTML fragments ir pareizi izveidots, jo parsēšanas kļūme parādās kā skaidra kļūda.
Biežāk uzdotie jautājumi
Vai mans HTML tiek kaut kur augšupielādēts?
Nē. Gan minificēšana, gan formatēšana notiek lokāli tavā pārlūkā, izmantojot JavaScript. Nekas no ielīmētā netiek sūtīts uz serveri, tāpēc to droši var izmantot ar iekšējiem veidnēm vai vēl nepublicētām lapām.
Vai minificēšana sabojās manu lapu?
Tai nevajadzētu — rīks izmanto īstu HTML parseri (html-minifier-terser), kas saprot tagu struktūru, tāpēc tas saglabā atstarpēm jutīgus elementus, piemēram, <pre> un <textarea>, un nesamainīs atribūtus nepareizi. Vienmēr izlases veidā pārbaudi svarīgas lapas pēc minificēšanas, īpaši, ja paļaujies uz neparastiem iekļautiem skriptiem.
Vai tas minificē arī CSS un JavaScript iekš HTML?
Jā. Iekļautie <style> un <script> bloki tiek minificēti uz vietas, izmantojot tos pašus dzinējus, ko izmanto specializētie CSS un JS minificētāju rīki, tāpēc tie nav manuāli jāizvelk.
Cik daudz mazāks parasti kļūst HTML?
Tas atkarīgs no tā, cik daudz atstarpju, komentāru un formatējuma bija oriģinālā — ar roku rakstīts HTML ar daudz atkāpēm un komentāriem parasti samazinās par 20-40%. Karkasu ģenerēts HTML, kas jau ir kompakts, ietaupīs mazāk.
Vai es varu konvertēt minificētu HTML atpakaļ lasāmā formātā?
Jā — ielīmē minificēto HTML un noklikšķini "Formatēt" nevis "Minificēt", lai iegūtu pareizi ar atkāpēm formatētu, lasāmu iezīmējumu.