CSS మినిఫికేషన్ ఎలా పనిచేస్తుంది
మినిఫైయర్ స్టేట్-అవేర్ టోకెనైజర్తో మీ స్టైల్షీట్ను వాక్ చేస్తుంది, ప్రొటెక్టెడ్ రీజియన్లు (స్ట్రింగ్ లిటరల్స్ మరియు url() విలువలు) ను ఎడిటేబుల్ వైట్స్పేస్ నుండి వేరు చేస్తుంది.
- స్ట్రింగ్లు మరియు URLలు ప్రొటెక్ట్ చేయండి. ఏ ఇతర ట్రాన్స్ఫారమ్కు ముందు, టోకెనైజర్ ప్రతి కొటేడ్ స్ట్రింగ్ ("…" లేదా '…') మరియు ప్రతి url(…) ఆర్గ్యుమెంట్ గుర్తిస్తుంది మరియు వాటిని యథాతథంగా స్టాష్ చేస్తుంది. తదుపరి పాసులు ఈ బైట్లను ఎప్పుడూ తాకవు, కాబట్టి స్పేస్లతో కూడిన background-image URL లేదా పంక్చువేషన్తో కూడిన content ప్రాపర్టీ ఖచ్చితంగా నిలుస్తుంది.
- కామెంట్లు స్ట్రిప్ చేయండి. టోగుల్ ఆన్ అయినప్పుడు
/* … */బ్లాక్లు తొలగించబడతాయి. లైసెన్స్-కామెంట్ టోగుల్ కూడా ఆన్ అయినప్పుడు,/*! … */బ్లాక్లు నిలుస్తాయి, తద్వారా MIT, Apache, మరియు BSD లైసెన్స్ హెడర్లు ఆ లైసెన్స్ల అవసరం ప్రకారం అవుట్పుట్లో ఉంటాయి. - వైట్స్పేస్ కంప్రెస్ చేయండి. స్పేస్లు, ట్యాబ్లు మరియు న్యూలైన్ల ప్రతి రన్ ఒకే స్పేస్కు కంప్రెస్ అవుతుంది, అప్పుడు CSS స్ట్రక్చరల్ అక్షరాల చుట్టూ వైట్స్పేస్
{,},;,:, మరియు,పూర్తిగా తొలగించబడుతుంది. సెలెక్టర్ మరియు విలువ జాబితాలు బ్రౌజర్ పార్సర్ చదివే విధంగానే రీఫ్లో అవుతాయి. - విలువలు అప్టిమైజ్ చేయండి. ఆప్షనల్ పాసులు హెక్స్ కలర్ కోడ్లను లోయర్కేస్ చేస్తాయి, జతపరచిన 6-డిజిట్ హెక్స్ చానెల్స్ను 3-డిజిట్ షార్ట్హ్యాండ్కు కంప్రెస్ చేస్తాయి (
#aabbcc→#abc), మరియు జీరో విలువల నుండి డైమెన్షన్ యూనిట్లు స్ట్రిప్ చేస్తాయి (0px→0). జీరో-యూనిట్ పాస్transform()కాల్స్లో విలువలను దాటవేస్తుంది, అక్కడ యూనిట్లు సిగ్నిఫికెంట్. - బైట్ సేవింగ్స్ నివేదించండి. అసలు మరియు మినిఫైడ్ టెక్స్ట్ రెండూ
new TextEncoder().encode(…).byteLengthతో కొలవబడతాయి, CDN లేదా HTTP సర్వర్ వైర్లో చూసే అదే UTF-8 బైట్ కౌంట్. మెట్రిక్ స్ట్రిప్ అసలు సైజు, మినిఫైడ్ సైజు, సేవ్ అయిన బైట్లు మరియు శాతం సేవింగ్ చూపిస్తుంది.
CSS మినిఫై ఎందుకు చేయాలి
- వేగంగా రెండర్-బ్లాకింగ్ లోడ్. CSS పార్సింగ్ పూర్తయ్యే వరకు బ్రౌజర్లు ఒక్క పిక్సెల్ కూడా పెయింట్ చేయవు. 30 శాతం స్టైల్షీట్ కట్ ఆ బ్లాక్ను తగ్గిస్తుంది, First Contentful Paint మెరుగుపరుస్తుంది, మరియు నేరుగా Lighthouse Performance స్కోర్లో కనిపిస్తుంది.
- తక్కువ CDN ఎగ్రెస్ ఖర్చులు. CloudFront, Cloudflare, మరియు Fastly అన్నీ ఎగ్రెస్ గిగాబైట్ కు చార్జ్ చేస్తాయి. ప్రతి పేజ్ వ్యూలో షిప్ అవ్వే స్టైల్షీట్ నుండి 20 శాతం తగ్గించడం నెలవారీ ట్రాఫిక్ కొన్ని మిలియన్ వ్యూలు దాటిన తర్వాత ఇన్వాయిస్లో నిజమైన లైన్ అవుతుంది.
- చిన్న ఎంబెడ్లు మరియు ఇమెయిల్ CSS. ట్రాన్సాక్షనల్ ఇమెయిల్ టెంప్లేట్లు Outlook మరియు Gmail రెండరింగ్ క్విర్క్స్ నుండి బయటపడటానికి CSS ఇన్లైన్ చేస్తాయి, మరియు ప్రతి అదనపు బైట్ Gmail 102 KB క్లిప్ థ్రెషోల్డ్కు దగ్గరగా నెట్టివేస్తుంది. ఇన్లైన్ చేయడానికి ముందు మినిఫై చేయడం మెసేజ్ను క్యాప్ కింద ఉంచుతుంది.
- బిల్డ్-టూల్ డిపెండెన్సీ అవసరం లేదు. క్విక్ వన్-ఆఫ్ జాబ్లు, బిల్డ్ పైప్లైన్ లేని లెగసీ రిపోలు, మరియు ఎయిర్-గ్యాప్డ్ ఎన్విరాన్మెంట్లకు ఎల్లప్పుడూ Node టూల్చెయిన్ కోసం స్థలం ఉండదు. PostCSS, cssnano, లేదా మరేదైనా ఇన్స్టాల్ చేయకుండా ఇక్కడ పాస్ రన్ చేయవచ్చు.
సాధారణ అప్లికేషన్లు
CSS మినిఫికేషన్ దాదాపు ప్రతి ఫ్రంట్-ఎండ్ బిల్డ్ పైప్లైన్ చివర మరియు బైట్ కౌంట్లు ముఖ్యమైన అనేక రన్టైమ్ సందర్భాలలో కనిపిస్తుంది.
- ప్రొడక్షన్ బిల్డ్ పైప్లైన్లు: Webpack, Vite, Rollup, మరియు Parcel అన్నీ వాటి ప్రొడక్షన్ మోడ్ డిఫాల్ట్లలో CSS మినిఫికేషన్ స్టెప్ షిప్ చేస్తాయి. కమిట్ చేయడానికి ముందు ఇక్కడ పాస్ రన్ చేయడం ఫుల్ బిల్డ్ ట్రిగర్ చేయకుండా అవుట్పుట్ వాలిడేట్ చేయడానికి అనుమతిస్తుంది.
<style>ట్యాగ్లలో CSS ఎంబెడ్ చేయడం: క్రిటికల్ CSS HTML డాక్యుమెంట్లో ఇన్లైన్ చేసే సర్వర్-రెండర్డ్ ఫ్రేమ్వర్క్లు స్వతంత్ర స్టైల్షీట్ల వలె అదే బైట్ సేవింగ్ పొందుతాయి, మరియు చిన్న ఇన్లైన్ CSS Time to First Byte తగ్గిస్తుంది.- ట్రాన్సాక్షనల్ మరియు మార్కెటింగ్ ఇమెయిల్: ఇమెయిల్ HTML అన్ని CSS ఇన్లైన్ చేస్తుంది, కాబట్టి స్టైల్షీట్లో ప్రతి కిలోబైట్ మొత్తం మెసేజ్ సైజుకు జోడించబడుతుంది. ఇన్లైన్ చేయడానికి ముందు మినిఫై చేయడం మెసేజ్లను ESP సైజు క్యాప్ కింద ఉంచుతుంది.
పని చేసిన ఉదాహరణ
రెండు-స్పేస్ ఇండెంటేషన్, సెలెక్టర్ల మధ్య ఖాళీ లైన్లు, పైన లైసెన్స్ కామెంట్ బ్లాక్, మరియు #FFFFFF వంటి వెర్బోస్ హెక్స్ కలర్లు మరియు margin: 0px వంటి జీరో-పాడేడ్ మార్జిన్లు కలిగిన 1 KB రూల్సెట్ పేస్ట్ చేయండి. ప్రతి ఆప్షన్ ఆన్ చేస్తే, అవుట్పుట్ దాదాపు 600 బైట్లకు కంప్రెస్ అవుతుంది — 40 శాతం సేవింగ్ — రెండర్ చేయబడిన పేజ్ సోర్స్కు బైట్-ఈక్వల్గా కనిపిస్తుంది.
మినిఫికేషన్ నా CSS బిహేవియర్ మారుస్తుందా?
లేదు, డిఫాల్ట్ టోగుల్స్లో. మినిఫైయర్ CSS పార్సర్ అన్వే తీసివేసే బైట్లు మాత్రమే తొలగిస్తుంది — వైట్స్పేస్, కామెంట్లు, ఆప్షనల్ ఫైనల్ సెమికోలన్ — మరియు యూనిట్లు సిగ్నిఫికెంట్ అయిన transform() లో దాటవేస్తుంది. ప్రతి సెలెక్టర్, ప్రాపర్టీ, మరియు విలువ నిలుపబడుతుంది.
SCSS లేదా LESS తో పని చేస్తుందా?
వాటిని ప్లెయిన్ CSS కి కంపైల్ చేసిన తర్వాత మాత్రమే. SCSS మరియు LESS సింటాక్స్ (వేరియబుల్స్, నెస్టింగ్, మిక్సిన్స్, & పేరెంట్ సెలెక్టర్లు) చెల్లుబాటు అయ్యే CSS కాదు మరియు మినిఫైయర్ దానిని మాంగిల్ చేస్తుంది. మీ ప్రీప్రాసెసర్ సోర్స్ ముందు కంపైల్ చేయండి, అప్పుడు కంపైల్ అయిన అవుట్పుట్ ఇక్కడ పేస్ట్ చేయండి.
నా లైసెన్స్ కామెంట్లు ఎందుకు స్ట్రిప్ అవుతున్నాయి?
"కామెంట్లు తొలగించు" డిఫాల్ట్గా ఆన్ ఉంటుంది మరియు ప్రతి /* … */ బ్లాక్ క్లియర్ చేస్తుంది. /*! తో మొదలయ్యే బ్లాక్లు ఉంచడానికి "/*! లైసెన్స్ కామెంట్లు నిలుపు" ఎనేబుల్ చేయండి. MIT, Apache, మరియు BSD అన్నీ రీడిస్ట్రిబ్యూట్ చేయబడిన CSS తో కాపీరైట్ హెడర్ షిప్ చేయాల్సిన అవసరం ఉంది.
నేను ఎంత సేవ్ చేయగలను?
హ్యాండ్-రాసిన CSS సాధారణంగా 15 నుండి 35 శాతం తగ్గుతుంది. భారీగా కామెంట్ చేయబడిన లేదా లోతుగా ఇండెంట్ చేయబడిన అనేక కలర్ లిటరల్స్ ఉన్న ఫైళ్ళు 40 శాతం వరకు చేరుకోవచ్చు. Sass లేదా CSS-in-JS నుండి కంపైల్ చేయబడిన అవుట్పుట్ తరచుగా పాక్షికంగా మినిఫైడ్ అయి ఉంటుంది మరియు తక్కువ సేవ్ చేస్తుంది — సాధారణంగా 5 నుండి 15 శాతం.
బ్రౌజర్ ట్యాబ్లో CSS మినిఫికేషన్ రన్ చేయడం ద్వారా Node టూల్చెయిన్ పూర్తిగా దాటవేయవచ్చు. పైన స్టైల్షీట్ పేస్ట్ చేయండి, పాస్ ఎంత అగ్రెసివ్గా ఉండాలో ఆప్షన్లు టోగుల్ చేయండి, అప్పుడు అవుట్పుట్ కాపీ చేయండి లేదా .min.css గా డౌన్లోడ్ చేయండి. అప్లోడ్ లేదు, అకౌంట్ లేదు, వెండర్ లైబ్రరీ లేదు.