Rage CSS _

Yadda rage CSS ke aiki

Mai ragi yana tafiya cikin stylesheet dinka tare da tokeniser mai sani da yanayi wanda ke bambanta yankuna masu kariya (string literals da ƙimomin url()) daga sarari mai yiwuwar gyara inda haɗawa da cire ya yi aminci.

1. Kare strings da URLs. Kafin wani sauyi, tokeniser yana gano kowane string da aka naɗa ("…" ko '…') da kowane jayayye na url(…) kuma yana ajiye su kamar yadda suke. Wucewar da ke biye ba sa taɓa waɗannan bytes, don haka URL na background-image mai sarari ko kadara na content mai alamomi an kiyaye su daidai.
2. Cire bayanai. Ana cire blocks na /* … */ lokacin da maɓallin ya kunna. Idan maɓallin bayanan lasisi ya kuma kunna, blocks na /*! … */ sun tsira don taken lasisin MIT, Apache, da BSD su kasance a cikin fitowar kamar yadda waɗancan lasisosin ke buƙata.
3. Haɗa sarari. Kowane gudu na sarari, tabs, da layukan saita suna haɗawa zuwa sarari guda ɗaya, sannan ana cire sarari a kusa da haruffan tsari na CSS {, }, ;, :, da , gaba ɗaya. Lissafin zaɓi da ƙima suna sake gudu iri ɗaya da yadda mai binciken mai bincike ke karanta su.
4. Inganta ƙimomi. Wucewar zaɓi suna canza haruffan ƙanana na lambobin launi na hex, haɗa channels na hex na lambobi 6 masu haɗuwa zuwa gajeriyar haruffa 3 (#aabbcc → #abc), da cire raka'o'in girma daga ƙimomin sifili (0px → 0). Wucewa ta raka'o'in sifili ta tsallake ƙimomi a cikin kiran transform() inda raka'a ke da mahimmanci.
5. Rahoto na bytes da aka adana. Ana auna rubutun asali da na da aka rage tare da new TextEncoder().encode(…).byteLength, adadin bytes na UTF-8 iri ɗaya da CDN ko uwar garken HTTP ke gani a layi. Tukunyar ma'auni tana nuna girman asali, girman da aka rage, bytes da aka adana, da kashi na adana.

Me ya sa rage CSS

• Loda mai toshe render mai sauri. Masu bincike ba za su zana pixel ɗaya ba har sai sun gama nazarin CSS. Yanki na kashi 30 cikin ɗari na stylesheet yana gajarce wannan block, yana ɗaga First Contentful Paint, kuma yana bayyana kai tsaye a cikin maki na Lighthouse Performance ɗinka.
• Lissafin egress na CDN ƙasa. CloudFront, Cloudflare, da Fastly duka suna cajin kowane gigabyte na egress. Yanki na kashi 20 cikin ɗari akan stylesheet da ke jigilar kowane kallon shafi ya zama layi na ainihi a lissafin da zarar zirga-zirgar watanni ta wuce miliyoyi ƙalilan.
• Saka ƙasa da CSS na imel. Samfuran imel na kasuwanci suna saka CSS ɗinsu don tsira daga al'ajabi na rendering na Outlook da Gmail, kuma kowane bytes ƙarin suna kusantar ku zuwa iyakar clip na Gmail ta 102 KB. Rage kafin saka yana ajiye saƙon ƙarƙashin iyaka.
• Babu dogaro ga kayan aiki na gina. Ayyukan abubuwa ɗaya, repositories na gado ba tare da layin gina ba, da muhallin air-gapped ba sa koyaushe suna da damar Node toolchain. Kuna iya gudanar da aikin anan ba tare da girka PostCSS, cssnano, ko wani abu ba.

Amfani na yau da kullun

Rage CSS yana bayyana a ƙarshen kusan kowane layin gina na gaba da kuma a yanayi na aiki da yawa inda adadin bytes ke da mahimmanci.

• Layin gina na samarwa: Webpack, Vite, Rollup, da Parcel duka suna aika matakin rage CSS a cikin yanayin samarwa na su na tsoho. Gudanar da aikin anan kafin commit yana ba ku tabbatar da fitowar ba tare da kunna ginin cikakke ba.
• Saka CSS a cikin tags na <style>: frameworks da ake auna na uwar garke waɗanda ke saka CSS mai mahimmanci a cikin takaddar HTML suna amfana daga bytes ɗaya adana kamar stylesheets masu tsaye, kuma ƙarancin CSS da aka saka yana rage Lokacin na First Byte.
• Imel na kasuwanci da marketing: HTML na imel yana saka duk CSS, don haka kowane kilobyte a cikin stylesheet yana ƙara girman saƙon gaba ɗaya. Rage kafin saka yana ajiye saƙonni ƙasa da iyakar girman ESP.

Misali da aka yi aiki

Lallaba ruleset na 1 KB mai indent na sarari biyu, layukan komai a tsakanin zaɓuɓɓuka, block na bayanan lasisi a saman, da launi na hex masu tsawo kamar #FFFFFF da margins masu karin kaso kamar margin: 0px. Da duk zaɓuɓɓukan an kunna, fitowar ta haɗa zuwa kusan bytes 600 — adana kashi 40 cikin ɗari — yayin da shafin da aka auna ya yi kama da tushe.

Shin rage yana canza halayen CSS na?

A'a, akan maɓallunan tsoho. Mai ragi yana cire bytes kawai waɗanda mai bincike na CSS ke riga ya jefa — sarari, bayanai, semicolon na ƙarshe zaɓi — kuma yana tsallake a cikin transform() inda raka'a ke da mahimmanci. An kiyaye kowane zaɓi, kadara, da ƙima.

Shin yana aiki da SCSS ko LESS?

Bayan kun sarrafa su zuwa CSS na yau da kullun kawai. Syntax na SCSS da LESS (masu canji, saka cikin juna, mixins, zaɓuɓɓukan iyaye na &) ba CSS ta inganci ba kuma mai ragi zai lalata su. Sarrafa tushen preprocessor ɗinku da farko, sannan lallaba fitowar da aka sarrafa anan.

Me ya sa an cire bayanai na lasisina?

"Cire bayanai" yana a kan tsoho kuma yana share kowane block na /* … */. Kunna "Kiyaye bayanai na lasisin /*!" don ajiye blocks da ke farawa da /*!. MIT, Apache, da BSD duka suna buƙatar taken haƙƙin mallaka ya tashi tare da CSS da aka rarraba.

Nawa zan iya adanawa?

CSS da aka rubuta da hannu galibi yana faɗuwa da kashi 15 zuwa 35 cikin ɗari. Fayiloli masu yawan bayanai ko indent mai zurfi tare da haruffan launi da yawa na iya isa kashi 40 cikin ɗari. Fitowar da aka sarrafa daga Sass ko CSS-in-JS galibi an riga an rage wani bangare kuma tana adana kasa — galibi kashi 5 zuwa 15 cikin ɗari.

Gudanar da rage CSS a shafin mai binciken kuma ka tsallake Node toolchain gaba ɗaya. Lallaba stylesheet a sama, kunna zaɓuɓɓuka don dace da yadda yake tsauri da kake so aikin ya kasance, sannan kwafi fitowar ko sauke ta a matsayin .min.css. Babu loda, babu asusun, babu ɗakin laburare na diloli.