CSS பிரிப்பு விதி: உலகளாவிய பார்வையாளர்களுக்கான அறிவார்ந்த குறியீடு பிரிப்புடன் வலை செயல்திறனில் புரட்சி

நவீன வலை மேம்பாட்டின் உலகில், செயல்திறன் மிகவும் முக்கியமானது. மெதுவாக ஏற்றப்படும் வலைத்தளம் பயனர்களை அந்நியப்படுத்தலாம், மாற்றங்களைத் தடுக்கலாம், மேலும் ஒரு பிராண்டின் உலகளாவிய அணுகலை கணிசமாக பாதிக்கலாம். ஜாவாஸ்கிரிப்ட் பெரும்பாலும் மேம்படுத்தல் விவாதங்களில் முக்கிய இடத்தைப் பிடித்தாலும், பெரும்பாலும் கவனிக்கப்படாத பெரிய காஸ்கேடிங் ஸ்டைல் ​​ஷீட்கள் (CSS) சமமான குறிப்பிடத்தக்க சிக்கலாக இருக்கலாம். இங்குதான் "CSS பிரிப்பு விதி" – அல்லது இன்னும் பரந்த அளவில், CSS குறியீடு பிரிப்பு – ஒரு முக்கியமான உத்தியாக வெளிப்படுகிறது. இது ஒரு முறையான W3C விவரக்குறிப்பு அல்ல, மாறாக CSS ஐ சிறிய, நிர்வகிக்கக்கூடிய பகுதிகளாக புத்திசாலித்தனமாகப் பிரித்து ஏற்றுதல் மற்றும் ரெண்டரிங் செயல்முறைகளை மேம்படுத்துவதை உள்ளடக்கிய ஒரு பரவலாக ஏற்றுக்கொள்ளப்பட்ட சிறந்த நடைமுறையாகும். பல்வேறு பிணைய நிலைமைகள் மற்றும் சாதனத் திறன்களைக் கொண்ட உலகளாவிய பார்வையாளர்களுக்கு, இந்த "CSS பிரிப்பு விதி"யை ஏற்றுக்கொள்வது ஒரு மேம்படுத்தல் மட்டுமல்ல; உலகளவில் நிலையான திரவ மற்றும் ஈடுபாட்டுடன் கூடிய பயனர் அனுபவத்தை வழங்குவதற்கு இது ஒரு அவசியமாகும்.

CSS குறியீடு பிரிப்பு பற்றிய புரிதல்: வெறும் ஒரு "விதி"யை விட அதிகம்

அதன் மையத்தில், CSS குறியீடு பிரிப்பு என்பது ஒரு பெரிய, ஒற்றை CSS கோப்பை பல, சிறிய மற்றும் மிகவும் இலக்கு வைக்கப்பட்ட கோப்புகளாகப் பிரிக்கும் ஒரு நடைமுறையாகும். "விதி" என்ற அம்சம் ஒரு வழிகாட்டும் கொள்கையை குறிக்கிறது: தற்புதிய பார்வை அல்லது கூறுகள் (component) க்கு முற்றிலும் தேவையான CSS ஐ மட்டுமே ஏற்றவும். நூற்றுக்கணக்கான பக்கங்கள் மற்றும் சிக்கலான கூறுகளைக் கொண்ட ஒரு பெரிய வலைத்தளத்தை கற்பனை செய்து பாருங்கள். பிரித்தல் இல்லாமல், ஒவ்வொரு பக்கமும் ஏற்றப்படும்போது முழு ஸ்டைல்ஷீட்டையும் பதிவிறக்கம் செய்ய வேண்டியிருக்கும், இதில் அந்த நேரத்தில் பயனருக்குத் தெரியாத தளத்தின் பகுதிகளுக்கான ஸ்டைல்களும் அடங்கும். இந்த தேவையற்ற பதிவிறக்கம் ஆரம்ப சுமையைப் பெருக்கி, முக்கியமான ரெண்டரிங்கை தாமதப்படுத்தி, மதிப்புமிக்க அலைவரிசையை பயன்படுத்துகிறது, குறிப்பாக மெதுவான இணைய உள்கட்டமைப்பு உள்ள பகுதிகளில் இது மிகவும் தீங்கு விளைவிக்கும்.

பாரம்பரிய வலை மேம்பாட்டில், அனைத்து CSS உம் பொதுவாக ஒரு பெரிய கோப்பில் தொகுக்கப்படும், style.css. சிறிய திட்டங்களில் நிர்வகிக்க எளிதாக இருந்தாலும், பயன்பாடுகள் வளரும்போது இந்த அணுகுமுறை விரைவாக நிலைத்தன்மையற்றதாக மாறும். "CSS பிரிப்பு விதி" இந்த ஒற்றை சிந்தனை முறையை சவால் செய்கிறது, ஸ்டைல்கள் பிரிக்கப்பட்டு தேவைப்படும்போது ஏற்றப்படும் ஒரு மட்டு அணுகுமுறையை ஆதரிக்கிறது. இது கோப்பின் அளவைப் பற்றியது மட்டுமல்ல; இது உலாவி ஆரம்ப கோரிக்கையிலிருந்து திரையில் பிக்சல்களை இறுதி வரைவது வரை முழு ரெண்டரிங் பைப்லைன் பற்றியது. CSS ஐ மூலோபாயமாகப் பிரிப்பதன் மூலம், டெவலப்பர்கள் "முக்கிய ரெண்டரிங் பாதையை" கணிசமாக குறைக்க முடியும், இது விரைவான முதல் உள்ளடக்கமான ஓவியம் (FCP) மற்றும் மிகப்பெரிய உள்ளடக்கமான ஓவியம் (LCP) அளவீடுகளுக்கு வழிவகுக்கிறது, இவை உணரப்பட்ட செயல்திறன் மற்றும் பயனர் திருப்தியின் முக்கிய குறிகாட்டிகளாகும்.

உலகளாவிய வலை செயல்திறனுக்கு CSS குறியீடு பிரிப்பு ஏன் அவசியமானது

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

கணிசமாக மேம்படுத்தப்பட்ட ஆரம்ப ஏற்ற செயல்திறன்

• குறைக்கப்பட்ட ஆரம்ப சுமை: ஒரு பெரிய CSS கோப்பைப் பதிவிறக்குவதற்குப் பதிலாக, உலாவி ஆரம்ப பார்வைக்கு உடனடியாகத் தேவையான ஸ்டைல்களை மட்டுமே பெறுகிறது. இது முதல் கோரிக்கையின் போது மாற்றப்படும் தரவின் அளவை கணிசமாகக் குறைக்கிறது, இது உலகெங்கிலும் உள்ள பயனர்களுக்கு விரைவான தொடக்கத்திற்கு வழிவகுக்கிறது. வரையறுக்கப்பட்ட தரவு திட்டங்கள் அல்லது அதிக தாமதம் உள்ள பகுதிகளில் உள்ள பயனர்களுக்கு, இது குறிப்பிடத்தக்க செலவு சேமிப்பு மற்றும் மிகக் குறைந்த சோர்வான அனுபவமாக அமையலாம்.
• வேகமான முதல் உள்ளடக்கமான ஓவியம் (FCP): FCP ஆனது உள்ளடக்கத்தின் முதல் பிக்சல் திரையில் வரையப்படும்போது அளவிடுகிறது. ஆரம்ப ரெண்டருக்குத் தேவையான முக்கியமான CSS ஐ மட்டும் வழங்குவதன் மூலம், உலாவி அர்த்தமுள்ள உள்ளடக்கத்தை மிக விரைவாகக் காட்ட முடியும். இது அனைத்து ஸ்டைல்களும் ஏற்றப்படுவதற்கு முன்பே வலைத்தளம் பயனருக்கு வேகமானதாக உணர்வை ஏற்படுத்தும். உலகளாவிய சூழலில், பிணைய நிலைமைகள் கணிசமாக மாறுபடும் இடத்தில், ஒரு விரைவான FCP ஆனது பயனர் தளத்தில் தங்குவதற்கும் அல்லது அதை விட்டு வெளியேறுவதற்கும் உள்ள வித்தியாசமாக இருக்கலாம்.
• மேம்படுத்தப்பட்ட மிகப்பெரிய உள்ளடக்கமான ஓவியம் (LCP): LCP ஆனது மிகப்பெரிய உள்ளடக்க உறுப்பு (ஒரு படம் அல்லது ஒரு உரைத் தொகுதி போன்றவை) எப்போது தெரியும் என்பதை அளவிடுகிறது. இந்த உறுப்பை ஸ்டைல் ​​செய்வதற்கு பொறுப்பான CSS ஒரு பெரிய, மேம்படுத்தப்படாத கோப்பிற்குள் புதைக்கப்பட்டிருந்தால், LCP தாமதமாகும். குறியீடு பிரிப்பு முக்கிய உள்ளடக்கத்திற்கான ஸ்டைல்கள் முன்னுரிமை அளிக்கப்படுவதை உறுதிசெய்கிறது, இதனால் முதன்மை உள்ளடக்கம் வேகமாக தோன்றி, பக்க ஏற்றுதல் வேகத்தைப் பற்றிய பயனரின் கருத்தை மேம்படுத்துகிறது.

மேம்படுத்தப்பட்ட அளவிடுதிறன் மற்றும் பராமரிப்புத்திறன்

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

• கூறு அடிப்படையிலான மேம்பாடு: React, Vue மற்றும் Angular போன்ற நவீன கட்டமைப்புகளில், பயன்பாடுகள் மீண்டும் பயன்படுத்தக்கூடிய கூறுகளிலிருந்து உருவாக்கப்படுகின்றன. குறியீடு பிரிப்பு ஒவ்வொரு கூறுகளும் அதன் சொந்த ஸ்டைல்களை எடுத்துச் செல்ல அனுமதிக்கிறது, ஒரு கூறு ஏற்றப்படும்போது, அதன் தொடர்புடைய CSS மட்டுமே பெறப்படுவதை உறுதிசெய்கிறது. இந்த மூடுறையாக்கம் ஸ்டைல் ​​மோதல்களைத் தடுக்கிறது மற்றும் கூறுகளை உண்மையாக போர்ட்டபிள் ஆக்குகிறது.
• எளிதான பிழைத்திருத்தம் மற்றும் மேம்பாடு: ஸ்டைல்கள் தனிமைப்படுத்தப்படும்போது, பிழைத்திருத்தம் கணிசமாக எளிதாகிறது. டெவலப்பர்கள் ஒரு சிறிய, பிரத்யேக கோப்பிற்குள் ஒரு ஸ்டைலிங் சிக்கலின் மூலத்தை விரைவாகக் கண்டறிய முடியும், ஆயிரக்கணக்கான வரிகள் உலகளாவிய CSS ஐத் தேடுவதற்குப் பதிலாக. இது மேம்பாட்டு சுழற்சியை துரிதப்படுத்துகிறது மற்றும் ஒட்டுமொத்த தளத்தைப் பாதிக்கும் பிழைகளின் நிகழ்தகவைக் குறைக்கிறது.
• குறைக்கப்பட்ட "பயன்படுத்தப்படாத" CSS: காலப்போக்கில், உலகளாவிய ஸ்டைல்ஷீட்கள் "பயன்படுத்தப்படாத" அல்லது பயன்படுத்தப்படாத CSS விதிகளை சேகரிக்கின்றன. குறியீடு பிரிப்பு, குறிப்பாக PurgeCSS போன்ற கருவிகளுடன் இணைக்கும்போது, ஒரு குறிப்பிட்ட பார்வை அல்லது கூறுக்கு உண்மையாகத் தேவைப்படுவதை மட்டுமே சேர்ப்பதன் மூலம் இந்த பயன்படுத்தப்படாத ஸ்டைல்களை நீக்க உதவுகிறது, இதனால் கோப்பு அளவுகள் மேலும் குறைகின்றன.

பல்வேறு பிணையங்களில் மேம்படுத்தப்பட்ட பயனர் அனுபவம்

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

• பிணைய தாமதத்திற்கு நெகிழ்வுத்தன்மை: சிறிய, இணையாக உள்ள CSS கோரிக்கைகள் அதிக பிணைய தாமதத்திற்கு மிகவும் நெகிழ்வுத்தன்மை கொண்டவை. ஒரு நீண்ட பதிவிறக்கத்திற்குப் பதிலாக, பல சிறிய பதிவிறக்கங்கள் பெரும்பாலும் வேகமாக முடிக்கப்படலாம், குறிப்பாக HTTP/2 இல், இது ஒரே நேரத்தில் பல ஓடைகளை (streams) சிறப்பாகக் கையாளுகிறது.
• குறைக்கப்பட்ட தரவு நுகர்வு: அளவிடப்பட்ட இணைப்புகளில் உள்ள பயனர்களுக்கு, மாற்றப்படும் தரவின் அளவைக் குறைப்பது ஒரு நேரடி நன்மை. உலகின் பல பகுதிகளில் மொபைல் தரவு விலை உயர்ந்ததாகவோ அல்லது குறைவாகவோ இருக்கும்போது இது மிகவும் பொருத்தமானது.
• நிலையான அனுபவம்: மிகவும் முக்கியமான ஸ்டைல்கள் எல்லா இடங்களிலும் விரைவாக ஏற்றப்படுவதை உறுதி செய்வதன் மூலம், குறியீடு பிரிப்பு புவியியல் இருப்பிடம் அல்லது பிணைய தரம் எதுவாக இருந்தாலும், மிகவும் நிலையான மற்றும் நம்பகமான பயனர் அனுபவத்தை வழங்க உதவுகிறது. இது வலைத்தளத்துடன் நம்பிக்கையையும் ஈடுபாட்டையும் வளர்க்கிறது, வலுவான உலகளாவிய பிராண்ட் இருப்பை உருவாக்குகிறது.

சிறந்த கேச் பயன்பாடு

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

CSS குறியீடு பிரிப்பை செயல்படுத்துவதற்கான பொதுவான சூழ்நிலைகள்

CSS ஐ எங்கு, எப்படி பிரிப்பது என்பதை அடையாளம் காண்பது முக்கியம். "CSS பிரிப்பு விதி" திறம்பட பயன்படுத்தக்கூடிய பொதுவான சூழ்நிலைகள் இங்கே:

கூறு அடிப்படையிலான ஸ்டைல்கள்

நவீன ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளில் (React, Vue, Angular, Svelte), பயன்பாடுகள் கூறுகளின் அடிப்படையில் கட்டமைக்கப்படுகின்றன. ஒவ்வொரு கூறுகளும் அதன் ஸ்டைல்கள் உட்பட தன்னைத்தானே உள்ளடக்கியதாக இருக்க வேண்டும்.

• உதாரணம்: ஒரு Button கூறு அதன் ஸ்டைல்களை (button.css) ஒரு Button பக்கத்தில் ரெண்டர் செய்யப்படும்போது மட்டுமே ஏற்ற வேண்டும். இதேபோல், ஒரு சிக்கலான ProductCard கூறு product-card.css ஐ ஏற்றலாம்.
• செயல்படுத்துதல்: பெரும்பாலும் CSS Modules, CSS-in-JS நூலகங்கள் (எ.கா., Styled Components, Emotion) மூலம் அல்லது கூறு சார்ந்த CSS ஐ பிரித்தெடுக்க உருவாக்க கருவிகளை (build tools) கட்டமைப்பதன் மூலம் அடையப்படுகிறது.

பக்கம் சார்ந்த அல்லது வழி சார்ந்த ஸ்டைல்கள்

ஒரு பயன்பாட்டில் உள்ள வெவ்வேறு பக்கங்கள் அல்லது வழிகள் பெரும்பாலும் தளம் முழுவதும் பகிரப்படாத தனித்துவமான தளவமைப்பு மற்றும் ஸ்டைலிங் தேவைகளைக் கொண்டுள்ளன.

• உதாரணம்: ஒரு இ-காமர்ஸ் தளத்தின் "செக்அவுட் பக்கம்" அதன் "தயாரிப்பு பட்டியல் பக்கம்" அல்லது "பயனர் சுயவிவரப் பக்கம்" ஆகியவற்றிலிருந்து மிகவும் மாறுபட்ட ஸ்டைலிங்கைக் கொண்டிருக்கலாம். தயாரிப்பு பட்டியல் பக்கத்தில் அனைத்து செக்அவுட் ஸ்டைல்களையும் ஏற்றுவது வீண்.
• செயல்படுத்துதல்: இது பொதுவாக தற்போதைய வழியின் அடிப்படையில் CSS கோப்புகளின் டைனமிக் இறக்குமதிகளை உள்ளடக்கியது, பெரும்பாலும் ரூட்டிங் நூலகங்கள் உருவாக்க கருவி உள்ளமைவுகளுடன் இணைந்து செயல்படுகின்றன.

முக்கிய CSS பிரித்தெடுத்தல் (Above-the-Fold ஸ்டைல்கள்)

இது உடனடி வியூபோர்ட்டில் கவனம் செலுத்தும் ஒரு சிறப்பு பிரிப்பு வடிவமாகும். "முக்கிய CSS" என்பது ஒரு பக்கத்தின் ஆரம்ப பார்வையை ஸ்டைல் ​​செய்யப்படாத உள்ளடக்கத்தின் (FOUC) "மின்னல்" இல்லாமல் ரெண்டர் செய்யத் தேவையான குறைந்தபட்ச CSS ஐக் குறிக்கிறது.

• உதாரணம்: பக்கத்தை ஏற்றும் உடனேயே தெரியும் வழிசெலுத்தல் பட்டி, ஹீரோ பகுதி மற்றும் அடிப்படை தளவமைப்பு.
• செயல்படுத்துதல்: கருவிகள் பக்கத்தின் HTML மற்றும் CSS ஐ பகுப்பாய்வு செய்து, இந்த முக்கியமான ஸ்டைல்களை அடையாளம் கண்டு பிரித்தெடுக்கின்றன, அவை பின்னர் HTML இன் <head> குறிச்சொல்லில் நேரடியாக உள்ளிடப்படுகின்றன. வெளிப்புற ஸ்டைல்ஷீட்கள் முழுமையாக ஏற்றப்படுவதற்கு முன்பே இது மிக விரைவான ஆரம்ப ரெண்டரை உறுதிசெய்கிறது.

கருப்பொருள் மற்றும் பிராண்டிங் ஸ்டைல்கள்

பல கருப்பொருள்களை (எ.கா., ஒளி/இருண்ட பயன்முறை) அல்லது வெவ்வேறு பிராண்ட் அடையாளங்களை ஆதரிக்கும் பயன்பாடுகள் பிரிப்பதன் மூலம் பயனடையலாம்.

• உதாரணம்: வெவ்வேறு வாடிக்கையாளர்களுக்கான வெள்ளை-லேபிளிங்கை அனுமதிக்கும் ஒரு B2B SaaS தளம். ஒவ்வொரு வாடிக்கையாளரின் பிராண்டிங் ஸ்டைல்களும் டைனமிக் முறையில் ஏற்றப்படலாம்.
• செயல்படுத்துதல்: வெவ்வேறு கருப்பொருள்கள் அல்லது பிராண்டுகளுக்கான ஸ்டைல்ஷீட்கள் தனித்தனியாக வைக்கப்பட்டு, பயனர் விருப்பம் அல்லது உள்ளமைவின் அடிப்படையில் நிபந்தனையுடன் ஏற்றப்படலாம்.

மூன்றாம் தரப்பு நூலக ஸ்டைல்கள்

வெளிப்புற நூலகங்கள் (எ.கா., Material-UI, Bootstrap, அல்லது சார்ட் நூலகங்கள் போன்ற UI கட்டமைப்புகள்) பெரும்பாலும் தங்கள் சொந்த விரிவான ஸ்டைல்ஷீட்களுடன் வருகின்றன.

• உதாரணம்: ஒரு சார்டிங் நூலகம் பகுப்பாய்வு டாஷ்போர்டில் மட்டுமே பயன்படுத்தப்பட்டால், அதன் CSS அந்த டாஷ்போர்டை அணுகும்போது மட்டுமே ஏற்றப்பட வேண்டும்.
• செயல்படுத்துதல்: விற்பனையாளர் சார்ந்த CSS ஐ அதன் சொந்த தொகுப்பாக வைக்க உருவாக்க கருவிகள் கட்டமைக்கப்படலாம், அது அந்த நூலகத்திற்கான தொடர்புடைய ஜாவாஸ்கிரிப்ட் தொகுப்பு ஏற்றப்படும்போது மட்டுமே ஏற்றப்படும்.

ரெஸ்பான்சிவ் டிசைன் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா குறியீடுகள்

பெரும்பாலும் ஒரே ஸ்டைல்ஷீட்டில் கையாளப்பட்டாலும், மேம்பட்ட சூழ்நிலைகள் மீடியா குறியீடுகளின் அடிப்படையில் CSS ஐப் பிரிப்பதை உள்ளடக்கியிருக்கலாம் (எ.கா., அச்சிடுவதற்கு அல்லது மிக பெரிய திரைகளுக்கு மட்டுமே அந்த நிபந்தனைகள் பூர்த்தி செய்யப்பட்டால் ஸ்டைல்களை ஏற்றுதல்).

• உதாரணம்: அச்சு சார்ந்த ஸ்டைல்கள் (print.css) <link rel="stylesheet" media="print" href="print.css"> உடன் ஏற்றப்படலாம்.
• செயல்படுத்துதல்: <link> குறிச்சொற்களில் உள்ள media பண்புக்கூறுகளைப் பயன்படுத்துவது உலாவிகள் தற்போதைய மீடியா நிபந்தனைகளுடன் பொருந்தாத CSS ஐப் பதிவிறக்குவதைத் தடுக்க அனுமதிக்கிறது.

CSS பிரிப்பு விதியை செயல்படுத்துவதற்கான நுட்பங்கள் மற்றும் கருவிகள்

CSS குறியீடு பிரிப்பை திறம்பட செயல்படுத்துவது பெரும்பாலும் அதிநவீன உருவாக்க கருவிகள் மற்றும் புத்திசாலித்தனமான கட்டடக்கலை முடிவுகளை சார்ந்துள்ளது.

உருவாக்க கருவி ஒருங்கிணைப்புகள்

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

• Webpack:
  • mini-css-extract-plugin: ஜாவாஸ்கிரிப்ட் தொகுப்புகளிலிருந்து CSS ஐ தனி .css கோப்புகளாக பிரித்தெடுப்பதற்கான கருவியாகும். இயல்பாக, Webpack பெரும்பாலும் CSS ஐ ஜாவாஸ்கிரிப்டில் நேரடியாக தொகுப்பதால் இது மிக முக்கியமானது.
  • optimize-css-assets-webpack-plugin (அல்லது Webpack 5+ க்கு css-minimizer-webpack-plugin): பிரித்தெடுக்கப்பட்ட CSS கோப்புகளை minify செய்யவும் மேம்படுத்தவும் பயன்படுத்தப்படுகிறது, இது அவற்றின் அளவை மேலும் குறைக்கிறது.
  • SplitChunksPlugin: முதன்மையாக ஜாவாஸ்கிரிப்டிற்கானது என்றாலும், SplitChunksPlugin ஆனது CSS சங்ஸ்களையும் பிரிப்பதற்காக கட்டமைக்கப்படலாம், குறிப்பாக mini-css-extract-plugin உடன் இணைக்கப்படும்போது. இது விற்பனையாளர் CSS, பொதுவான CSS அல்லது டைனமிக் CSS சங்ஸ்களைப் பிரிக்க விதிகளை வரையறுக்க அனுமதிக்கிறது.
  • டைனமிக் இறக்குமதிகள்: ஜாவாஸ்கிரிப்ட் சங்ஸ்களுக்கான import() தொடரியலைப் பயன்படுத்துவது (எ.கா., import('./my-component-styles.css')) Webpack ஐ அந்த CSS க்கான ஒரு தனி தொகுப்பை உருவாக்கச் சொல்லும், தேவைக்கேற்ப ஏற்றப்படும்.
  • PurgeCSS: பெரும்பாலும் ஒரு Webpack செருகுநிரலாக ஒருங்கிணைக்கப்பட்ட, PurgeCSS உங்கள் HTML மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை ஸ்கேன் செய்து, உங்கள் தொகுப்புகளிலிருந்து பயன்படுத்தப்படாத CSS விதிகளை அடையாளம் கண்டு நீக்குகிறது. இது கோப்பின் அளவை கணிசமாகக் குறைக்கிறது, குறிப்பாக Bootstrap அல்லது Tailwind CSS போன்ற கட்டமைப்புகளுக்கு, அங்கு பல பயன்பாட்டு வகுப்புகள் இருக்கலாம் ஆனால் அனைத்தும் பயன்படுத்தப்படாமல் இருக்கலாம்.
• Rollup:
  • rollup-plugin-postcss அல்லது rollup-plugin-styles: இந்த செருகுநிரல்கள் Rollup ஐ CSS கோப்புகளை செயலாக்கி அவற்றை தனி தொகுப்புகளாக பிரித்தெடுக்க அனுமதிக்கின்றன, Webpack இன் mini-css-extract-plugin ஐப் போலவே. Rollup இன் பலம் நூலகங்கள் மற்றும் தனித்த கூறுகளுக்கான மிகவும் மேம்படுத்தப்பட்ட, சிறிய தொகுப்புகளை உருவாக்குவதில் உள்ளது, இது மாடுலார் CSS பிரிப்புக்கு மிகவும் பொருத்தமானதாக அமைகிறது.
• Parcel:
  • Parcel பூஜ்ஜிய-உள்ளமைவு தொகுப்பை வழங்குகிறது, அதாவது இது பெரும்பாலும் CSS பிரித்தெடுத்தல் மற்றும் பிரித்தலை தானாகவே கையாளும. ஒரு ஜாவாஸ்கிரிப்ட் கோப்பில் ஒரு CSS கோப்பை இறக்குமதி செய்தால், Parcel பொதுவாக அதைக் கண்டறிந்து, அதைச் செயலாக்கி, ஒரு தனி CSS தொகுப்பை உருவாக்கும். அதன் எளிமையில் கவனம் செலுத்துவது விரைவான மேம்பாட்டிற்கு முன்னுரிமை அளிக்கும் திட்டங்களுக்கு ஒரு கவர்ச்சிகரமான விருப்பமாக அமைகிறது.
• Vite:
  • Vite உற்பத்தி உருவாக்கங்களுக்கு உள்நாட்டில் Rollup ஐப் பயன்படுத்துகிறது மற்றும் நம்பமுடியாத வேகமான மேம்பாட்டு சேவையக அனுபவங்களை வழங்குகிறது. இது CSS செயலாக்கத்தை உள்ளார்ந்து ஆதரிக்கிறது மற்றும், Parcel ஐப் போலவே, நிலையான CSS இறக்குமதிகளைப் பயன்படுத்தும்போது CSS ஐ இயல்புநிலையாக தனி கோப்புகளாக பிரித்தெடுக்க வடிவமைக்கப்பட்டுள்ளது. இது CSS Modules மற்றும் CSS முன்-செயலிகளுடன் (preprocessors) சீராக செயல்படுகிறது.

கட்டமைப்பு சார்ந்த மற்றும் கட்டடக்கலை அணுகுமுறைகள்

பொதுவான பண்டலர்களைத் தாண்டி, கட்டமைப்புகளில் ஒருங்கிணைக்கப்பட்ட குறிப்பிட்ட அணுகுமுறைகள் CSS ஐ நிர்வகிக்கவும் பிரிக்கவும் தனித்துவமான வழிகளை வழங்குகின்றன.

• CSS Modules:
  • CSS Modules ஆனது ஸ்கோப் செய்யப்பட்ட CSS ஐ வழங்குகிறது, அதாவது வகுப்புப் பெயர்கள் மோதல்களைத் தடுக்க உள்ளூர் ஸ்கோப் செய்யப்பட்டவை. நீங்கள் ஒரு CSS தொகுதியை ஒரு ஜாவாஸ்கிரிப்ட் கூறுக்கு இறக்குமதி செய்யும்போது, உருவாக்க செயல்முறை பொதுவாக அந்த CSS ஐ ஒரு தனி கோப்பாக பிரித்தெடுக்கிறது, அது கூறின் தொகுப்புடன் தொடர்புடையது. இது கூறு-நிலை ஸ்டைல் ​​தனிமைப்படுத்தல் மற்றும் தேவைக்கேற்ப ஏற்றுதலை உறுதி செய்வதன் மூலம் "CSS பிரிப்பு விதி"யை இயல்பாக ஆதரிக்கிறது.
• CSS-in-JS நூலகங்கள் (எ.கா., Styled Components, Emotion):
  • இந்த நூலகங்கள் குறிச்சொல் டெம்ப்ளேட் லிட்டரல்கள் அல்லது பொருள்களைப் பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட் கூறுகளுக்குள் நேரடியாக CSS ஐ எழுத அனுமதிக்கின்றன. ஒரு முக்கிய நன்மை என்னவென்றால், ஸ்டைல்கள் தானாகவே கூறுடன் பிணைக்கப்படுகின்றன. உருவாக்க செயல்முறையின் போது, பல CSS-in-JS நூலகங்கள் சர்வர்-பக்க ரெண்டரிங்கிற்கான முக்கியமான CSS ஐப் பிரித்தெடுக்கலாம் மற்றும் தனித்துவமான வகுப்புப் பெயர்களையும் உருவாக்கலாம், திறம்பட கூறு மட்டத்தில் ஸ்டைல்களைப் பிரிக்கலாம். இந்த அணுகுமுறை அவற்றின் தொடர்புடைய கூறு இருக்கும்போது மட்டுமே ஸ்டைல்களை ஏற்றும் யோசனையுடன் இயற்கையாகவே ஒத்துப்போகிறது.
• பயன்பாட்டு-முதல் CSS கட்டமைப்புகள் (எ.கா., Tailwind CSS உடன் JIT/Purge):
  • Tailwind CSS போன்ற கட்டமைப்புகள் "பிரித்தல்" என்ற யோசனைக்கு எதிராக ஒரு ஒற்றை, மிகப்பெரிய பயன்பாட்டு ஸ்டைல்ஷீட்டைக் கொண்டிருப்பதாகத் தோன்றினாலும், அவற்றின் நவீன Just-In-Time (JIT) முறை மற்றும் சுத்திகரிப்பு திறன்கள் உண்மையில் இதேபோன்ற விளைவை அடைகின்றன. JIT முறை நீங்கள் HTML எழுதும்போது தேவைக்கேற்ப CSS ஐ உருவாக்குகிறது, நீங்கள் உண்மையில் பயன்படுத்தும் பயன்பாட்டு வகுப்புகளை மட்டுமே உள்ளடக்குகிறது. ஒரு உற்பத்தி உருவாக்கத்தில் PurgeCSS உடன் இணைக்கப்படும்போது, பயன்படுத்தப்படாத எந்த பயன்பாட்டு வகுப்புகளும் அகற்றப்பட்டு, மிகச்சிறிய, மிகவும் மேம்படுத்தப்பட்ட CSS கோப்பு உருவாகிறது, இது பயன்படுத்தப்படும் குறிப்பிட்ட வகுப்புகளுக்கு ஏற்றவாறு "பிரித்த" பதிப்பாக திறம்பட செயல்படுகிறது. இது பல கோப்புகளாக பிரிப்பது அல்ல, மாறாக ஒரு கோப்பிலிருந்து பயன்படுத்தப்படாத விதிகளைப் பிரித்தெடுப்பது, சுமையைக் குறைப்பதன் மூலம் ஒத்த செயல்திறன் நன்மைகளை அடைகிறது.

முக்கிய CSS உருவாக்கும் கருவிகள்

இந்தக் கருவிகள் FOUC ஐத் தடுக்க "above-the-fold" CSS ஐ பிரித்தெடுக்கவும் உள்ளிடவும் குறிப்பாக வடிவமைக்கப்பட்டுள்ளன.

• Critters / Critical CSS: critters (Google Chrome Labs இலிருந்து) அல்லது critical (ஒரு Node.js தொகுதி) போன்ற கருவிகள் ஒரு பக்கத்தின் HTML மற்றும் இணைக்கப்பட்ட ஸ்டைல்ஷீட்களை பகுப்பாய்வு செய்து, வியூபோர்ட்டுக்கு எந்த ஸ்டைல்கள் அவசியமானவை என்பதைத் தீர்மானித்து, பின்னர் அந்த ஸ்டைல்களை நேரடியாக HTML இன் <head> இல் உள்ளிடுகின்றன. மீதமுள்ள CSS பின்னர் ஒத்திசைவற்ற முறையில் ஏற்றப்படலாம், ரெண்டர்-தடுக்கும் நேரத்தைக் குறைக்கிறது. இது ஆரம்ப ஏற்ற செயல்திறனை மேம்படுத்துவதற்கு, குறிப்பாக மெதுவான இணைப்புகளில் உள்ள உலகளாவிய பயனர்களுக்கு ஒரு சக்திவாய்ந்த நுட்பமாகும்.
• PostCSS செருகுநிரல்கள்: PostCSS என்பது ஜாவாஸ்கிரிப்ட் செருகுநிரல்களுடன் CSS ஐ மாற்றியமைப்பதற்கான ஒரு கருவியாகும். மேம்படுத்துதல், ஆட்டோப்ரிஃபிக்ஸ் செய்தல், மற்றும் முக்கியமான CSS ஐ பிரித்தெடுத்தல் அல்லது விதிகளின் அடிப்படையில் ஸ்டைல்ஷீட்களைப் பிரித்தல் போன்ற பணிகளுக்கு பல செருகுநிரல்கள் உள்ளன.

CSS பிரிப்பு விதியை செயல்படுத்துதல்: ஒரு நடைமுறை பணிப்பாய்வு

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

1. உங்கள் தற்போதைய CSS சுமையை பகுப்பாய்வு செய்யவும்

• பயன்படுத்தப்படாத CSS ஐ அடையாளம் காண உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும் (எ.கா., Chrome DevTools' Coverage tab). இது ஒரு குறிப்பிட்ட பக்கத்தில் உங்கள் தற்போதைய ஸ்டைல்ஷீட்டில் எவ்வளவு உண்மையில் பயன்படுத்தப்படுகிறது என்பதைக் காண்பிக்கும்.
• Lighthouse போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் பக்க ஏற்ற செயல்திறனைப் பதிவு செய்யவும். FCP, LCP மற்றும் "render-blocking resources ஐ நீக்கவும்" போன்ற அளவீடுகளுக்கு மிகுந்த கவனம் செலுத்துங்கள். இது உங்கள் தற்போதைய CSS இன் தாக்கத்தை எடுத்துக்காட்டும்.
• உங்கள் பயன்பாட்டின் கட்டமைப்பை புரிந்து கொள்ளுங்கள். நீங்கள் கூறுகளைப் பயன்படுத்துகிறீர்களா? தனித்தனி பக்கங்கள் அல்லது வழிகள் உள்ளதா? இது இயற்கையான பிரிப்பு புள்ளிகளை தீர்மானிக்க உதவுகிறது.

2. பிரிப்பு புள்ளிகள் மற்றும் உத்திகளை அடையாளம் காணவும்

• கூறு-நிலை: கூறு அடிப்படையிலான பயன்பாடுகளுக்கு, CSS ஐ அதன் தொடர்புடைய கூறுடன் தொகுக்க இலக்கு வைக்கவும்.
• வழி/பக்கம்-நிலை: பல-பக்க பயன்பாடுகளுக்கு அல்லது தனித்தனி வழிகளைக் கொண்ட ஒற்றை-பக்க பயன்பாடுகளுக்கு, ஒரு வழிக்கு குறிப்பிட்ட CSS தொகுப்புகளை ஏற்ற கருத்தில் கொள்ளவும்.
• முக்கிய பாதை: ஆரம்ப வியூபோர்ட்டிற்கான முக்கியமான CSS ஐ எப்போதும் பிரித்தெடுக்கவும் மற்றும் உள்ளிடவும்.
• விற்பனையாளர்/பகிரப்பட்ட: மூன்றாம் தரப்பு நூலக CSS மற்றும் பயன்பாட்டின் பல பகுதிகளில் பயன்படுத்தப்படும் பொதுவான ஸ்டைல்களை ஒரு கேச் செய்யப்பட்ட விற்பனையாளர் சன்க் ஆக பிரிக்கவும்.

3. உங்கள் உருவாக்க கருவிகளை கட்டமைக்கவும்

• Webpack:
  • CSS ஐ பிரித்தெடுக்க உங்கள் Webpack உள்ளமைவில் mini-css-extract-plugin ஐ நிறுவி உள்ளமைக்கவும்.
  • விற்பனையாளர் CSS மற்றும் டைனமிக் CSS இறக்குமதிகளுக்கான தனி சங்ஸ்களை உருவாக்க SplitChunksPlugin ஐப் பயன்படுத்தவும்.
  • பயன்படுத்தப்படாத ஸ்டைல்களை அகற்ற PurgeCSS ஐ ஒருங்கிணைக்கவும்.
  • CSS கோப்புகள் அல்லது CSS ஐ இறக்குமதி செய்யும் ஜாவாஸ்கிரிப்ட் கோப்புகளுக்கான டைனமிக் import() ஐ அமைக்கவும் (எ.கா., const Component = () => import('./Component.js'); Component.js Component.css ஐ இறக்குமதி செய்தால்).
• மற்ற பண்டலர்கள்: Parcel, Rollup, அல்லது Vite இன் குறிப்பிட்ட CSS கையாளும் உள்ளமைவுகளுக்கான ஆவணங்களைப் பார்க்கவும். பல தானியங்கு பிரித்தல் அல்லது நேரடியான செருகுநிரல்களை வழங்குகின்றன.

4. ஏற்றும் உத்திகளை மேம்படுத்தவும்

• இன்லைன் முக்கியமான CSS: முக்கியமான CSS ஐ உருவாக்கவும் அதை உங்கள் HTML <head> இல் நேரடியாக உட்பொதிக்கவும் கருவிகளைப் பயன்படுத்தவும்.
• ஒத்திசைவற்ற ஏற்றுதல்: முக்கியமானதல்லாத CSS க்கு, ரெண்டர்-தடுப்பதைத் தடுக்க அதை ஒத்திசைவற்ற முறையில் ஏற்றவும். ஒரு பொதுவான நுட்பம் <link rel="preload" as="style" onload="this.rel='stylesheet'"> அல்லது Polyfill.io இன் loadCSS வடிவத்தைப் பயன்படுத்துவதாகும்.
• மீடியா குறியீடுகள்: நிபந்தனையுடன் CSS ஐ ஏற்றுவதற்கு <link> குறிச்சொற்களில் உள்ள media பண்புக்கூறுகளைப் பயன்படுத்தவும் (எ.கா., media="print").
• HTTP/2 Push (கவனமாக பயன்படுத்தவும்): தொழில்நுட்ப ரீதியாக சாத்தியமானாலும், கேச்சிங் சிக்கல்கள் மற்றும் உலாவி செயல்படுத்துதல் சிக்கல்கள் காரணமாக HTTP/2 Push க்கு ஆதரவு குறைந்துள்ளது. உலாவிகள் பொதுவாக வளங்களை முன்னரே கணித்து முன்னரே ஏற்றுவதில் சிறப்பாக செயல்படுகின்றன. முதலில் உலாவி-இயல்பு மேம்படுத்தல்களில் கவனம் செலுத்துங்கள்.

5. சோதி, கண்காணி, மற்றும் திருத்து

• பிரித்தலை செயல்படுத்திய பிறகு, FOUC அல்லது காட்சி பின்னடைவுகளுக்கு உங்கள் பயன்பாட்டை முழுமையாக சோதிக்கவும்.
• Lighthouse, WebPageTest மற்றும் பிற செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தி FCP, LCP மற்றும் ஒட்டுமொத்த ஏற்ற நேரங்களில் ஏற்படும் தாக்கத்தை அளவிடவும்.
• பல்வேறு புவியியல் இருப்பிடங்கள் மற்றும் பிணைய நிலைமைகளில் இருந்து வரும் பயனர்களுக்கான உங்கள் அளவீடுகளைக் கண்காணிக்கவும்.
• உங்கள் பயன்பாடு உருவாகும்போது உங்கள் பிரிப்பு உத்தியை தொடர்ந்து மேம்படுத்தவும். இது ஒரு தொடர்ச்சியான செயல்முறை.

உலகளாவிய பார்வையாளர்களுக்கான மேம்பட்ட பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

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

நேர்த்தியை சமநிலைப்படுத்துதல்: பிரிக்கும் கலை

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

• தொகுதி கூட்டமைப்பை கருத்தில் கொள்ளுங்கள்: மைக்ரோ-முன்புற கட்டமைப்புகளுக்கு, தொகுதி கூட்டமைப்பு (Webpack 5+) வெவ்வேறு பயன்பாடுகளிலிருந்து CSS சங்ஸ்களை டைனமிக் முறையில் ஏற்ற முடியும், இது பொதுவான ஸ்டைல்களைப் பகிர்ந்துகொள்ளும் போது உண்மையிலேயே சுயாதீனமான வரிசைப்படுத்தல்களை அனுமதிக்கிறது.
• HTTP/2 மற்றும் அதற்கு அப்பால்: HTTP/2 இன் மல்டிப்ளெக்சிங் திறன் ஒரே TCP இணைப்பு வழியாக பல கோரிக்கைகளை அனுப்ப அனுமதிக்கிறது, பல சிறிய கோப்புகளுடன் தொடர்புடைய அதிகப்படியான சுமையைக் குறைக்கிறது (HTTP/1.1 இன் கீழ் அதிகப்படியான பிரிப்புடன் ஒரு முந்தைய கவலை). இதன் பொருள் நீங்கள் பொதுவாக அதிக, சிறிய CSS கோப்புகளை அதிக செயல்திறன் அபராதம் இல்லாமல் கொண்டிருக்க முடியும். HTTP/3 (QUIC) இதை மேலும் செம்மைப்படுத்துகிறது, இது பாக்கெட் இழப்பு மற்றும் பிணைய மாற்றங்களுக்கு இன்னும் அதிக நெகிழ்வுத்தன்மை கொண்டது, நிலையற்ற இணைப்புகளில் உள்ள பயனர்களுக்கு பயனளிக்கிறது. இருப்பினும், இந்த முன்னேற்றங்களுடன் கூட, வருமானம் குறையும் ஒரு புள்ளி இன்னும் உள்ளது. இலக்கு புத்திசாலித்தனமான பிரிப்பு, தன்னிச்சையான துண்டு துண்டாக்குதல் அல்ல.

ஸ்டைல் ​​செய்யப்படாத உள்ளடக்கத்தின் (FOUC) "மின்னல்" தடுப்பு

FOUC என்பது உலாவி தேவையான CSS ஏற்றப்படுவதற்கு முன்பு HTML ஐ ரெண்டர் செய்யும்போது நிகழ்கிறது, இதன் விளைவாக ஸ்டைல் ​​செய்யப்படாத உள்ளடக்கம் ஒரு கணநேர "மின்னல்" போல் தோன்றும். இது ஒரு முக்கியமான பயனர் அனுபவ சிக்கல், குறிப்பாக மெதுவான பிணையங்களில் உள்ள பயனர்களுக்கு.

• முக்கிய CSS: முக்கியமான CSS ஐ உள்ளிடுவது FOUC க்கு எதிரான மிகவும் பயனுள்ள பாதுகாப்பு.
• SSR (சர்வர்-பக்க ரெண்டரிங்): நீங்கள் SSR ஐப் பயன்படுத்தினால், சர்வர் HTML ஐ தேவையான CSS ஏற்கனவே உட்பொதிக்கப்பட்டதாகவோ அல்லது தடுப்பற்ற வழியில் இணைக்கப்பட்டதாகவோ ரெண்டர் செய்வதை உறுதிசெய்யவும். Next.js மற்றும் Nuxt.js போன்ற கட்டமைப்புகள் இதை நேர்த்தியாகக் கையாளுகின்றன.
• ஏற்றிகள்/இடம்பிடிப்பவர்கள்: FOUC க்கான நேரடி தீர்வு இல்லாவிட்டாலும், ஸ்கெலட்டன் திரைகள் அல்லது ஏற்றும் குறிகாட்டிகளைப் பயன்படுத்துவது CSS ஏற்றுதல் முழுமையாக மேம்படுத்தப்பட முடியாவிட்டால் தாமதத்தை மறைக்க உதவும்.

கேச் செல்லாததாக்கும் உத்திகள்

உலகளாவிய செயல்திறனுக்கு திறமையான கேச்சிங் மிக முக்கியமானது. CSS கோப்புகள் பிரிக்கப்படும்போது, கேச் செல்லாததாக்குதல் (invalidation) மேலும் நேர்த்தியாகிறது.

• உள்ளடக்க ஹேஷிங்: கோப்பின் உள்ளடக்கத்தின் ஹேஷை அதன் கோப்புப் பெயருடன் சேர்க்கவும் (எ.கா., main.abcdef123.css). உள்ளடக்கம் மாறும்போது, ஹேஷ் மாறுகிறது, புதிய கோப்பை பதிவிறக்க உலாவியை கட்டாயப்படுத்துகிறது, அதே நேரத்தில் பழைய பதிப்புகள் காலவரையின்றி கேச் செய்யப்பட்ட நிலையில் இருக்க அனுமதிக்கிறது. இது நவீன பண்டலர்களுடன் ஒரு நிலையான நடைமுறையாகும்.
• பதிப்பு அடிப்படையிலான செல்லாததாக்குதல்: ஹேஷிங் விட குறைந்த நேர்த்தியானது, ஆனால் அரிதாக மாறும் பகிரப்பட்ட பொதுவான CSS க்கு பயன்படுத்தப்படலாம்.

சர்வர்-பக்க ரெண்டரிங் (SSR) மற்றும் CSS

SSR ஐப் பயன்படுத்தும் பயன்பாடுகளுக்கு, CSS பிரித்தலை சரியாகக் கையாளுவது மிக முக்கியம். FOUC ஐத் தவிர்க்க சர்வர் ஆரம்ப HTML பேலோடில் எந்த CSS ஐ சேர்க்க வேண்டும் என்பதை அறிந்திருக்க வேண்டும்.

• ஸ்டைல்களைப் பிரித்தெடுத்தல்: CSS-in-JS நூலகங்கள் பெரும்பாலும் சர்வர்-பக்க ரெண்டரிங் ஆதரவை வழங்குகின்றன, சர்வரில் ரெண்டர் செய்யப்பட்ட கூறுகளால் பயன்படுத்தப்படும் முக்கியமான ஸ்டைல்களைப் பிரித்தெடுத்து அவற்றை ஆரம்ப HTML இல் செருகுகின்றன.
• SSR-உணர்ந்த தொகுப்பு: சர்வர்-ரெண்டர் செய்யப்பட்ட கூறுகளுக்குத் தேவையான CSS ஐ சரியாக அடையாளம் கண்டு சேர்க்க உருவாக்க கருவிகள் கட்டமைக்கப்பட வேண்டும்.

உலகளாவிய பிணைய தாமதம் மற்றும் CDN உத்திகள்

சரியாகப் பிரிக்கப்பட்ட CSS உடன் கூட, உலகளாவிய பிணைய தாமதம் விநியோகத்தைப் பாதிக்கலாம்.

• உள்ளடக்க விநியோக பிணையங்கள் (CDNs): உங்கள் பிரிக்கப்பட்ட CSS கோப்புகளை புவியியல் ரீதியாக பரவியுள்ள சேவையகங்களில் விநியோகிக்கவும். ஒரு பயனர் உங்கள் தளத்தை கோரும்போது, CSS அருகிலுள்ள CDN எட்ஜ் இடத்திலிருந்து வழங்கப்படுகிறது, தாமதத்தை கணிசமாகக் குறைக்கிறது. இது ஒரு உண்மையான உலகளாவிய பார்வையாளர்களுக்கு தவிர்க்க முடியாதது.
• சேவை பணியாளர்கள்: CSS கோப்புகளை தீவிரமாக கேச் செய்ய முடியும், மீண்டும் வரும் பயனர்களுக்கு உடனடி ஏற்றங்களை வழங்குகிறது, ஆஃப்லைனில் கூட.

தாக்கத்தை அளவிடுதல்: உலகளாவிய வெற்றிக்கான வலை உயிர்ச்சத்துக்கள்

உங்கள் CSS பிரிப்பு முயற்சிகளின் இறுதி அளவுகோல் Core Web Vitals மற்றும் பிற செயல்திறன் அளவீடுகளில் அதன் தாக்கமாகும்.

• மிகப்பெரிய உள்ளடக்கமான ஓவியம் (LCP): முக்கியமான CSS ஏற்றுவதால் நேரடியாக பாதிக்கப்படுகிறது. விரைவான LCP என்பது உங்கள் முக்கிய உள்ளடக்கம் விரைவாகத் தோன்றும் என்பதைக் குறிக்கிறது.
• முதல் உள்ளடக்கமான ஓவியம் (FCP): உள்ளடக்கத்தின் முதல் பகுதி எப்போது ரெண்டர் செய்யப்படுகிறது என்பதைக் காட்டுகிறது. உணரப்பட்ட வேகத்திற்கு நல்லது.
• முதல் உள்ளீட்டு தாமதம் (FID): முதன்மையாக ஒரு ஜாவாஸ்கிரிப்ட் அளவுகோல் என்றாலும், ஒரு பெரிய CSS சுமை பிரதான த்ரெட்டை மறைமுகமாகத் தடுக்கலாம், இது ஊடாடும் தன்மையைப் பாதிக்கும்.
• கூட்டு தளவமைப்பு மாற்றம் (CLS): சரியாக ஏற்றப்படாத CSS (அல்லது தாமதமாக ஏற்றப்படும் எழுத்துருக்கள்) தளவமைப்பு மாற்றங்களை ஏற்படுத்தலாம். முக்கியமான CSS இதைத் தடுக்க உதவுகிறது.
• பல்வேறு பகுதிகள் மற்றும் சாதனங்களில் உண்மையான பயனர் அனுபவத்தைப் புரிந்துகொள்ள நிகழ்நேர பயனர் கண்காணிப்பு (RUM) கருவிகளைப் பயன்படுத்தி இந்த அளவீடுகளை உலகளவில் கண்காணிக்கவும்.

சவால்கள் மற்றும் சாத்தியமான சிக்கல்கள்

மிகவும் பயனுள்ளதாக இருந்தாலும், "CSS பிரிப்பு விதி"யை செயல்படுத்துவது அதன் சவால்கள் இல்லாமல் இல்லை.

உள்ளமைவு சிக்கல்

சிறந்த CSS பிரிப்பிற்கான மேம்பட்ட Webpack அல்லது Rollup உள்ளமைவுகளை அமைப்பது சிக்கலானது, ஏற்றுபவர்கள் (loaders), செருகுநிரல்கள் (plugins) மற்றும் சன்க் செய்யும் உத்திகள் பற்றிய ஆழமான புரிதல் தேவைப்படுகிறது. தவறான உள்ளமைவுகள் நகலெடுக்கப்பட்ட CSS, காணாமல் போன ஸ்டைல்கள் அல்லது செயல்திறன் பின்னடைவுகளுக்கு வழிவகுக்கும்.

சார்பு மேலாண்மை

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

ஸ்டைல் ​​நகல் எடுப்பதற்கான சாத்தியம்

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

விநியோகிக்கப்பட்ட ஸ்டைல்களை பிழைத்திருத்தம் செய்தல்

ஸ்டைல்கள் பல சிறிய கோப்புகளில் பரவியிருக்கும்போது ஸ்டைலிங் சிக்கல்களை பிழைத்திருத்தம் செய்வது மிகவும் சவாலானதாக மாறும். ஒரு குறிப்பிட்ட விதி எந்த CSS கோப்பிலிருந்து உருவாகிறது என்பதை அடையாளம் காண உலாவி டெவலப்பர் கருவிகள் அவசியம். மூல வரைபடங்கள் (source maps) இங்கு மிக முக்கியம்.

CSS குறியீடு பிரிப்பின் எதிர்காலம்

வலை உருவாகும்போது, CSS மேம்படுத்தல் நுட்பங்களும் உருவாகும்.

• கண்டெய்னர் குறியீடுகள்: கண்டெய்னர் குறியீடுகள் போன்ற எதிர்கால CSS அம்சங்கள் மிகவும் உள்ளூர்மயமாக்கப்பட்ட ஸ்டைலிங்கை செயல்படுத்தலாம், இது வியூபோர்ட் அளவை மட்டும் சார்ந்து இல்லாமல் கூறு அளவின் அடிப்படையில் ஸ்டைல்கள் எவ்வாறு தொகுக்கப்படுகின்றன அல்லது ஏற்றப்படுகின்றன என்பதைப் பாதிக்கலாம்.
• உலாவி-இயல்பு CSS Modules?: இது ஒரு ஊகம் என்றாலும், வலை கூறுகள் மற்றும் உள்ளமைக்கப்பட்ட தொகுதி அமைப்புகள் பற்றிய தற்போதைய விவாதங்கள் இறுதியில் ஸ்கோப் செய்யப்பட்ட அல்லது கூறு-நிலை CSS க்கான அதிக இயல்பு உலாவி ஆதரவுக்கு வழிவகுக்கும், இது பிரிப்பின் சில அம்சங்களுக்கு சிக்கலான உருவாக்க கருவிகளைச் சார்ந்து இருப்பதை குறைக்கும்.
• உருவாக்க கருவிகளின் பரிணாமம்: பண்டலர்கள் மேலும் புத்திசாலித்தனமாக மாறிக்கொண்டே இருக்கும், மேலும் அதிநவீன இயல்பு பிரிப்பு உத்திகளையும், மேம்பட்ட சூழ்நிலைகளுக்கான எளிதான உள்ளமைவுகளையும் வழங்கும், உலகளவில் டெவலப்பர்களுக்கு உயர்-செயல்திறன் வலை மேம்பாட்டிற்கான அணுகலை மேலும் ஜனநாயகப்படுத்தும்.

முடிவுரை: உலகளாவிய பார்வையாளர்களுக்கான அளவிடுதிறன் மற்றும் செயல்திறனைத் தழுவுதல்

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

CSS குறியீடு பிரிப்பு பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்

Q1: CSS குறியீடு பிரிப்பு எப்போதும் அவசியமா?

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

Q2: CSS குறியீடு பிரிப்பு SEO ஐ பாதிக்கிறதா?

ஆம், மறைமுகமாகவும் சாதகமாகவும். Google போன்ற தேடுபொறிகள் சிறந்த பயனர் அனுபவத்தை வழங்கும் விரைவாக ஏற்றப்படும் வலைத்தளங்களுக்கு முன்னுரிமை அளிக்கின்றன. CSS குறியீடு பிரிப்பு மூலம் Core Web Vitals அளவீடுகளை (LCP மற்றும் FCP போன்றவை) மேம்படுத்துவதன் மூலம், நீங்கள் சிறந்த தேடல் தரவரிசைக்கு பங்களிக்கிறீர்கள். ஒரு வேகமான தளம் என்பது தேடுபொறி கிராலர்கள் அதிக பக்கங்களை மிகவும் திறமையாக குறியிட முடியும் என்பதையும், பயனர்கள் பவுன்ஸ் ஆவதற்கான வாய்ப்புகள் குறைவு என்பதையும் குறிக்கிறது, இது தேடல் அல்காரிதங்களுக்கு நேர்மறையான ஈடுபாட்டை சமிக்ஞை செய்கிறது.

Q3: எனது CSS கோப்புகளை நான் கைமுறையாகப் பிரிக்க முடியுமா?

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

Q4: CSS குறியீடு பிரிப்பு மற்றும் PurgeCSS இவற்றுக்கிடையே உள்ள வேறுபாடு என்ன?

அவை ஒன்றையொன்று பூர்த்தி செய்பவை ஆனால் வேறுபட்டவை.

• CSS குறியீடு பிரிப்பு: உங்கள் CSS ஐ பல, சிறிய கோப்புகளாகப் (சங்க்ஸ்) பிரிக்கிறது, அவை தேவைப்படும்போது ஏற்றப்படலாம். இதன் நோக்கம் தற்போதைய பார்வைக்குத் தேவையான CSS ஐ மட்டும் அனுப்புவதன் மூலம் ஆரம்ப சுமையைக் குறைப்பதாகும்.
• PurgeCSS (அல்லது CSS க்கான இதே போன்ற "ட்ரீ-ஷேக்கிங்" கருவிகள்): உங்கள் ஸ்டைல்ஷீட்களிலிருந்து பயன்படுத்தப்படாத CSS விதிகளை அடையாளம் கண்டு நீக்க உங்கள் திட்டத்தை பகுப்பாய்வு செய்கிறது. இதன் நோக்கம் "பயன்படுத்தப்படாத" குறியீட்டை நீக்குவதன் மூலம் உங்கள் CSS கோப்புகளின் ஒட்டுமொத்த அளவைக் குறைப்பதாகும்.

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

Q5: HTTP/2 (மற்றும் HTTP/3) CSS பிரிப்பை எவ்வாறு பாதிக்கிறது?

HTTP/2 இன் மல்டிப்ளெக்சிங் திறன் ஒரே TCP இணைப்பு வழியாக பல கோரிக்கைகளை அனுப்ப அனுமதிக்கிறது, பல சிறிய கோப்புகளுடன் தொடர்புடைய அதிகப்படியான சுமையைக் குறைக்கிறது (HTTP/1.1 இன் கீழ் அதிகப்படியான பிரிப்புடன் ஒரு முந்தைய கவலை). இதன் பொருள் நீங்கள் பொதுவாக அதிக, சிறிய CSS கோப்புகளை அதிக செயல்திறன் அபராதம் இல்லாமல் கொண்டிருக்க முடியும். HTTP/3 UDP அடிப்படையிலான QUIC உடன் இதை மேலும் செம்மைப்படுத்துகிறது, இது பாக்கெட் இழப்பு மற்றும் பிணைய மாற்றங்களுக்கு இன்னும் அதிக நெகிழ்வுத்தன்மை கொண்டது, நிலையற்ற இணைப்புகளில் உள்ள பயனர்களுக்கு பயனளிக்கிறது. இருப்பினும், இந்த முன்னேற்றங்களுடன் கூட, வருமானம் குறையும் ஒரு புள்ளி இன்னும் உள்ளது. இலக்கு புத்திசாலித்தனமான பிரிப்பு, தன்னிச்சையான துண்டு துண்டாக்குதல் அல்ல.

Q6: சில CSS உண்மையாகவே உலகளாவியதாக இருந்து எல்லா இடங்களிலும் பயன்படுத்தப்பட்டால் என்ன செய்வது?

உண்மையிலேயே உலகளாவிய ஸ்டைல்களுக்கு (எ.கா., CSS ஐ மீட்டமைத்தல், அடிப்படை அச்சுக்கலை, அல்லது ஒவ்வொரு பக்கத்திலும் தோன்றும் முக்கிய பிராண்டிங் கூறுகள்), அவற்றை ஒரு ஒற்றை, பகிரப்பட்ட "விற்பனையாளர்" அல்லது "பொதுவான" CSS சன்க் இல் வைப்பது பெரும்பாலும் சிறந்தது. இந்த சன்க் உலாவி மற்றும் CDN ஆல் தீவிரமாக கேச் செய்யப்படலாம், அதாவது இது பயனரால் ஒரு முறை மட்டுமே பதிவிறக்கம் செய்யப்பட வேண்டும். அடுத்தடுத்த வழிசெலுத்தல் குறிப்பிட்ட பக்கங்கள் அல்லது கூறுகளுக்கான சிறிய, டைனமிக் CSS சங்ஸ்களை மட்டுமே ஏற்றும். "CSS பிரிப்பு விதி" என்பது பகிரப்பட்ட CSS இல்லை என்பதல்ல; இது குறைந்தபட்ச பகிரப்பட்ட CSS ஐக் குறிக்கிறது, மீதமுள்ளவை நிபந்தனையுடன் ஏற்றப்படும்.

Q7: CSS பிரிப்புடன் டார்க் மோட் அல்லது தீமிங்கை எவ்வாறு கையாள்வது?

இது CSS பிரிப்பிற்கான ஒரு சிறந்த பயன்பாட்டு வழக்கு. உங்கள் ஒளி கருப்பொருள் (light-theme.css) மற்றும் இருண்ட கருப்பொருள் (dark-theme.css) க்கான தனி CSS கோப்புகளை நீங்கள் உருவாக்கலாம். பின்னர், பயனர் விருப்பம் அல்லது கணினி அமைப்புகளின் அடிப்படையில் பொருத்தமான ஸ்டைல்ஷீட்டை டைனமிக் முறையில் ஏற்றலாம்.

• ஜாவாஸ்கிரிப்ட் அடிப்படையிலான: பயனர் அமைப்புகளின் அடிப்படையில் <link> குறிச்சொற்களை நிபந்தனையுடன் சேர்க்க அல்லது அகற்ற ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும், அல்லது சரியான கருப்பொருள் ஸ்டைல்களை செயல்படுத்தும் <body> உறுப்புக்கு ஒரு வகுப்பைப் பயன்படுத்தவும்.
• CSS prefers-color-scheme: ஆரம்ப ஏற்றத்திற்கு, <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark-theme.css"> மற்றும் media="(prefers-color-scheme: light)" href="light-theme.css"> ஐப் பயன்படுத்தி உலாவியை சரியான கருப்பொருளை ஏற்ற அனுமதிக்கலாம். இருப்பினும், முழு பக்க மறுஏற்றம் இல்லாமல் டைனமிக் மாற்றத்திற்கு, ஜாவாஸ்கிரிப்ட் பொதுவாக உள்ளடக்கியது.

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

Q8: CSS முன்-செயலிகள் (Sass, Less, Stylus) பிரிப்புடன் ஒருங்கிணைக்க முடியுமா?

நிச்சயமாக. CSS முன்-செயலிகள் நிலையான CSS ஆக தொகுக்கப்படுகின்றன. உங்கள் உருவாக்க கருவிகள் (Webpack, Rollup, Parcel, Vite) ஏற்றுபவர்கள்/செருகுநிரல்களைப் பயன்படுத்த கட்டமைக்கப்பட்டுள்ளன, அவை முதலில் உங்கள் முன்-செயலிக் குறியீட்டை (எ.கா., .scss to .css) தொகுத்து, பின்னர் பிரித்தல் மற்றும் மேம்படுத்தல் படிகளைப் பயன்படுத்துகின்றன. எனவே, செயல்திறனுக்கான குறியீடு பிரிப்பைப் பயன்படுத்தும் போது நீங்கள் முன்-செயலிகளின் அமைப்பு நன்மைகளைப் பயன்படுத்தலாம்.