இலவச மாற்றி

CSS மினிஃபையர்

உங்கள் உலாவியில் CSS ஸ்டைல்ஷீட்களை உடனடியாகச் சிறிதாக்கி சுருக்கவும். கருத்துகளை அகற்றவும், இடைவெளியை சுருக்கவும் மற்றும் கோப்பு அளவைக் குறைக்கவும். இலவசம் மற்றும் தனிப்பட்டது.

ஒரு CSS கோப்பை இங்கே இழுத்து விடுங்கள்

.css கோப்புகளை ஆதரிக்கிறது. அல்லது உங்கள் CSSஐ மேலே ஒட்டவும்.

அல்லது

இந்த கருவி பற்றி

CSS மினிஃபிகேஷன் ஆனது உலாவிகளுக்கு வழங்குவதற்கு முன் அதன் அளவைக் குறைக்க ஸ்டைல்ஷீட்டிலிருந்து இடைவெளி, கருத்துகள் மற்றும் தேவையற்ற எழுத்துக்களை நீக்குகிறது. உண்மையான விதிகள் மாறாது: ஒரு சிறிய நடைதாள் பக்கங்களை ஒரே மாதிரியாக மாற்றியமைக்கப்படாத மூலத்திற்கு வழங்குகிறது. புதிய வரிகள், தேவையற்ற அரைப்புள்ளிகள், கருத்துகள், ஹெக்ஸ்-வண்ண சுருக்கெழுத்து வாய்ப்புகள் மற்றும் பூஜ்ஜிய-அலகு ஷார்ட்கட்கள் (0px ஐ 0 உடன் மாற்றுவது) நீக்குவதன் மூலம் சேமிப்பு கிடைக்கிறது.

டஜன் கணக்கான பாணி விதிகளைக் கொண்ட நவீன வலைத்தளங்களில், வழக்கமான குறைப்பு 20-40% மற்றும் குறைக்கப்படாத மூலத்திற்கு எதிராக உள்ளது. சேவையகத்தில் உள்ள ஜிஜிப் சுருக்கத்துடன் இணைந்து, விளிம்பு சேமிப்புகள் சுருங்குகிறது - ஜிஜிப் ஏற்கனவே மீண்டும் மீண்டும் வரும் உரையை திறம்பட சுருக்குகிறது - ஆனால் இந்த கலவையானது சுருக்கத்தை மட்டும் துடிக்கிறது, குறிப்பாக ஸ்டைல்ஷீட்கள் பல பார்வையாளர்களுக்கு தேக்ககப்படுத்தப்பட்டு பல முறை வழங்கப்படும்.

இந்த மினிஃபயர் CSSஐ ஒரே பாஸில் செயலாக்குகிறது, url() மதிப்புகளுக்கு வெளியே உள்ள கருத்துகளை நீக்குகிறது, இடைவெளியைக் குறைக்கிறது, பிரேஸ்களை மூடுவதற்கு முன் தேவையற்ற அரைப்புள்ளிகளை அகற்றுகிறது, பூஜ்ஜிய-அலகு சுருக்கெழுத்தைப் பயன்படுத்துகிறது மற்றும் ஆறு இலக்க ஹெக்ஸ் வண்ணங்களை முடிந்தவரை மூன்று இலக்க வடிவத்திற்கு மாற்றுகிறது (#ffffff → #fff). எந்த உலாவியும் சரியாக பாகுபடுத்தும் வெளியீடு சரியான CSS ஆக இருக்கும்.

CSS ஐ ஏன் குறைக்க வேண்டும்

சிறிய CSS கோப்புகள் வேகமாக ஏற்றப்படும் மற்றும் நேரக் குறைப்புகளை வழங்குகின்றன, இவை இரண்டும் முதல் உள்ளடக்கம் நிறைந்த பெயிண்ட் மற்றும் மிகப்பெரிய உள்ளடக்கமான பெயிண்ட் மதிப்பெண்களை மேம்படுத்துகின்றன. கோர் வெப் வைட்டல்கள் தேடல் தரவரிசையைப் பாதிக்கும் தளங்களுக்கு, ஒவ்வொரு கிலோபைட் ரெண்டர்-தடுக்கும் CSS மொட்டையடிக்கும் முயற்சிக்கு மதிப்புள்ளது.

அலைவரிசை செலவுகளும் அளவில் முக்கியமானவை. மில்லியன் கணக்கான பக்கக் காட்சிகளை வழங்கும் தளங்கள், அவற்றின் ஸ்டைல்ஷீட்கள் 30% சிறியதாக இருக்கும் போது, ​​அளவிடக்கூடிய அளவு வெளியேறும். CDN பில்கள், மொபைல் டேட்டா பயன்பாடு மற்றும் ஆற்றல் நுகர்வு அனைத்தும் சிறிது பயனடைகின்றன. மினிஃபிகேஷன் அடிப்படையில் இலவசம் - பராமரிப்பு செலவு இல்லாமல் ஒரு முறை கட்டமைக்கும் படி.

பயன்படுத்துவது எப்படி

CSSஐ ஒட்டவும், சிறிய பதிப்பைப் பெறவும்.

  1. உங்கள் CSS ஐ ஒட்டவும்: உள்ளீடு பகுதியில் .css கோப்பை விடுங்கள் அல்லது CSS மூலத்தை ஒட்டவும். CSS மாறிகள், calc(), கட்டம் மற்றும் ஃப்ளெக்ஸ்பாக்ஸ் உள்ளிட்ட எந்த செல்லுபடியாகும் CSS — நவீன தொடரியல்களையும் மினிஃபையர் ஏற்றுக்கொள்கிறது.
  2. விருப்பங்களை தேர்வு செய்யவும்: இயல்புநிலை கருத்துகளை நீக்குகிறது, இடைவெளியை சுருக்குகிறது மற்றும் பொதுவான குறுக்குவழிகளைப் பயன்படுத்துகிறது. நீங்கள் கருத்துகள் அல்லது குறிப்பிட்ட வடிவமைப்பைப் பாதுகாக்க வேண்டும் என்றால், குறிப்பிட்ட மாற்றங்களை முடக்கலாம்.
  3. சிறிதாக்கு: ஒவ்வொரு இயக்கப்பட்ட மாற்றத்தையும் பயன்படுத்தி, மினிஃபையர் CSSஐ நடத்துகிறது. வெளியீடு குறைந்த அளவுடன் செயல்பாட்டு ரீதியாக ஒரே மாதிரியான CSS ஆகும்.
  4. வெளியீட்டைப் பயன்படுத்தவும்: நகலெடுக்கவும் அல்லது பதிவிறக்கவும். உங்கள் பில்ட் அவுட்புட்டில் உள்ள மூல CSS ஐ சிறிதாக்கப்பட்ட பதிப்பில் மாற்றவும் அல்லது உங்கள் கருவியின் உருவாக்கப் படியாக minification ஐ இயக்கவும்.

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

தொழில்நுட்ப விவரங்கள்

CSS minification என்பது பெரும்பாலும் பழமைவாத இடைவெளியை அகற்றுவதாகும். தேர்வாளர்கள், அறிவிப்புகள் மற்றும் மதிப்புகளுக்குள் உள்ள இடைவெளி முக்கியத்துவம் வாய்ந்த இடங்களில் பாதுகாக்கப்படுகிறது; வெளியில் உள்ள இடைவெளி சரிந்தது. /* என்று தொடங்கும் வரை கருத்துகள் அகற்றப்படும்! (உரிமம் பாதுகாப்பு கருத்துகள்).

பொதுவான குறுக்குவழிகள்: 0px, 0em மற்றும் ஒத்த பூஜ்ஜிய அலகு மதிப்புகள் 0 ஆக மாறும்; இணைக்கப்பட்ட இலக்கங்களுடன் ஆறு இலக்க ஹெக்ஸ் நிறங்கள் (#ffffff, #336699) மூன்று இலக்கங்களாக மாறும் (#fff, #369); }க்கு முந்தைய கடைசி அரைப்புள்ளி நீக்கப்பட்டது. ஹெக்ஸ் சில நேரங்களில் நீளமாக இருப்பதால் வண்ணப் பெயர்கள் தானாக ஹெக்ஸாக மாற்றப்படுவதில்லை (சிவப்பு நீளம் #f00 ஐ விடக் குறைவு; #ff0000 என்பது சிவப்பு நிறத்தை விட நீளமானது).

உள்ளீட்டை ஏற்கும் எந்த CSS வேலிடேட்டரையும் வெளியீடு அனுப்ப வேண்டும். உலாவி ஆதரவு மாறாமல் உள்ளது - minification விதிகளை மாற்றாது, அவற்றின் உரை பிரதிநிதித்துவம் மட்டுமே.

சிறந்த நடைமுறைகள்

அடிக்கடி கேட்கப்படும் கேள்விகள்

CSS minification எதை நீக்குகிறது?
வைட்ஸ்பேஸ் (இடைவெளிகள், தாவல்கள், புதிய வரிகள்), கருத்துகள் (/* ... */), தேவையற்ற அரைப்புள்ளிகள், தேவையற்ற பூஜ்ஜியங்கள் (0.5 → .5), சுருக்கெழுத்து மேம்படுத்தல்கள் (#ffffff → #fff) மற்றும் தேவையற்ற அலகுகள் (0px → 0).
சிறிய CSS தயாரிப்பில் பயன்படுத்துவது பாதுகாப்பானதா?
ஆம். சிறுமைப்படுத்தல் அனைத்து CSS விதிகள், தேர்வாளர்கள் மற்றும் சொத்து மதிப்புகளைப் பாதுகாக்கிறது. வெளியீடு செயல்பாட்டு ரீதியாக ஒரே மாதிரியாக உள்ளது - உலாவிகள் அதை அதே வழியில் விளக்குகின்றன. அனைத்து தயாரிப்பு வலைத்தளங்களுக்கும் இது ஒரு நிலையான நடைமுறை.
எவ்வளவு அளவு குறைப்பை நான் எதிர்பார்க்க வேண்டும்?
நன்கு எழுதப்பட்ட CSS க்கு பொதுவாக 20-50%. verbose formatting உடன் அதிக கருத்துள்ள குறியீடு பெரிய குறைப்புகளைக் காண்கிறது. ஏற்கனவே கச்சிதமான CSS 10-15% மட்டுமே சுருங்கக்கூடும்.
நான் gzip ஐப் பயன்படுத்தினால் CSS ஐ சிறிதாக்க வேண்டுமா?
ஆம், இரண்டும். Gzip மீண்டும் மீண்டும் வடிவங்களை சுருக்குகிறது, அதே சமயம் சிறுமைப்படுத்தல் தேவையற்ற எழுத்துக்களை நீக்குகிறது. அவை தனியாக இருப்பதை விட சிறந்த சுருக்கத்தை வழங்குகின்றன. Minified + gzipped CSS ஆனது அசலை விட 85-95% சிறியதாக இருக்கும்.
நான் எப்போதும் சிறியதாக இருக்க வேண்டுமா?
உற்பத்திக்கு ஆம். மேம்பாட்டு மூல கோப்புகளுக்கு, இல்லை — படிக்கக்கூடிய CSS பராமரிப்புக்கு அவசியம். திருத்தும் நேரத்தில் அல்ல, உருவாக்க நேரத்தில் minification ஐ இயக்கவும்.
எனது CSS சேவையகத்தில் பதிவேற்றப்பட்டதா?
இல்லை. மினிஃபையர் உங்கள் உலாவியில் இயங்குகிறது.
இது cssnano அல்லது csso உடன் எவ்வாறு ஒப்பிடப்படுகிறது?
cssnano மற்றும் csso ஆகியவை உற்பத்தி உருவாக்கங்களுக்கான PostCSS செருகுநிரல்கள்; அவை தேவையற்ற விதிகளை இணைத்தல் போன்ற மிகவும் தீவிரமான மாற்றங்களை வழங்குகின்றன. இந்தக் கருவி உருவாக்க அமைப்பு இல்லாமல் தற்காலிகப் பயன்பாட்டிற்கான அடிப்படைக் குறுக்கீடுகளை உள்ளடக்கியது.
சிறிதளவு மூல வரைபடங்களை உடைக்கிறதா?
மினிஃபிகேஷன் மூல வரைபடங்களை உருவாக்காது; இந்த கருவி சிறிய வெளியீட்டை மட்டுமே உருவாக்குகிறது. உற்பத்தியில் சிறிதாக்கப்பட்ட CSS ஐ பிழைத்திருத்த, உங்கள் உருவாக்கத்தின் ஒரு பகுதியாக மூல வரைபடங்களை உருவாக்கவும்.