CSS Minify કરો _

CSS minification કેવી રીતે કામ કરે?

મિનિફાયર તમારી સ્ટાઇલશીટને એક સ્થિતિ-જાગૃત ટોકનાઇઝર વડે ફેરવે છે, જે સુરક્ષિત વિસ્તારો (સ્ટ્રિંગ લિટરલ અને url() મૂલ્યો) ને એ સંપાદનયોગ્ય ખાલી જગ્યાથી અલગ પાડે છે જ્યાં સંકોચન અને કાઢી નાખવું સલામત હોય છે.

1. Strings અને URLs સુરક્ષિત. બીજા કોઈ પણ રૂપાંતર પહેલાં, ટોકનાઇઝર દરેક અવતરણચિહ્નવાળી સ્ટ્રિંગ (“…” કે ‘…’) અને દરેક url(…) દલીલને ઓળખીને જેમની તેમ સાચવી લે છે. પછીના પાસ આ બાઇટ્સને ક્યારેય સ્પર્શતા નથી, એટલે ખાલી જગ્યાવાળું background-image URL કે વિરામચિહ્નોવાળી content પ્રોપર્ટી બરાબર એ જ રીતે જળવાઈ રહે છે.
2. Comments કાઢો. ટૉગલ ચાલુ હોય ત્યારે /* … */ બ્લોક દૂર કરાય છે. જો લાઇસન્સ-કમેન્ટ ટૉગલ પણ ચાલુ હોય, તો /*! … */ બ્લોક ટકી રહે છે જેથી MIT, Apache, અને BSD લાઇસન્સ હેડર આઉટપુટમાં રહે, જેમ એ લાઇસન્સો માટે જરૂરી છે.
3. Whitespace collapse. ખાલી-જગ્યા, ટૅબ, નવી-પંક્તિ ના દરેક ક્રમ ને એક ખાલી-જગ્યામાં ભેળવવામાં આવે, ત્યારબાદ CSS structural characters {, }, ;, :, અને , ની આજુ-બાજુ ખાલી-જગ્યા સંપૂર્ણ દૂર કરવામાં આવે. પસંદ-ક્ષેત્ર (selector) અને મૂલ્ય-સૂચિ (value lists) બ્રાઉઝર ના સારક (parser) જે રીતે વાંચે છે તે જ રીતે ફરી ગોઠવાય.
4. Values ઑપ્ટિમાઈઝ. વૈકલ્પિક પાસ hex રંગ કોડને નાના અક્ષરમાં ફેરવે છે, જોડ 6-અંકના hex ચૅનલને 3-અંકના ટૂંકા સ્વરૂપમાં સંકોચે છે (#aabbcc → #abc), અને શૂન્ય મૂલ્યોમાંથી પરિમાણ એકમ કાઢી નાખે છે (0px → 0). શૂન્ય-એકમ પાસ એ મૂલ્યોને છોડી દે છે જે transform() કૉલની અંદર હોય, જ્યાં એકમ મહત્ત્વના હોય છે.
5. Byte savings report. મૂળ અને સંક્ષિપ્ત ટેક્સ્ટ બન્ને new TextEncoder().encode(…).byteLength વડે માપવામાં આવે — CDN અથવા HTTP સર્વર wire પર જે UTF-8 byte count જુએ છે. માપ-પટ્ટી (metric strip) મૂળ-માપ, સંક્ષિપ્ત-માપ, બચેલા bytes, અને ટકા-બચત આપે છે.

CSS minify કેમ?

• Render-blocking લોડ ઝડપી. બ્રાઉઝર CSS ની પાર્સિંગ પૂરી ન કરે ત્યાં સુધી એક પણ પિક્સેલ દોરતું નથી. 30 ટકા સ્ટાઇલશીટની કાપ એ બ્લોકને ટૂંકો કરે છે, First Contentful Paint સુધારે છે, અને સીધો તમારા Lighthouse Performance સ્કોરમાં દેખાય છે.
• CDN egress bills ઓછા. CloudFront, Cloudflare, અને Fastly બધાં બહાર જતા દરેક ગીગાબાઇટ માટે શુલ્ક લે છે. દરેક પૃષ્ઠ-દર્શન પર મોકલાતી સ્ટાઇલશીટમાંથી 20 ટકા કાપવાનું, માસિક ટ્રાફિક થોડા મિલિયન દર્શન વટાવે પછી, બિલ પર સાચી રકમ બની જાય છે.
• નાના embeds અને email CSS. વ્યવહારિક ઈમેઇલ ટેમ્પ્લેટ Outlook અને Gmail ની રેન્ડરિંગ વિચિત્રતાઓથી બચવા તેમની CSS ઇનલાઇન કરે છે, અને દરેક વધારાનો બાઇટ તમને Gmail ની 102 KB ક્લિપ મર્યાદાની વધુ નજીક ધકેલે છે. ઇનલાઇન કરતાં પહેલાં મિનિફાય કરવાથી સંદેશ મર્યાદાની નીચે રહે છે.
• Build-tool dependency નહીં. ઝડપી એક-વખતના કામો, બિલ્ડ પાઇપલાઇન વગરના જૂના રિપો, અને એર-ગૅપ્ડ વાતાવરણોમાં Node ટૂલચેઇન માટે હંમેશાં જગ્યા હોતી નથી. તમે PostCSS, cssnano, કે બીજું કંઈ ઇન્સ્ટૉલ કર્યા વગર અહીં આ પાસ ચલાવી શકો છો.

સામાન્ય ઉપયોગ

CSS મિનિફિકેશન લગભગ દરેક ફ્રન્ટ-એન્ડ બિલ્ડ પાઇપલાઇનના અંતે અને એવા કેટલાક રનટાઇમ સંદર્ભોમાં દેખાય છે જ્યાં બાઇટની ગણતરી મહત્ત્વની હોય છે.

• પ્રોડક્શન બિલ્ડ પાઇપલાઇન: Webpack, Vite, Rollup, અને Parcel બધાં તેમના પ્રોડક્શન મોડ ડિફૉલ્ટમાં CSS મિનિફિકેશન પગલું મોકલે છે. કમિટ પહેલાં અહીં પાસ ચલાવવાથી પૂર્ણ બિલ્ડ ચાલુ કર્યા વગર આઉટપુટ ચકાસી શકાય છે.
• <style> ટૅગમાં CSS એમ્બેડ કરવી: જે સર્વર-રેન્ડર થયેલા ફ્રેમવર્ક HTML દસ્તાવેજમાં મહત્ત્વપૂર્ણ CSS ઇનલાઇન કરે છે તેમને સ્વતંત્ર સ્ટાઇલશીટ જેટલી જ બાઇટ બચત મળે છે, અને નાની ઇનલાઇન CSS Time to First Byte ઘટાડે છે.
• વ્યવહારિક અને માર્કેટિંગ ઈમેઇલ: ઈમેઇલ HTML બધી CSS ઇનલાઇન કરે છે, એટલે સ્ટાઇલશીટનો દરેક કિલોબાઇટ કુલ સંદેશ કદમાં ઉમેરાય છે. ઇનલાઇન કરતાં પહેલાં મિનિફાય કરવાથી સંદેશ ESP કદ મર્યાદાથી ઘણા નીચે રહે છે.

ઉદાહરણ

બે-જગ્યાના ઇન્ડેન્ટેશન, સિલેક્ટરો વચ્ચે ખાલી પંક્તિઓ, ઉપર એક લાઇસન્સ કમેન્ટ બ્લોક, અને #FFFFFF જેવા વિગતવાર hex રંગો તથા margin: 0px જેવા શૂન્ય-પેડ થયેલા માર્જિન સાથેનો 1 KB નિયમ-સમૂહ પેસ્ટ કરો. દરેક વિકલ્પ ટૉગલ ચાલુ રાખીને, આઉટપુટ લગભગ 600 બાઇટ્સ પર સંકોચાય છે — 40 ટકા બચત — જ્યારે રેન્ડર થયેલું પૃષ્ઠ સ્રોત જેવું જ બાઇટ-સમાન દેખાય છે.

શું મિનિફિકેશન મારા CSS ની વર્તણૂક બદલે છે?

ના, ડિફૉલ્ટ ટૉગલ પર. મિનિફાયર ફક્ત એ જ બાઇટ્સ દૂર કરે છે જે CSS પાર્સર પહેલેથી જ રદ કરી દે છે — ખાલી જગ્યા, કમેન્ટ, વૈકલ્પિક છેલ્લો અર્ધવિરામ — અને transform() ની અંદર છોડી દે છે જ્યાં એકમ મહત્ત્વના હોય છે. દરેક સિલેક્ટર, પ્રોપર્ટી અને મૂલ્ય જળવાઈ રહે છે.

SCSS અથવા LESS સાથે?

ફક્ત તમે તેમને સાદી CSS માં કમ્પાઇલ કરો પછી જ. SCSS અને LESS વાક્યરચના (વેરિએબલ, નેસ્ટિંગ, મિક્સિન, & પેરન્ટ સિલેક્ટર) માન્ય CSS નથી અને મિનિફાયર તેને બગાડી નાખશે. પહેલાં તમારો પ્રીપ્રોસેસર સ્રોત કમ્પાઇલ કરો, પછી કમ્પાઇલ થયેલું આઉટપુટ અહીં પેસ્ટ કરો.

મારા licence comments શા માટે દૂર થઈ રહ્યા છે?

"Remove comments" ડિફૉલ્ટ રૂપે ચાલુ છે અને દરેક /* … */ બ્લોક સાફ કરે છે. /*! થી શરૂ થતા બ્લોક રાખવા માટે "Preserve /*! licence comments" ચાલુ કરો. MIT, Apache, અને BSD બધાં માટે જરૂરી છે કે પુનઃવિતરિત CSS સાથે કૉપીરાઇટ હેડર મોકલાય.

કેટલું save?

હાથે લખેલી CSS સામાન્ય રીતે 15 થી 35 ટકા ઘટે છે. ઘણા રંગ લિટરલ ધરાવતી ભારે કમેન્ટવાળી કે ઊંડે ઇન્ડેન્ટ થયેલી ફાઇલો 40 ટકા સુધી પહોંચી શકે છે. Sass કે CSS-in-JS માંથી કમ્પાઇલ થયેલું આઉટપુટ ઘણીવાર પહેલેથી જ આંશિક રીતે મિનિફાય થયેલું હોય છે અને ઓછું બચાવે છે — સામાન્ય રીતે 5 થી 15 ટકા.

Browser tab માં CSS minification — Node toolchain પૂર્ણ skip. ઉપર stylesheet paste, pass aggressive ઓ પ્રમાણે options toggle, output copy અથવા .min.css download. Upload, account, vendor library — કંઈ નહીં.