CSS-ni kichraytirish _

CSS kichraytirish qanday ishlaydi

Kichraytiruvchi uslub jadvalingizni himoyalangan hududlarni (satr literallari va url() qiymatlari) qisqartirish xavfsiz boʻlgan tahrirlanadigan boʻsh joydan farqlaydi.

1. Satrlar va URL-larni himoya qilish. Boshqa oʻzgartirishlardan oldin tokenizator har bir qoʻshtirnoqli satrni («…» yoki ‘…’) va har bir url(…) argumentni topib ularni soʻzma-soʻz saqlaydi. Keyingi oʻtishlar bu baytlarga hech qachon tegmaydi.
2. Izohlarni olib tashlash. /* … */ bloklari tugma yoqilganda olib tashlanadi. Litsenziya-izohi tugmasi ham yoqilganda /*! … */ bloklari saqlanib qoladi.
3. Boʻsh joylarni qisqartirish. Boʻshliqlar, tabulator va satr boshlarining har bir ketma-ketligi bitta boʻshliqqa qisqaradi, keyin CSS tuzilmaviy belgilari {, }, ;, : va , atrofidagi boʻsh joy butunlay olib tashlanadi.
4. Qiymatlarni optimallashtirish. Ixtiyoriy oʻtishlar hex rang kodlarini kichik harfga oʻtkazadi, 6-raqamli hex juft kanallarni 3-raqamli qisqa shaklga qisqartiradi (#aabbcc → #abc) va nol qiymatlardan birlik oʻlchovlarini olib tashlaydi (0px → 0).
5. Bayt tejovini hisoblab chiqarish. Ham asl, ham kichraytirilgan matn new TextEncoder().encode(…).byteLength bilan oʻlchanadi — bu CDN yoki HTTP server kabeldagi koʻrinadigan UTF-8 bayt sonidir. Metrik tasma asl oʻlchamni, kichraytirilgan oʻlchamni, tejilgan baytlarni va tejilgan foizni koʻrsatadi.

Nima uchun CSS-ni kichraytirish kerak

• Tezroq render-blokirovchi yuklash. Brauzerlar CSS-ni tahlil qilishni tugatmaguncha bitta piksel ham chizmaydi. 30 foizlik uslub jadvalini qisqartirish shu blokni qisqartiradi, First Contentful Paint-ni oshiradi va Lighthouse unumdorlik baliga bevosita taʻsir qiladi.
• Pastroq CDN egress hisob-kitoblari. CloudFront, Cloudflare va Fastly chiqish uchun gigabayt boʻyicha hisob qiladi. Har sahifa tashrifi yuborilgan uslub jadvalidan 20 foiz kesish oylik millionlab tashrif buyuruvchilardan keyin hisob-fakturada real tejaviga aylanadi.
• Kichikroq oʻrnatmalar va email CSS. Tranzaksion email shablonlari CSS-ni Outlook va Gmail renderlash xususiyatlari uchun inline qiladi va har bir qoʻshimcha bayt Gmail-ning 102 KB qirqish chegarasiga yaqinlashtiradi. Inline qilishdan oldin kichraytirish xabarni chegaradan pastda ushlab turadi.
• Qurish vositasiga bogʻliqlik yoʻq. Tez bir martalik ishlar, qurish quvuri boʻlmagan eski repolar va havosiz muhitlar har doim ham Node zanjirini oʻrnatishga imkon bermaydi. Bu bosqichni PostCSS, cssnano yoki boshqa hech narsani oʻrnatmasdan shu yerda bajarishingiz mumkin.

Keng tarqalgan qoʻllanishlar

CSS kichraytirish deyarli har bir front-end qurish quvurining oxirida va baytlar muhim boʻlgan bir qancha ish vaqti kontekstlarida paydo boʻladi.

• Ishlab chiqarish qurish quvurlari: Webpack, Vite, Rollup va Parcel ishlab chiqarish rejimida CSS kichraytirish bosqichini oʻz ichiga oladi. Shu yerda topshirishdan oldin oʻtkazish toʻliq qurishni ishga tushirmasdan natijani tekshirish imkonini beradi.
• <style> teglariga CSS oʻrnatish: HTML hujjatiga kritik CSS-ni inline qiladigan server tomonidan renderlangan freymvorklar mustaqil uslub jadvallaridek xuddi shunday bayt tejovidan foyda koʻradi va kichikroq inline CSS Time to First Byte-ni qisqartiradi.
• Tranzaksion va marketing email: email HTML barcha CSS-ni inline qiladi, shuning uchun uslub jadvalidagi har bir kilobayt umumiy xabar oʻlchamiga qoʻshiladi. Inline qilishdan oldin kichraytirish xabarlarni ESP oʻlcham chegaralaridan pastda ushlab turadi.

Ishlangan misol

Ikki-boʻshliqli chekinish, selectorlar orasida boʻsh satrlar, tepada litsenziya izohi bloki va #FFFFFF kabi soʻzma-soʻz hex ranglar hamda margin: 0px kabi nol toʻldirilgan chegaralar boʻlgan 1 KB qoidalar toʻplamini joylashtiring. Har bir parametr yoqilganda natija taxminan 600 baytga — 40 foizlik tejov — qisqaradi.

Kichraytirish CSS xatti-harakatimni oʻzgartiradimi?

Yoʻq, standart parametrlar bilan. Kichraytiruvchi faqat CSS tahlilchisi allaqachon tashlab ketadigan baytlarni olib tashlaydi — boʻsh joy, izohlar, ixtiyoriy oxirgi nuqta-vergul — va birliklar muhim boʻlgan transform() ichini oʻtkazib yuboradi. Har bir selektor, xususiyat va qiymat saqlanadi.

Bu SCSS yoki LESS bilan ishlaydimi?

Faqat ularni oddiy CSS-ga kompilyatsiya qilgandan keyin. SCSS va LESS sintaksisi (oʻzgaruvchilar, joylashish, miksinlar, & ota-selektor) toʻgʻri CSS emas va kichraytiruvchi uni buzib qoʻyadi. Avval preprocessor manbangizni kompilyatsiya qiling, soʻng kompilyatsiya qilingan natijani bu yerga joylashtiring.

Nima uchun litsenziya izohlarim olib tashlanmoqda?

"Izohlarni olib tashlash" standart holatda yoqilgan va har bir /* … */ blokni tozalaydi. /*! bilan boshlanadigan bloklarni saqlash uchun "/*! litsenziya izohlarini saqlash" ni yoqing. MIT, Apache va BSD hammasi qayta tarqatilgan CSS bilan mualliflik huquqi sarlavhasini yuborishni talab qiladi.

Qancha tejash mumkin?

Qoʻlda yozilgan CSS odatda 15 dan 35 foizga tushadi. Koʻp izohli yoki chuqur chekintirilgan rang literallari koʻp fayllar 40 foizga yetishi mumkin. Sass yoki CSS-in-JS-dan kompilyatsiya qilingan natija koʻpincha qisman kichraytirilgan boʻladi va kamroq tejaydi — odatda 5 dan 15 foizgacha.

Brauzer yorligʻida CSS kichraytirishni bajarish Node zanjirini butunlay chetlab oʻtadi. Uslub jadvalini yuqoriga joylashtiring, opsiyalarni sozlang, keyin natijani nusxalang yoki .min.css sifatida yuklab oling. Yuklash yoʻq, hisob yoʻq, vendor kutubxonasi yoʻq.