CSS இல் சிறந்த நடைமுறைப்படுத்துவது எப்படி?



இந்த கட்டுரை உங்களை CSS இல் Minify என அழைக்கப்படும் ஒரு தலைப்புக்கு அறிமுகப்படுத்தும், மேலும் செயல்பாட்டில் ஒரு விரிவான நடைமுறை ஆர்ப்பாட்டத்தையும் உங்களுக்கு வழங்கும்.

இந்த கட்டுரை உங்களை Minify In எனப்படும் தலைப்புக்கு அறிமுகப்படுத்தும் மேலும் செயல்பாட்டில் உங்களுக்கு விரிவான நடைமுறை ஆர்ப்பாட்டமும் கிடைக்கும். இந்த கட்டுரையில் பின்வரும் சுட்டிகள் விவரிக்கப்படும்,

ஜாவாவில் ஐசா மற்றும் ஹசா உறவு

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





ஒரு டெவலப்பர் குறியீடுகளைச் செய்யும்போது, ​​மேலும் மாற்றங்களின் எந்தவொரு செயல்முறையையும் எளிதாக்குவதற்கு குறியீடு சிறந்த படிக்கக்கூடிய வடிவத்தில் இருப்பதை அவர் / அவள் உறுதிசெய்கிறார்கள். எனவே, மாறி பெயர்கள் எளிதில் புரிந்துகொள்ளக்கூடிய வடிவத்தில் உள்ளன மற்றும் முழு எழுத்துக்களையும் எடுத்துக்கொள்கின்றன. பின்னர், அவை போதுமான அளவு வெற்று இடைவெளியைச் சேர்த்து, அதைப் படிக்கும்படி செய்கின்றன.

ஆனால் முழு செயல்முறையிலும், எங்கள் கோப்பு அளவு அதிகரித்து வரும் சரங்களை தளர்த்த முனைகிறோம், இது வலைத்தள ஏற்றுதல் நேரத்தை அதிகரிக்கிறது. குறிப்பாக செயல்பாடுகள் மற்றும் துணை நிரல்களின் முக்கிய பகுதியைக் கொண்ட வலைத்தளங்களுடன், நீண்ட குறியீடு அடிப்படை வலைத்தளத்தை மோசமாக்குகிறது.



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

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

ஒரு வலைத்தளத்தை உருவாக்கும் போது, ​​அதிகபட்ச குறியீடு தளத்தைக் கொண்டிருப்பது எங்களுக்குத் தெரியுமா?
இது CSS, HTML மற்றும் ஜாவாஸ்கிரிப்ட் பற்றியது. உங்கள் வலைத்தளத்தை பார்வைக்கு ஈர்க்கும் இன்றைய போட்டி CSS கோப்பை நிறைய வலியுறுத்துகிறது, மேலும் நாங்கள் உணராமல் எங்கள் வலைத்தளத்தை கனமான குறியீடு மூலம் பயன்படுத்துகிறோம்.



நுழைகிறது, குறைத்தல் ..

மினிஃபை CSS இல் இந்த கட்டுரையுடன் நகரும்

என்ன குறுக்குப்படுத்தல் ?

உங்கள் குறியீட்டை குறைந்தபட்ச கோப்பு அளவிற்கு குறைக்க மினிஃபிகேஷன் உங்களை அனுமதிக்கிறது, இது குறியீட்டை பாதிக்காது மற்றும் கோப்பு அளவைக் குறைக்கிறது. செயல்பாட்டில், உங்கள் வலைத்தளத்தின் அசல் தன்மையை எங்கும் பாதிக்காத தேவையற்ற இடைவெளி மற்றும் எழுத்துக்களை நீக்கலாம். குறியீட்டிலிருந்து தவிர்க்கப்பட வேண்டிய சில விஷயங்கள்:

  • இடைவெளி எழுத்துக்கள்
  • புதிய வரி எழுத்துக்கள்
  • டிலிமிட்டர்களைத் தடு
  • கருத்துரைகள்
  • மாறி பெயர்களைக் குறைத்தல்

உங்கள் வலைத்தளத்தை இயக்க இந்த காரணிகள் ஈடுபடவில்லை, அதற்கு பதிலாக கோப்பை கனமாக மாற்றவும், வலைத்தள ஏற்றுதல் நேரத்தை அதிகரிக்கவும்.

குறியீட்டின் வாசிப்புத்திறன் இயந்திரம் புரிந்துகொள்வதிலிருந்து முற்றிலும் பிரத்தியேகமானது. புரிந்துகொள்ளவும் இயக்கவும் வலை உலாவிக்கு எழுத்துகளுக்கு இடையே கூடுதல் இடைவெளி தேவையில்லை. எனவே, அவற்றைக் குறைக்க முயற்சிக்கவும், CSS மற்றும் HTML குறியீட்டைக் குறைக்கவும்.

ஒரு எடுத்துக்காட்டு எடுத்துக்கொள்வோம்:

#myContent {font-family: Montserrat} #myContent {font-size: 90%}

எனது CSS ஐக் குறைக்கவும்

அசல் மற்றும் குறைக்கப்பட்ட கோப்பில் கிட்டத்தட்ட 48% வித்தியாசம். 178 பைட்டுகளால் குறைக்கப்பட்டது. மினிஃபிகேஷனுக்குப் பிறகு
#myContent {font-family: Arialfont-size: 90%}

வணக்கம் உலகம்!

மினிஃபை CSS இல் இந்த கட்டுரையுடன் நகரும்

ஏன் குறுக்குப்படுத்தல் தேவையா?

வலைத்தள ஏற்றுதல் நேரத்தை மேம்படுத்த. ஒரு வலைத்தளம் வசதிக்கேற்ப ஏற்றப்படுவதற்கு காத்திருப்பதை யாரும் விரும்புவதில்லை. பல விருப்பங்கள் இருப்பதால், மக்கள் இன்னொன்றுக்கு மாற முனைகிறார்கள். எனவே, கோப்பு அளவைக் குறைப்பது நல்லது.

மினிஃபை CSS இல் இந்த கட்டுரையுடன் நகரும்

நீங்கள் எப்படி minify CSS, JS, HTML குறியீடு?

குறைக்க, ஆன்லைனில் ஏராளமான கருவிகள் உள்ளன, அவை குறியீடு தளத்தை குறைக்க உதவும். கைமுறையாக இதைச் செய்ய நீங்கள் தேர்வுசெய்யலாம், ஆனால் ஒரு பெரிய குறியீடு தளத்திற்கு உங்கள் CSS கோப்பைக் குறைக்க பின்வரும் கருவிகளில் ஏதேனும் ஒன்றைப் பயன்படுத்துவது நல்லது:

CSSminifier.com: பயன்படுத்த மிகவும் எளிமையான கருவி. இடதுபுறத்தில் குறியீட்டை நகலெடுத்து, குறைக்கப்பட்ட கோப்பை உருவாக்கி பதிவிறக்கவும். குறைக்கப்பட்ட கோப்பில் நீட்டிப்பு இருக்கும் .min.

உங்கள் குறைக்கப்பட்ட CSS கோப்பில் dem.min.css நீட்டிப்பு இருக்கும்.

Smallseotools.com: உங்கள் குறியீட்டை நகலெடுக்கவும் அல்லது உங்கள் குறியீடு கோப்பை பதிவேற்றவும். இது உங்கள் குறியீட்டைக் குறைக்கும் மற்றும் அதை நகலெடுக்க அல்லது பதிவிறக்க அனுமதிக்கிறது.

தன்னியக்கமாக்கு: இது உங்கள் வேர்ட்பிரஸ் கருவிகளில் சேர்க்கக்கூடிய சொருகி. ஒரு சொருகி என, உங்கள் CSS குறியீட்டைக் குறைக்க நீங்கள் தேர்வு செய்யலாம்.

கோப்பு எப்போது குறைக்கப்படுகிறது, எப்போது இல்லை என்பதை டெவலப்பருக்கு புரிந்துகொள்வது எளிது. ஒரு சிறிய கோப்பில் நீட்டிப்பு இருக்கும் .min.

மினிஃபை CSS இல் இந்த கட்டுரையுடன் நகரும்

நீங்கள் எப்போது அதை செய்ய வேண்டும்?

நீங்கள் குறியீட்டை எழுதி, பதிலுக்காக சேவையகத்தில் அனுப்ப வேண்டியிருக்கும் போது, ​​மினிஃபிகேஷன் முதன்மையாக செய்யப்பட வேண்டும். கோப்புகள் குறைக்கப்பட்டவுடன், மினிஃபைட் பதிப்புகள் பயனர்களுக்கு விநியோகிக்கப் பயன்படுகின்றன.

நன்மைகள் குறுக்குப்படுத்தல் ?

கோப்பு அளவு குறைப்பு: கூடுதல் இடைவெளியை அகற்றுவதன் மூலமும், மாறி பெயர்களைக் குறைப்பதன் மூலமும், கருத்துகளை அகற்றுவதன் மூலமும், கோப்பு அளவு கிட்டத்தட்ட 30-60% வரை குறைக்கப்படுகிறது. வேகமாக ஏற்றுதல்: நெட்வொர்க்கில் அனுப்ப குறைந்த தரவு இருப்பதால், வலைத்தளம் முன்பை விட வேகமாக ஏற்றுகிறது. குறைந்த அலைவரிசை செலவு: தேவையற்ற தரவு அகற்றப்படும்போது, ​​தேவைப்படும் அலைவரிசை மிகக் குறைவு, எனவே செலவும் ஆகும்.

நினைவில் கொள்ள வேண்டிய விஷயங்கள்:

மினிஃபிகேஷனை முயற்சிக்கும் முன்பே, உங்கள் குறியீடு வரம்புகளை மீறாது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். ஓட்டம் சீர்குலைக்கப்படக்கூடாது மற்றும் செயல்பாடு முகம் இல்லாமல் இருக்க வேண்டும். மினிஃபிகேஷனுக்குப் பிறகும் உங்கள் குறியீடு இதேபோல் இயங்குகிறதா என்பதை நீங்கள் சரிபார்க்க வேண்டும்.
ஒரு சிறந்த நடைமுறையாக நீங்கள் எப்போதும் ஒரு டெம்ப்ளேட்டை தயாராக வைத்திருக்கலாம். உள்ளமைக்கப்பட்ட வார்ப்புருவில் உங்கள் மாற்றங்களைச் செய்யுங்கள், இது உங்களுக்கு தாராளமான நேரத்தை மிச்சப்படுத்தும்.

இது சுருக்கத்திற்கு ஒத்ததா?

சரி, வலுவாக இல்லை. குறுக்குவெட்டு சுருக்கத்தை விட வேறுபட்டது. சுருக்கமானது ஒரு சிறிய கோப்பை மேலும் குறைக்கச் செய்கிறது, ஆனால் குறியீடு ஸ்டைலிங் மற்றும் கட்டமைப்பை பாதிக்காது.
கோப்பு மினிஃபைட் செய்யப்பட்டு பின்னர் ஒரு ஜிப்பாக சுருக்கப்பட்டு ஒரு கிளையன்ட் வலைத்தளத்தை அணுகும்படி கோரும்போது பிணையத்தில் அனுப்பப்படும். கோப்பு பின்னர் சுருக்கப்படாமல் பயன்படுத்தப்படுகிறது.

எடுத்துக்காட்டுகள்:

குறைப்பதற்கு முன்:

சேவை
  • வீடு

மினிஃபிகேஷனுக்குப் பிறகு:

சேவை
  • வீடு

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

மினிஃபிகேஷன் நுட்பத்துடன் போதுமான அளவு ஈர்க்கப்பட்டதா?

பின்னர் நீங்களே முயற்சி செய்யுங்கள். உங்கள் கோப்பின் சுமையை குறைத்து, உங்கள் வலைத்தளம் அனைத்து பயனர்களுக்கும் சுதந்திரமாக ஓடட்டும்!

இது CSS இல் Minify இல் இந்த கட்டுரையின் முடிவிற்கு நம்மைக் கொண்டுவருகிறது.

வலை அபிவிருத்தி பற்றி மேலும் அறிய நீங்கள் விரும்பினால், பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி ஈர்க்கக்கூடிய வலைத்தளங்களை எவ்வாறு உருவாக்குவது மற்றும் அதை அமேசான் எளிய சேமிப்பக சேவைக்கு (S3) பயன்படுத்துவது எப்படி என்பதை அறிய வலை அபிவிருத்தி சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.

நீங்கள் இன்னும் ஆர்வமாக இருந்தால், உங்களுக்கு ஏதேனும் கேள்வி இருந்தால், இந்த “CSS இல் சிறிதாக்கு” ​​வலைப்பதிவின் கருத்துப் பிரிவில் இடுகையிடலாம், விரைவில் நாங்கள் உங்களிடம் வருவோம்.