CSS Tömörítése _

Hogyan működik a CSS tömörítés

A tömörítő egy állapotérzékeny tokenizálóval járja be a stíluslapodat, amely megkülönbözteti a védett régiókat (karakterlánc literálok és url() értékek) a szerkeszthető szóközöktől.

1. Karakterláncok és URL-ek védelme. Minden átalakítás előtt a tokenizáló azonosít minden idézőjeles karakterláncot és url() argumentumot, és szó szerint eltárolja azokat.
2. Megjegyzések eltávolítása. A /* … */ blokkok eltávolításra kerülnek, ha a kapcsoló be van kapcsolva. Ha a licenc-megjegyzés kapcsoló is be van kapcsolva, a /*! … */ blokkok megmaradnak.
3. Szóközök összevonása. Minden szóköz-, tab- és újsor-sorozat egyetlen szóközzé tömörül, majd a szóközök a CSS szerkezeti karakterei körül teljesen eltávolításra kerülnek.
4. Értékek optimalizálása. Opcionális lépések: kisbetűs hex színkódok, összevont 6 számjegyű hex csatornák 3 számjegyű rövidítésre, és mértékegységek eltávolítása nulla értékekből.
5. Bájt-megtakarítás jelentése. Mind az eredeti, mind a tömörített szöveg mérése a new TextEncoder().encode(…).byteLength segítségével történik.

Miért érdemes CSS-t tömöríteni

• Gyorsabb renderelés-blokkoló betöltés. A böngészők addig nem festenek egyetlen pixelt sem, amíg be nem fejezték a CSS elemzését. Egy 30%-kal kisebb stíluslap lerövidíti ezt a blokkot.
• Alacsonyabb CDN kimenő forgalom számlák. A CloudFront, Cloudflare és Fastly gigabájtonként számláz a kimenő forgalomért. 20% megtakarítás a stíluslapon valós tétel a számlán.
• Kisebb beágyazások és e-mail CSS. A tranzakciós e-mail sablonok inline CSS-t használnak, és minden extra bájt közelebb visz a Gmail 102 KB-os korlátjához.
• Nincs build-eszköz függőség. Gyors egyszeri munkákhoz, öröklött repo-khoz és légréses környezetekhez nem mindig áll rendelkezésre Node eszközlánc.

Gyakori alkalmazások

A CSS tömörítés szinte minden front-end build pipeline végén megjelenik.

• Éles build pipeline-ok: Webpack, Vite, Rollup és Parcel mind tartalmaznak CSS tömörítési lépést.
• CSS beágyazása <style> tag-ekbe: szerver által renderelt keretrendszerek kritikus CSS-t inlineolnak a HTML dokumentumba.
• Tranzakciós és marketing e-mailek: az e-mail HTML minden CSS-t inline-ol, így minden kilobájt számít.

Egy kidolgozott példa

Illessz be egy 1 KB-os szabálykészletet kétszóközös behúzással, üres sorokkal a szelektorok között, egy licenc megjegyzés blokkal a tetején és részletes hex színekkel. Minden opció bekapcsolásával a kimenet kb. 600 bájtra csökken.

A tömörítés megváltoztatja a CSS viselkedését?

Nem, az alapértelmezett kapcsolókkal. A tömörítő csak azokat a bájtokat távolítja el, amelyeket a CSS-elemző amúgy is eldob.

Működik SCSS-sel vagy LESS-sel?

Csak miután lefordítottad őket sima CSS-re. Az SCSS és LESS szintaxis nem érvényes CSS.

Miért távolítja el a licenc megjegyzéseimet?

A "Megjegyzések eltávolítása" alapértelmezés szerint be van kapcsolva. Engedélyezd a "/*! licenc megjegyzések megőrzése" opciót.

Mennyit spórolhatok?

A kézzel írt CSS általában 15-35%-ot csökken. A sokat kommentált vagy mélyen behúzott fájlok akár 40%-ot is elérhetnek.

Futtass CSS tömörítést egy böngésző lapon, és teljesen kihagyhatod a Node eszközláncot.