CSS சுருக்கு _

CSS மினிஃபிகேஷன் எவ்வாறு வேலை செய்கிறது

மினிஃபையர் உங்கள் stylesheet-ஐ state-aware tokeniser-உடன் நடந்து பாதுகாக்கப்பட்ட பகுதிகளை (string literals மற்றும் url() மதிப்புகள்) சுருக்கல் மற்றும் நீக்கல் பாதுகாப்பான திருத்தக்கூடிய வெள்ளை இடங்களிலிருந்து வேறுபடுத்துகிறது.

1. strings மற்றும் URLகளை பாதுகாக்கவும். வேறு எந்த மாற்றத்திற்கும் முன்பு, tokeniser ஒவ்வொரு quoted string ("…" அல்லது '…') மற்றும் ஒவ்வொரு url(…) argument-ஐயும் அடையாளம் காண்டு அவற்றை verbatim சேமிக்கிறது. அடுத்தடுத்த passes இந்த bytes-ஐ தொடாது, எனவே spaces உள்ள background-image URL அல்லது punctuation உள்ள content property சரியாக பாதுகாக்கப்படும்.
2. கமெண்டுகளை நீக்கு. /* … */ blocks toggle இயக்கத்தில் இருக்கும்போது நீக்கப்படுகின்றன. license-comment toggle இயக்கத்தில் இருந்தால், /*! … */ blocks தப்பிக்கின்றன, இதனால் MIT, Apache மற்றும் BSD licence headers வெளியீட்டில் அந்த licences தேவைப்படுவதற்கேற்ப இருக்கும்.
3. வெள்ளை இடங்களை சுருக்கு. spaces, tabs மற்றும் newlines-ன் ஒவ்வொரு தொடரும் ஒரே ஒரு space ஆக சுருங்குகிறது, பிறகு CSS structural characters {, }, ;, : மற்றும் , ஐச் சுற்றியுள்ள வெள்ளை இடங்கள் முழுவதுமாக நீக்கப்படுகின்றன. selector மற்றும் value lists உலாவியின் parser அவற்றை படிக்கும் அதே முறையில் மீண்டும் ஒழுங்கமைக்கப்படுகின்றன.
4. மதிப்புகளை மேம்படுத்து. விருப்ப passes hex color codes-ஐ சிறிய எழுத்துக்களாக்குகின்றன, இணைக்கப்பட்ட 6-digit hex channels-ஐ 3-digit shorthand-ஆக சுருக்குகின்றன (#aabbcc → #abc), மற்றும் zero மதிப்புகளிலிருந்து dimension units-ஐ நீக்குகின்றன (0px → 0). zero-unit pass units முக்கியமான transform() calls-க்குள் உள்ள மதிப்புகளை தவிர்க்கிறது.
5. பைட் சேமிப்பை தெரிவி. அசல் மற்றும் சுருக்கப்பட்ட உரை இரண்டும் new TextEncoder().encode(…).byteLength மூலம் அளவிடப்படுகின்றன, இது CDN அல்லது HTTP server கம்பியில் பார்க்கும் UTF-8 byte count ஆகும். metric strip அசல் அளவு, சுருக்கப்பட்ட அளவு, சேமிக்கப்பட்ட bytes மற்றும் சதவீத சேமிப்பை காட்டுகிறது.

CSS ஐ ஏன் சுருக்க வேண்டும்

• வேகமான render-blocking load. உலாவிகள் CSS parse செய்வதை முடிக்கும் வரை ஒரு pixel கூட வரையாது. 30 சதவீத stylesheet குறைப்பு அந்த block-ஐ குறைக்கிறது, First Contentful Paint-ஐ மேம்படுத்துகிறது, மற்றும் நேரடியாக உங்கள் Lighthouse Performance மதிப்பெண்ணில் காட்டுகிறது.
• குறைந்த CDN egress கட்டணங்கள். CloudFront, Cloudflare மற்றும் Fastly அனைத்தும் egress gigabyte-க்கு கட்டணம் வசூலிக்கின்றன. ஒவ்வொரு page view-லும் ship ஆகும் stylesheet-ல் 20 சதவீதம் குறைப்பது மாதாந்திர traffic சில மில்லியன் views கடக்கும்போது invoice-ல் ஒரு உண்மையான வரியாக மாறும்.
• சிறிய embeds மற்றும் email CSS. Transactional email templates Outlook மற்றும் Gmail rendering quirks-ஐ தாங்க CSS-ஐ inline செய்கின்றன, மேலும் ஒவ்வொரு கூடுதல் byte-உம் Gmail-ன் 102 KB clip threshold-ஐ நெருங்குகிறது. inlining-க்கு முன்பு சுருக்குவது message-ஐ வரம்பிற்கு கீழே வைக்கிறது.
• build-tool dependency இல்லை. விரைவான ஒரு முறை வேலைகள், build pipeline இல்லாத legacy repos, மற்றும் air-gapped சூழல்களுக்கு எப்போதும் Node toolchain-க்கு இடம் இருப்பதில்லை. PostCSS, cssnano அல்லது வேறு எதையும் நிறுவாமல் இங்கே pass இயக்கலாம்.

பொதுவான பயன்பாடுகள்

CSS மினிஃபிகேஷன் கிட்டத்தட்ட ஒவ்வொரு front-end build pipeline-ன் முடிவிலும் மற்றும் byte counts முக்கியமான பல runtime சூழல்களிலும் காட்சியளிக்கிறது.

• Production build pipelines: Webpack, Vite, Rollup மற்றும் Parcel அனைத்தும் அவற்றின் production mode defaults-ல் CSS மினிஃபிகேஷன் படியை ship செய்கின்றன. commit-க்கு முன்பு இங்கே pass இயக்குவதால் முழு build-ஐ trigger செய்யாமல் வெளியீட்டை validate செய்யலாம்.
• <style> tags-ல் CSS embed செய்தல்: critical CSS-ஐ HTML document-ல் inline செய்யும் server-rendered frameworks standalone stylesheets போன்றே அதே byte savings-ல் பயன்படைகின்றன, மேலும் சிறிய inline CSS Time to First Byte-ஐ குறைக்கிறது.
• Transactional மற்றும் marketing email: email HTML அனைத்து CSS-ஐ inline செய்கிறது, எனவே stylesheet-ல் ஒவ்வொரு kilobyte-உம் மொத்த message size-ஐ அதிகரிக்கிறது. inlining-க்கு முன்பு சுருக்குவது messages-ஐ ESP size caps-க்கு மிகவும் கீழே வைக்கிறது.

ஒரு worked example

இரண்டு-space indentation, selectors இடையே blank lines, மேலே ஒரு licence comment block மற்றும் #FFFFFF போன்ற verbose hex வண்ணங்கள் மற்றும் margin: 0px போன்ற zero-padded margins உள்ள 1 KB ruleset-ஐ ஒட்டுங்கள். ஒவ்வொரு option-உம் toggle on செய்யப்பட்டிருக்கும்போது, வெளியீடு சுமார் 600 bytes-ஆக சுருங்குகிறது — 40 சதவீத சேமிப்பு — render ஆகும் பக்கம் மூலத்திற்கு byte-equal ஆக இருக்கும்.

மினிஃபிகேஷன் என் CSS நடத்தையை மாற்றுமா?

இல்லை, default toggles-ல். மினிஃபையர் CSS parser ஏற்கனவே நிராகரிக்கும் bytes மட்டுமே நீக்குகிறது — வெள்ளை இடங்கள், கமெண்டுகள், optional final semicolon — மற்றும் units முக்கியமான transform() உள்ளே தவிர்க்கிறது. ஒவ்வொரு selector, property மற்றும் value பாதுகாக்கப்படுகிறது.

இது SCSS அல்லது LESS உடன் வேலை செய்யுமா?

அவற்றை plain CSS-ஆக compile செய்த பிறகு மட்டுமே. SCSS மற்றும் LESS syntax (variables, nesting, mixins, & parent selectors) valid CSS இல்லை, மினிஃபையர் அதை சிதைத்துவிடும். முதலில் உங்கள் preprocessor source-ஐ compile செய்யுங்கள், பிறகு compiled output-ஐ இங்கே ஒட்டுங்கள்.

என் licence comments ஏன் நீக்கப்படுகின்றன?

"கமெண்டுகளை நீக்கு" default-ஆக on ஆக உள்ளது மற்றும் ஒவ்வொரு /* … */ block-ஐயும் நீக்குகிறது. /*! உடன் தொடங்கும் blocks-ஐ வைத்திருக்க "/*! licence comments-ஐ பாதுகாக்கவும்" இயக்கவும். MIT, Apache மற்றும் BSD அனைத்தும் copyright header-ஐ redistributed CSS-உடன் ship செய்ய கோருகின்றன.

நான் எவ்வளவு சேமிக்கலாம்?

கையால் எழுதப்பட்ட CSS பொதுவாக 15 முதல் 35 சதவீதம் குறைகிறது. நிறைய கமெண்டுகள் அல்லது ஆழமான indentation உள்ள பல colour literals கொண்ட files 40 சதவீதம் வரை எட்டலாம். Sass அல்லது CSS-in-JS-இலிருந்து compiled வெளியீடு பெரும்பாலும் ஓரளவு மினிஃபை செய்யப்பட்டிருக்கும் மற்றும் குறைவாக சேமிக்கும் — பொதுவாக 5 முதல் 15 சதவீதம்.

ஒரு browser tab-ல் CSS மினிஃபிகேஷன் இயக்கினால் Node toolchain-ஐ முழுவதுமாக தவிர்க்கலாம். மேலே stylesheet-ஐ ஒட்டுங்கள், pass எவ்வளவு aggressive ஆக இருக்க வேண்டும் என்பதற்கு ஏற்ப options toggle செய்யுங்கள், பிறகு வெளியீட்டை நகலெடுங்கள் அல்லது .min.css ஆக பதிவிறக்குங்கள். upload இல்லை, கணக்கு இல்லை, vendor library இல்லை.