Minifikovat CSS _

Jak funguje minifikace CSS

Minifikátor prochází váš stylopis pomocí tokenizéru stavově orientovaného, který rozlišuje chráněné oblasti (řetězcové literály a hodnoty url()) od upravitelných bílých míst, kde je sbalování a odstraňování bezpečné.

1. Ochrana řetězců a URL. Před jakoukoli jinou transformací tokenizér identifikuje každý uvozovkovaný řetězec ("…" nebo '…') a každý argument url(…) a uloží je doslovně. Následné průchody se těchto bajtů nikdy nedotknou, takže URL obrázku na pozadí s mezerami nebo vlastnost content s interpunkcí je zachována přesně.
2. Odstranění komentářů. /* … */ bloky jsou odstraněny, když je přepínač zapnutý. Pokud je zapnutý také přepínač licenčních komentářů, bloky /*! … */ přežijí, takže hlavičky licencí MIT, Apache a BSD zůstanou ve výstupu, jak tyto licence vyžadují.
3. Sbalení bílého místa. Každý běh mezer, tabulátorů a nových řádků se sbalí na jednu mezeru, pak je bílé místo kolem CSS strukturních znaků {, }, ;, : a , zcela odstraněno. Seznamy selektorů a hodnot se přetékají stejně, jak je čte parser prohlížeče.
4. Optimalizace hodnot. Volitelné průchody převádějí hex barvy na malá písmena, sbalují párové 6místné hex kanály na 3místné zkratky (#aabbcc → #abc) a odstraňují jednotky rozměrů z nulových hodnot (0px → 0). Průchod nulových jednotek přeskočí hodnoty uvnitř volání transform(), kde jsou jednotky významné.
5. Hlášení úspor bajtů. Původní i minifikovaný text jsou měřeny pomocí new TextEncoder().encode(…).byteLength, stejného UTF-8 počtu bajtů, který CDN nebo HTTP server vidí na lince. Metrický pruh ukazuje původní velikost, minifikovanou velikost, ušetřené bajty a procentuální úsporu.

Proč minifikovat CSS

• Rychlejší načítání blokující vykreslení. Prohlížeče nevykreslí jediný pixel, dokud nedokončí parsování CSS. Třicetiprocentní zkrácení stylopisu zkracuje tento blok, zlepšuje First Contentful Paint a přímo se projevuje ve vašem Lighthouse Performance skóre.
• Nižší účty za CDN. CloudFront, Cloudflare a Fastly účtují za gigabajt přenesených dat. Ořezání 20 procent ze stylopisu, který se dodává na každém zobrazení stránky, se stává reálnou položkou na faktuře, jakmile měsíční provoz překročí několik milionů zobrazení.
• Menší vložená a e-mailová CSS. Transakční e-mailové šablony vkládají své CSS, aby přežily zvláštnosti vykreslování Outlooku a Gmailu, a každý extra bajt vás přibližuje k hranici ořezu Gmailu 102 KB. Minifikace před vložením udržuje zprávu pod limitem.
• Žádná závislost na build nástroji. Rychlé jednorázové úlohy, staré repozitáře bez build pipeline a air-gapped prostředí nemají vždy místo pro Node toolchain. Průchod můžete spustit zde bez instalace PostCSS, cssnano nebo čehokoli jiného.

Běžné aplikace

Minifikace CSS se objevuje na konci téměř každé front-end build pipeline a v několika runtime kontextech, kde záleží na počtu bajtů.

• Produkční build pipeline: Webpack, Vite, Rollup a Parcel mají minifikaci CSS jako součást výchozího nastavení produkčního režimu. Spuštění průchodu zde před commitem umožňuje ověřit výstup bez spouštění plného buildu.
• Vkládání CSS do <style> tagů: serverově renderované frameworky, které vkládají kritické CSS do HTML dokumentu, těží ze stejné úspory bajtů jako samostatné stylopisy a menší inline CSS zkracuje Time to First Byte.
• Transakční a marketingové e-maily: e-mailové HTML vkládá všechna CSS, takže každý kilobajt ve stylopisu přidává k celkové velikosti zprávy. Minifikace před vložením udržuje zprávy hluboko pod limity velikosti ESP.

Příklad

Vložte 1 KB sadu pravidel s dvoumezerovým odsazením, prázdnými řádky mezi selektory, licenčním komentářem nahoře a nadbytečnými hex barvami jako #FFFFFF a nulově vyplněnými okraji jako margin: 0px. Se všemi zapnutými přepínači se výstup smrskne na přibližně 600 bajtů — 40% úspora — zatímco vykreslená stránka vypadá bajtově stejně jako zdroj.

Změní minifikace chování mého CSS?

Ne, při výchozích přepínačích. Minifikátor odstraňuje pouze bajty, které CSS parser již zahazuje — bílé místo, komentáře, volitelný koncový středník — a přeskočí uvnitř transform(), kde jsou jednotky významné. Každý selektor, vlastnost a hodnota je zachována.

Funguje to se SCSS nebo LESS?

Pouze po jejich zkompilování do čistého CSS. SCSS a LESS syntaxe (proměnné, vnořování, mixiny, & rodičovské selektory) není platné CSS a minifikátor by ji poškodil. Nejprve zkompilujte preprocesorový zdroj, pak vložte zkompilovaný výstup sem.

Proč jsou moje licenční komentáře odstraněny?

"Odstranit komentáře" je ve výchozím nastavení zapnuto a maže všechny /* … */ bloky. Povolte "Zachovat /*! licenční komentáře" pro zachování bloků začínajících /*!. MIT, Apache a BSD vyžadují, aby hlavička autorských práv byla dodávána s redistribuovaným CSS.

Kolik mohu ušetřit?

Ručně psané CSS obvykle klesne o 15 až 35 procent. Silně komentované nebo hluboce odsazené soubory s mnoha barevnými literály mohou dosáhnout 40 procent. Zkompilovaný výstup ze Sass nebo CSS-in-JS je často již částečně minifikovaný a šetří méně — typicky 5 až 15 procent.

Spusťte minifikaci CSS v záložce prohlížeče a zcela přeskočíte Node toolchain. Vložte stylopis výše, přepněte možnosti podle toho, jak agresivní chcete průchod mít, pak zkopírujte výstup nebo jej stáhněte jako .min.css. Žádné nahrávání, žádný účet, žádná vendor knihovna.