Minifică CSS _

Cum funcționează minificarea CSS

Minificatorul parcurge stylesheet-ul tău cu un tokenizer conștient de stări care distinge regiunile protejate (literalii de șiruri și valorile url()) de spațiile albe editabile unde colapsarea și eliminarea sunt sigure.

1. Protejează șirurile și URL-urile. Înainte de orice altă transformare, tokenizer-ul identifică fiecare șir citat („…” sau ‘…’) și fiecare argument url(…) și le stochează verbatim. Pașii următori nu ating niciodată acești octeți, astfel încât un URL de background-image cu spații sau o proprietate content cu punctuație este păstrat exact.
2. Elimină comentariile. Blocurile /* … */ sunt eliminate când comutatorul este activat. Dacă comutatorul pentru comentarii de licență este de asemenea activat, blocurile /*! … */ supraviețuiesc, astfel încât anteturile de licență MIT, Apache și BSD rămân în ieșire conform cerințelor acestor licențe.
3. Colapsează spațiile albe. Fiecare succesiune de spații, taburi și linii noi se colapsează la un singur spațiu, apoi spațiile albe din jurul caracterelor structurale CSS {, }, ;, : și , sunt eliminate complet. Listeile de selectoare și valori se rearanjează în același mod în care parserul browserului le citește.
4. Optimizează valorile. Pașii opționali transformă codurile de culoare hex în litere mici, colapsează canalele hex pereche de 6 cifre în prescurtări de 3 cifre (#aabbcc → #abc) și elimină unitățile de dimensiune din valorile zero (0px → 0). Pasul pentru unități zero omite valorile din interiorul apelurilor transform() unde unitățile sunt semnificative.
5. Raportează economiile de octeți. Atât textul original, cât și cel minificat sunt măsurate cu new TextEncoder().encode(…).byteLength, același număr de octeți UTF-8 pe care un CDN sau un server HTTP îl vede pe fir. Banda de metrici arată dimensiunea originală, dimensiunea minificată, octeții salvați și procentajul de economisire.

De ce să minifici CSS

• Încărcare blocantă a randării mai rapidă. Browserele nu pictează niciun pixel până când nu termină de analizat CSS-ul. O reducere de 30 la sută a stylesheet-ului scurtează acel bloc, îmbunătățește First Contentful Paint și se reflectă direct în scorul tău Lighthouse Performance.
• Facturi mai mici pentru egress CDN. CloudFront, Cloudflare și Fastly taxează toate per gigaoctet de egress. Reducerea cu 20 la sută a unui stylesheet care este livrat pe fiecare vizualizare de pagină devine o linie reală pe factură odată ce traficul lunar depășește câteva milioane de vizualizări.
• Încorporări mai mici și CSS pentru e-mail. Șabloanele de e-mail tranzacțional încorporează CSS-ul inline pentru a supraviețui capriciilor de randare Outlook și Gmail, iar fiecare octet suplimentar te apropie de pragul de 102 KB de tăiere al Gmail. Minificarea înainte de încorporare menține mesajul sub plafon.
• Fără dependență de unelte de build. Sarcini unice rapide, depozite moștenite fără pipeline de build și medii aerizate nu au întotdeauna loc pentru un toolchain Node. Poți executa pasul aici fără a instala PostCSS, cssnano sau orice altceva.

Aplicații comune

Minificarea CSS apare la sfârșitul aproape fiecărui pipeline de build front-end și în mai multe contexte de runtime unde numărul de octeți contează.

• Pipeline-uri de build de producție: Webpack, Vite, Rollup și Parcel includ toate un pas de minificare CSS în modul de producție implicit. Efectuarea pasului aici înainte de a comite îți permite să validezi ieșirea fără a declanșa un build complet.
• Încorporarea CSS în taguri <style>: framework-urile randate pe server care încorporează CSS critic în documentul HTML beneficiază de aceeași economie de octeți ca stylesheet-urile independente, iar CSS-ul inline mai mic reduce Time to First Byte.
• E-mail tranzacțional și de marketing: HTML-ul de e-mail încorporează tot CSS-ul inline, astfel încât fiecare kilooctet din stylesheet se adaugă la dimensiunea totală a mesajului. Minificarea înainte de încorporare menține mesajele bine sub limitele de dimensiune ale ESP.

Un exemplu practic

Lipește un set de reguli de 1 KB cu indentare de două spații, linii libere între selectoare, un bloc de comentariu de licență în partea de sus și culori hex verbose precum #FFFFFF și margini cu zero-umplere precum margin: 0px. Cu fiecare opțiune activată, ieșirea se colapsează la aproximativ 600 de octeți — o economisire de 40 la sută — în timp ce pagina randată arată identic cu sursa la nivel de octeți.

Schimbă minificarea comportamentul CSS-ului meu?

Nu, cu comutatoarele implicite. Minificatorul elimină doar octeții pe care parserul CSS oricum îi ignoră — spații albe, comentarii, punctul și virgulă final opțional — și omite interiorul funcției transform() unde unitățile sunt semnificative. Fiecare selector, proprietate și valoare este păstrată.

Funcționează cu SCSS sau LESS?

Doar după ce le compilezi în CSS simplu. Sintaxa SCSS și LESS (variabile, imbricare, mixin-uri, selectoare părinte &) nu este CSS valid, iar minificatorul o va deteriora. Compilează mai întâi sursa preprocesorului, apoi lipește ieșirea compilată aici.

De ce sunt eliminate comentariile mele de licență?

„Elimină comentariile” este activat implicit și șterge fiecare bloc /* … */. Activează „Păstrează comentariile /*! de licență” pentru a păstra blocurile care încep cu /*!. MIT, Apache și BSD necesită toate ca antetul de drepturi de autor să fie livrat cu CSS-ul redistribuit.

Cât pot economisi?

CSS-ul scris manual scade de obicei cu 15 până la 35 la sută. Fișierele puternic comentate sau indentate profund, cu multe literale de culoare, pot ajunge la 40 la sută. Ieșirea compilată din Sass sau CSS-in-JS este adesea parțial minificată deja și economisește mai puțin — de obicei 5 până la 15 la sută.

Rulează minificarea CSS într-o filă de browser și omiți complet toolchain-ul Node. Lipește stylesheet-ul mai sus, comută opțiunile pentru a potrivi cât de agresiv vrei să fie pasul, apoi copiază ieșirea sau descarc-o ca .min.css. Fără încărcare, fără cont, fără bibliotecă de furnizor.