Kandamiza HTML _

Jinsi ukandamizaji wa HTML unavyofanya kazi

Kikandamizaji kinatembea kwenye ingizo lako na mashine ndogo ya hali inayotofautisha maeneo ya kuhifadhi-kama-ilivyo (<pre>, <textarea>, <script>, <style>) kutoka maeneo yanayoweza kuhaririwa ambapo nafasi na maoni ni salama kufinya.

1. Tokenize vitalu vya kuhifadhi. Kichanganuzi husoma ingizo herufi kwa herufi na kubadilika kwenye hali ya kuhifadhi kinapokutana na lebo ya ufunguzi ya <pre>, <textarea>, <script>, au <style>. Kila kitu ndani ya lebo hizo kinahifadhiwa baiti kwa baiti hadi kufungwa kwa linganifu.
2. Finya nafasi inayoweza kuhaririwa. Katika maeneo yanayoweza kuhaririwa kichanganuzi hufinya kila mfululizo wa nafasi, vichupo, na mstari mpya hadi nafasi moja, kisha hukata nafasi ya kuongoza na ya mwisho karibu na mipaka ya lebo. Maandishi yanayoonekana yatiririka jinsi hivyo hivyo kivinjari kinavyoyawakilisha.
3. Ondoa maoni. Vitalu vya <!-- ... --> vinaondolewa togili ikiwashwa. Maoni ya masharti ya IE (<!--[if IE]> ... <![endif]-->) yanabaki togili ya kuhifadhi-masharti ikiwashwa, kwa sababu wateja wa zamani wa barua pepe bado wanategemea.
4. Finya sifa za boolean. Muundo wenye maneno mengi kama checked="checked", disabled="disabled", na required="required" hupunguzwa hadi jina la sifa wazi. Maelezo ya HTML5 huchukulia muundo wazi kama sawa kwa kimaandishi, kwa hivyo DOM iliyowakilishwa haibadiliki.
5. Ripoti tofauti za baiti. Maandishi ya awali na yaliyokandamizwa yanapimwa na new TextEncoder().encode(...).byteLength, idadi sawa ya baiti za UTF-8 ambazo CDN au seva ya HTTP inaona kwenye waya. Ukanda wa takwimu unaonyesha ukubwa wa awali, ukubwa uliyokandamizwa, baiti zilizookolewa, na asilimia iliyookolewa.

Kwa nini kukandamiza HTML

• Upakiaji wa haraka zaidi wa kurasa. HTML ndogo inafika kwenye kivinjari mapema zaidi na mchambua hukamilika mapema zaidi. Kwenye mitandao ya simu uokoaji wa baiti unatafsiriwa moja kwa moja kwenye First Contentful Paint ya haraka zaidi na alama bora ya utendaji wa Lighthouse.
• Bili ndogo za utiririshaji wa CDN. CloudFront, Cloudflare, na Fastly hutozea kwa gigabyte ya kutiririka. Kupunguza asilimia 20 ya HTML kwenye maoni mamilioni ya kila mwezi kunachangia kwenye uokoaji wa kweli kwenye ankara, kabla optimesi yoyote ya picha au hati haijafika.
• Tofauti za ombi la kuvuta safi zaidi. HTML tuli iliyojengwa kabla iliyojitolea kwenye hifadhi inakuwa na kelele kiolezo chochote kinachibadilishwa kinaflowing upya kupachika. HTML iliyokandamizwa katika folda ya dist huzalisha tofauti za PR zenye msongamano zaidi zinazozingatia mabadiliko ya kweli ya maudhui badala ya kelele za nafasi.
• Mwandiko mdogo na vipande. Violezo vya barua pepe, vipande vya widget vya wahusika wengine, na HTML iliyohifadhiwa ndani ya JSON au configs za YAML vyote hufaidika na kupunguzwa kwa baiti hiyo hiyo. Mwandiko uliokandamizwa huweka barua pepe za biashara chini ya vikomo vya ukubwa vya ESP na hupunguza vifurushi vya widget.

Matumizi ya kawaida

Ukandamizaji wa HTML huonekana mwishoni mwa karibu kila pipeline ya kujenga ya tovuti tuli au JAMstack, pamoja na muktadha chache wa wakati wa uendeshaji ambapo baiti zinazingatiwa zaidi kuliko usomekaji wa chanzo.

• Hatua za kujenga za tovuti tuli: Eleventy, Hugo, Astro, na ujenzi wa uzalishaji wa Next.js hupitisha HTML kupitia kikandamizaji kabla ya kuandika kwenye folda ya dist ili vifurushi vilivyowekwa viwe vidogo kuliko chanzo.
• Barua pepe za biashara: ESP (SendGrid, Postmark, Mailgun) hupunguza ukubwa wa mwili wa HTML na upanuzi wa CSS-ya-ndani huongeza haraka. Kukandamiza mwili kabla ya kutuma huweka ujumbe chini ya kikomo.
• Widget zilizojumuishwa: widget za wahusika wengine na vipande vya mazungumzo vinavyotumwa kama HTML ya ndani hufaidika na kila baiti iliyokatwa kwa sababu ukurasa mzingati lazima uzipakue kwa kila ziara.

Mfano uliofanyiwa kazi

Bandika kipande cha fomu chenye maneno mengi cha baiti 500 chenye upachikaji wa nafasi mbili, mapumziko matatu ya mstari kati ya safu, block ya maoni ya HTML juu, na <input type="checkbox" checked="checked" />. Kwa kila chaguo lililowashwa, matokeo yanafinywa hadi karibu na baiti 300 — uokoaji wa asilimia 40 takriban — huku mti wa DOM uliowakilishwa ukibaki sawa na chanzo kwa suala la baiti.

Je, ukandamizaji utavunja HTML yangu?

Hapana, unapotumia togili za chaguomsingi. Kikandamizaji huhifadhi maudhui ya lebo za <pre>, <textarea>, <script>, na <style> kama zilivyo, huacha maoni ya masharti ya IE yakiwa salama togili hiyo ikiwashwa, na hufinya nafasi tu ambayo mchambua wa HTML5 tayari huainisha kama isiyo na umuhimu. Mti wa DOM uliowakilishwa una baiti sawa na chanzo. Togili za mkali (ondoa-sifa-tupu) zinaweza kubadilisha tabia kwa vipande vinavyotumia kwa makusudi value="" au alt="", kwa hivyo kagua matokeo ukizigeuza.

Je, hii inakandamiza CSS na JS za ndani?

Hapana katika zana hii. Miili ya ndani ya <style> na <script> imehifadhiwa kama ilivyo ili kikandamizaji kisivunje kanuni ya CSS au sentensi ya JS kwa kufinya nafasi ndani ya maneno ya kamba au regex. Kwa ukandamizaji maalum wa CSS tumia Kikandamizaji CSS; kwa JS tumia Kikandamizaji JS. Kikandamizaji HTML kinazingatia alama yenyewe.

Ninaweza kuokoa kiasi gani?

Uokoaji wa kawaida kwenye HTML iliyoandikwa kwa mkono huanzia asilimia 10 hadi 30, kulingana na kiasi chanzo kinavyotumia upachikaji, mistari tupu, na muundo wa sifa wenye maneno mengi. HTML tuli iliyojengwa kabla kutoka mifumo kama Next.js mara nyingi huokoa asilimia 15 hadi 25 kwa sababu mfumo tayari unafanya optimesi fulani lakini huacha nafasi inayosomeka na binadamu mahali pake. Violezo vyenye maoni mengi na HTML ya mtindo wa barua pepe yenye kutanganyika kwa kina vinaweza kufikia asilimia 40 au zaidi.

Je, maudhui ya pre yanahifadhiwa?

Ndio. Kikandamizaji kinatokenize wazi vitalu vya <pre>, <textarea>, <script>, na <style> kama maeneo ya kuhifadhi-kama-ilivyo na kunakili maudhui yake baiti kwa baiti kwenye matokeo. Nafasi, mapumziko ya mstari, na upachikaji ndani ya lebo hizo vinabaki bila kuguswa, kwa hivyo mifano ya msimbo na sanaa ya ASCII inawakilishwa hasa sawa baada ya ukandamizaji.

Ukandamizaji wa HTML wa kivinjari huhifadhi pipeline yako ya kujenga kuwa rahisi na alama zako kuwa ndogo. Bandika HTML yoyote hapo juu, hariri togili za chaguo, na nakili au pakua matokeo yaliyokandamizwa — hakuna kupakia, hakuna akaunti, hakuna maktaba ya mtoa huduma.