Kandamiza CSS _

Jinsi ukandamizaji wa CSS unavyofanya kazi

Kikandamizaji hupitia laha yako ya mtindo kwa tokenizer inayofahamu hali inayotofautisha maeneo yaliyolindwa (maandishi ya kamba na thamani za url()) kutoka nafasi inayoweza kuhaririwa ambapo kufinya na kuondoa ni salama.

1. Linda kamba na URL. Kabla ya mabadiliko mengine yoyote, tokenizer hutambua kila kamba iliyonukuliwa (“…” au ‘…’) na kila hoja ya url(…) na kuzihifadhi kama zilivyo. Mapitio yanayofuata hayagusi baiti hizi kamwe, kwa hivyo URL ya picha ya mandharinyuma yenye nafasi au kipengele cha maudhui chenye alama za uandishi kinahifadhiwa hasa.
2. Ondoa maoni. Vizuizi vya /* … */ vinaondolewa togili ikiwashwa. Ikiwa togili ya maoni ya leseni imewashwa pia, vizuizi vya /*! … */ vinabaki ili vichwa vya leseni ya MIT, Apache, na BSD vibaki kwenye matokeo kama vinavyohitajika na leseni hizo.
3. Finya nafasi. Kila mfululizo wa nafasi, vichupo, na mstari mpya unafinywa kwenye nafasi moja, kisha nafasi karibu na herufi za muundo wa CSS {, }, ;, :, na , huondolewa kabisa. Orodha za mteuzi na thamani zinatiririka tena jinsi parser ya kivinjari inavyozisoma.
4. Boresha thamani. Mapitio ya hiari hubadilisha msimbo wa rangi wa hex kuwa herufi ndogo, kufinya jozi za hex za tarakimu 6 kwenye mkato wa tarakimu 3 (#aabbcc → #abc), na kuondoa vitengo vya kipimo kutoka thamani sifuri (0px → 0). Kupita kwa vitengo sifuri kunaruka thamani ndani ya wito wa transform() ambapo vitengo ni muhimu.
5. Ripoti uokoaji wa 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 ya uokoaji.

Kwa nini kukandamiza CSS

• Upakiaji wa kuzuia uwakilishaji wa haraka zaidi. Vivinjari havitachora pikseli moja hadi vimekamilisha kuchambua CSS. Kupunguza asilimia 30 ya laha ya mtindo hufupishe kizuizi hicho, huboresha First Contentful Paint, na kuonekana moja kwa moja kwenye alama yako ya Lighthouse Performance.
• Bili ndogo za utiririshaji wa CDN. CloudFront, Cloudflare, na Fastly zote hutozea kwa gigabyte ya kutiririka. Kupunguza asilimia 20 ya laha ya mtindo inayotumwa kwa kila ukurasa unaoangaliwa inakuwa mstari wa kweli kwenye ankara mara trafiki ya kila mwezi inapozidi maoni machache ya mamilioni.
• Mwandiko mdogo na CSS ya barua pepe. Violezo vya barua pepe za biashara huingiza CSS yao ndani kustahimili ugeni wa uwakilishaji wa Outlook na Gmail, na kila baiti ya ziada hukupelekea karibu na kikomo cha kukata cha Gmail cha KB 102. Kukandamiza kabla ya kuingiza huweka ujumbe chini ya kikomo.
• Hakuna tegemeo la zana ya kujenga. Kazi za kipekee za haraka, hifadhi za zamani zisizo na pipeline ya kujenga, na mazingira yaliyozingirwa hayahitaji mara nyingi mfumo wa Node. Unaweza kuendesha mapitio hapa bila kusakinisha PostCSS, cssnano, au kitu kingine chochote.

Matumizi ya kawaida

Ukandamizaji wa CSS huonekana mwishoni mwa karibu kila pipeline ya kujenga ya awali na katika muktadha kadhaa wa wakati wa uendeshaji ambapo idadi ya baiti ina umuhimu.

• Pipeline za kujenga za uzalishaji: Webpack, Vite, Rollup, na Parcel zote zinashipa hatua ya ukandamizaji wa CSS katika chaguomsingi zao za hali ya uzalishaji. Kuendesha mapitio hapa kabla ya kujitolea hukuruhusu kuthibitisha matokeo bila kusababisha ujenzi kamili.
• Kuingiza CSS kwenye vitambulisho vya <style>: mifumo ya seva-iliyowakilishwa inayoingiza CSS muhimu kwenye hati ya HTML hufaidika na uokoaji sawa wa baiti kama laha za mtindo za kujitegemea, na CSS ndogo ya ndani hupunguza Muda hadi Baiti ya Kwanza.
• Barua pepe za biashara na uuzaji: HTML ya barua pepe huingiza CSS yote, kwa hivyo kila kilobyte kwenye laha ya mtindo inaongezwa kwenye jumla ya ukubwa wa ujumbe. Kukandamiza kabla ya kuingiza huweka ujumbe vizuri chini ya vikomo vya ukubwa vya ESP.

Mfano uliofanyiwa kazi

Bandika seti ya kanuni ya KB 1 yenye upachikaji wa nafasi mbili, mistari tupu kati ya wateuzi, block ya maoni ya leseni juu, na rangi za hex zenye maneno mengi kama #FFFFFF na pembezoni zilizopachikwa sifuri kama margin: 0px. Kwa kila chaguo lililowashwa, matokeo yanafinywa hadi karibu na baiti 600 — uokoaji wa asilimia 40 — huku ukurasa uliowakilishwa ukionekana sawa na chanzo kwa suala la baiti.

Je, ukandamizaji hubadilisha tabia yangu ya CSS?

Hapana, kwenye togili za chaguomsingi. Kikandamizaji huondoa tu baiti ambazo parser ya CSS tayari hutupilia mbali — nafasi, maoni, alama ya mwisho ya hiari ya semicolon — na kuruka ndani ya transform() ambapo vitengo ni muhimu. Kila mteuzi, sifa, na thamani imehifadhiwa.

Je, inafanya kazi na SCSS au LESS?

Baada ya kukikusanya kwenye CSS wazi tu. Muundo wa SCSS na LESS (vigeuzi, kutagwa ndani, mchanganyiko, wateuzi wa mzazi wa &) si CSS halali na kikandamizaji kitakidhuru. Kusanya chanzo chako cha kiprocessor kwanza, kisha bandika matokeo yaliyokusanywa hapa.

Kwa nini maoni yangu ya leseni yanaondolewa?

"Ondoa maoni" imewashwa kwa chaguomsingi na huondoa kila block ya /* … */. Wezesha "Hifadhi maoni ya leseni ya /*!" kuweka vizuizi vinavyoanza na /*!. MIT, Apache, na BSD zote zinahitaji kichwa cha hakimiliki kutumwa na CSS iliyosambazwa tena.

Ninaweza kuokoa kiasi gani?

CSS iliyoandikwa kwa mkono kwa kawaida hupungua asilimia 15 hadi 35. Faili zilizo na maoni mengi au upachikaji mrefu wenye maandishi mengi ya rangi zinaweza kufikia asilimia 40. Matokeo yaliyokusanywa kutoka Sass au CSS-in-JS mara nyingi yamekandamizwa kiasi tayari na huokoa kidogo — kwa kawaida asilimia 5 hadi 15.

Endesha ukandamizaji wa CSS kwenye kichupo cha kivinjari na utaruka mfumo wa Node kabisa. Bandika laha ya mtindo hapo juu, geuza chaguo zilingane na ukali unaotaka mapitio yawe, kisha nakili matokeo au uyapakue kama .min.css. Hakuna kupakia, hakuna akaunti, hakuna maktaba ya mtoa huduma.