ரியாக்ட் டெவ்டூல்ஸ் சுயவிவரம்: கூறு செயல்திறன் பகுப்பாய்வில் தேர்ச்சி பெறுதல்

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

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

ரியாக்ட் டெவ்டூல்ஸ் சுயவிவரம் என்றால் என்ன?

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

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

ரியாக்ட் டெவ்டூல்ஸை நிறுவுதல் மற்றும் அமைத்தல்

சுயவிவரத்தைப் பயன்படுத்தத் தொடங்குவதற்கு முன், உங்கள் உலாவிக்கு ரியாக்ட் டெவ்டூல்ஸ் நீட்டிப்பை நிறுவ வேண்டும். இந்த நீட்டிப்பு Chrome, Firefox மற்றும் Edge ஆகியவற்றிற்கு கிடைக்கிறது. உங்கள் உலாவியின் நீட்டிப்பு கடையில் "React Developer Tools" என்று தேடி பொருத்தமான பதிப்பை நிறுவவும்.

நிறுவப்பட்டதும், நீங்கள் ஒரு ரியாக்ட் பயன்பாட்டில் பணிபுரியும்போது டெவ்டூல்ஸ் தானாகவே கண்டறியும். உங்கள் உலாவியின் டெவலப்பர் கருவிகளைத் திறப்பதன் மூலம் (வழக்கமாக F12 ஐ அழுத்துவதன் மூலம் அல்லது வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுப்பதன் மூலம்) டெவ்டூல்ஸை அணுகலாம். நீங்கள் "⚛️ Components" மற்றும் "⚛️ Profiler" தாவல்களைப் பார்க்க வேண்டும்.

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

சுயவிவரம் மிகவும் பயனுள்ளதாக இருந்தாலும், இது முதன்மையாக வளர்ச்சி சூழல்களுக்காக வடிவமைக்கப்பட்டுள்ளது என்பதைக் கவனத்தில் கொள்ள வேண்டும். உற்பத்தி உருவாக்கங்களில் இதைப் பயன்படுத்துவது குறிப்பிடத்தக்க மேல்நிலையை அறிமுகப்படுத்தலாம். மிகவும் துல்லியமான மற்றும் பொருத்தமான தரவைப் பெற, நீங்கள் ஒரு வளர்ச்சி உருவாக்கத்தை (`NODE_ENV=development`) சுயவிவரம் செய்கிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். உற்பத்தி உருவாக்கங்கள் பொதுவாக வேகத்திற்காக உகந்ததாக்கப்படுகின்றன மற்றும் டெவ்டூல்ஸால் தேவைப்படும் விரிவான சுயவிவரத் தகவலை உள்ளடக்காமல் இருக்கலாம்.

ரியாக்ட் டெவ்டூல்ஸ் சுயவிவரத்தைப் பயன்படுத்துதல்: ஒரு படிப்படியான வழிகாட்டி

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

1. ஒரு சுயவிவர அமர்வைத் தொடங்குதல்

ஒரு சுயவிவர அமர்வைத் தொடங்க, ரியாக்ட் டெவ்டூல்ஸில் உள்ள "⚛️ Profiler" தாவலுக்குச் செல்லவும். "Start profiling" என்று பெயரிடப்பட்ட ஒரு வட்ட பொத்தானைக் காண்பீர்கள். செயல்திறன் தரவைப் பதிவுசெய்யத் தொடங்க இந்த பொத்தானைக் கிளிக் செய்யவும்.

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

2. சுயவிவர அமர்வை நிறுத்துதல்

நீங்கள் போதுமான தரவைப் பிடித்த பிறகு, "Stop profiling" பொத்தானைக் கிளிக் செய்யவும் ("Start profiling" பொத்தானை இது மாற்றும்). சுயவிவரம் பின்னர் பதிவுசெய்யப்பட்ட தரவைச் செயலாக்கி முடிவுகளைக் காண்பிக்கும்.

3. சுயவிவர முடிவுகளைப் புரிந்துகொள்வது

சுயவிவரம் முடிவுகளை பல வழிகளில் வழங்குகிறது, ஒவ்வொன்றும் கூறு செயல்திறன் குறித்த வெவ்வேறு கண்ணோட்டங்களை வழங்குகிறது.

A. Flame Chart

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

Flame Chart-ஐ விளக்குதல்:

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

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

B. Ranked Chart

Ranked Chart கூறுகளின் பட்டியலை அவற்றின் மொத்த ரெண்டரிங் நேரத்தின்படி வரிசைப்படுத்தி வழங்குகிறது. இந்த விளக்கப்படம் பயன்பாட்டின் ஒட்டுமொத்த ரெண்டரிங் நேரத்திற்கு அதிகம் பங்களிக்கும் கூறுகளின் விரைவான கண்ணோட்டத்தை வழங்குகிறது. மேம்படுத்தல் தேவைப்படும் "கனமான ஹிట్టர்களை" அடையாளம் காண இது பயனுள்ளதாக இருக்கும்.

Ranked Chart-ஐ விளக்குதல்:

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

உதாரணம்: Ranked Chart-இன் மேலே `ShoppingCart` கூறு தோன்றினால், அது ஷாப்பிங் கார்ட்டை ரெண்டர் செய்வது ஒரு செயல்திறன் தடை என்பதைக் குறிக்கிறது. நீங்கள் பின்னர் `ShoppingCart` கூற்றை காரணத்தை அடையாளம் காண ஆராயலாம், அதாவது கார்ட் பொருட்களுக்கு திறமையற்ற புதுப்பிப்புகள் அல்லது அதிகப்படியான மறு-ரெண்டர்கள்.

C. Component View

Component View தனிப்பட்ட கூறுகளின் ரெண்டரிங் நடத்தையை ஆய்வு செய்ய உங்களை அனுமதிக்கிறது. Flame Chart அல்லது Ranked Chart-இல் இருந்து ஒரு கூற்றைத் தேர்ந்தெடுத்து அதன் ரெண்டரிங் வரலாறு பற்றிய விரிவான தகவல்களைப் பார்க்கலாம்.

Component View-ஐ விளக்குதல்:

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

உதாரணம்: ஒரு `UserProfile` கூற்றுக்கான Component View-ஐ ஆராய்வதன் மூலம், பயனரின் ஆன்லைன் நிலை மாறும்போதெல்லாம் அது தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்யப்படுவதை நீங்கள் கண்டறியலாம், `UserProfile` கூறு ஆன்லைன் நிலையைக் காட்டாவிட்டாலும் கூட. இது, கூறுவுக்குத் தேவையில்லாத போதிலும், மறு-ரெண்டர்களை ஏற்படுத்தும் ப்ராப்ஸ்களைப் பெறுகிறது என்று அறிவுறுத்துகிறது. ஆன்லைன் நிலை மாறும்போது கூறு மீண்டும் ரெண்டர் செய்வதைத் தடுப்பதன் மூலம் நீங்கள் கூற்றை மேம்படுத்தலாம்.

4. சுயவிவர முடிவுகளை வடிகட்டுதல்

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

உதாரணமாக, ரெண்டர் செய்ய 10ms-க்கு மேல் எடுத்துக்கொண்ட கூறுகளை மட்டும் காட்ட முடிவுகளை வடிகட்டலாம். இது மிகவும் நேரத்தை எடுத்துக்கொள்ளும் கூறுகளை விரைவாக அடையாளம் காண உதவும்.

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

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

1. தேவையற்ற மறு-ரெண்டர்கள்

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

மேம்படுத்தல் நுட்பங்கள்:

• `React.memo()`: ப்ராப்ஸ் மாறாதபோது மறு-ரெண்டர்களைத் தடுக்க செயல்பாட்டுக் கூறுகளை `React.memo()` உடன் போர்த்தவும். `React.memo` ப்ராப்ஸ்களின் ஒரு மேலோட்டமான ஒப்பீட்டைச் செய்கிறது மற்றும் ப்ராப்ஸ் வேறுபட்டால் மட்டுமே கூற்றை மீண்டும் ரெண்டர் செய்கிறது.
• `PureComponent`: வகுப்பு கூறுகளுக்கு `Component`-க்குப் பதிலாக `PureComponent`-ஐப் பயன்படுத்தவும். `PureComponent` மறு-ரெண்டரிங் செய்வதற்கு முன் ப்ராப்ஸ் மற்றும் நிலை இரண்டின் மேலோட்டமான ஒப்பீட்டைச் செய்கிறது.
• `shouldComponentUpdate()`: ஒரு கூறு எப்போது மீண்டும் ரெண்டர் செய்ய வேண்டும் என்பதை கைமுறையாகக் கட்டுப்படுத்த, வகுப்பு கூறுகளில் `shouldComponentUpdate()` வாழ்க்கைச் சுழற்சி முறையை செயல்படுத்தவும். இது மறு-ரெண்டரிங் நடத்தையின் மீது உங்களுக்கு நுண்ணிய கட்டுப்பாட்டை அளிக்கிறது.
• மாறாமை (Immutability): ப்ராப்ஸ் மற்றும் நிலையில் ஏற்படும் மாற்றங்கள் சரியாகக் கண்டறியப்படுவதை உறுதிசெய்ய, மாறாத தரவுக் கட்டமைப்புகளைப் பயன்படுத்தவும். மாறாமை தரவை ஒப்பிடுவதை எளிதாக்குகிறது மற்றும் ஒரு மறு-ரெண்டர் அவசியமா என்பதைத் தீர்மானிக்கிறது. Immutable.js போன்ற நூலகங்கள் இதற்கு உதவலாம்.
• மெமோயிசேஷன் (Memoization): விலையுயர்ந்த கணக்கீடுகளின் முடிவுகளை கேச் செய்ய மற்றும் அவற்றை தேவையற்ற முறையில் மீண்டும் கணக்கிடுவதைத் தவிர்க்க மெமோயிசேஷன் நுட்பங்களைப் பயன்படுத்தவும். ரியாக்ட் ஹூக்ஸில் உள்ள `useMemo` மற்றும் `useCallback` போன்ற நூலகங்கள் இதற்கு உதவலாம்.

உதாரணம்: உங்களிடம் ஒரு `UserProfileCard` கூறு உள்ளது, அது ஒரு பயனரின் சுயவிவரத் தகவலைக் காட்டுகிறது. `UserProfileCard` கூறு பயனரின் ஆன்லைன் நிலை மாறும் ஒவ்வொரு முறையும் மீண்டும் ரெண்டர் செய்தால், அது ஆன்லைன் நிலையைக் காட்டாவிட்டாலும், அதை `React.memo()` உடன் போர்த்துவதன் மூலம் மேம்படுத்தலாம். இது பயனரின் சுயவிவரத் தகவல் உண்மையில் மாறாத வரை கூறு மீண்டும் ரெண்டர் செய்வதைத் தடுக்கும்.

2. விலையுயர்ந்த கணக்கீடுகள்

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

மேம்படுத்தல் நுட்பங்கள்:

• மெமோயிசேஷன்: விலையுயர்ந்த கணக்கீடுகளின் முடிவுகளை மெமோயிஸ் செய்ய `useMemo`-வைப் பயன்படுத்தவும். இது உள்ளீடுகள் மாறும்போது மட்டுமே கணக்கீடுகள் செய்யப்படுவதை உறுதி செய்கிறது.
• Web Workers: முக்கிய திரியைத் தடுப்பதைத் தவிர்க்க, விலையுயர்ந்த கணக்கீடுகளை வெப் வொர்க்கர்களுக்கு நகர்த்தவும். வெப் வொர்க்கர்கள் பின்னணியில் இயங்குகின்றன மற்றும் பயனர் இடைமுகத்தின் பதிலளிப்பைப் பாதிக்காமல் கணக்கீடுகளைச் செய்ய முடியும்.
• Debouncing மற்றும் Throttling: விலையுயர்ந்த செயல்பாடுகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் மற்றும் த்ராட்லிங் நுட்பங்களைப் பயன்படுத்தவும். டிபவுன்சிங் ஒரு செயல்பாடு கடைசி அழைப்பிற்குப் பிறகு ஒரு குறிப்பிட்ட அளவு நேரம் கழித்து மட்டுமே அழைக்கப்படுவதை உறுதி செய்கிறது. த்ராட்லிங் ஒரு செயல்பாடு ஒரு குறிப்பிட்ட விகிதத்தில் மட்டுமே அழைக்கப்படுவதை உறுதி செய்கிறது.
• கேச்சிங் (Caching): விலையுயர்ந்த செயல்பாடுகளின் முடிவுகளை உள்ளூர் சேமிப்பகத்தில் அல்லது சர்வர் பக்க கேச்சில் கேச் செய்து, அவற்றை தேவையற்ற முறையில் மீண்டும் கணக்கிடுவதைத் தவிர்க்கவும்.

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

3. பெரிய கூறு மரங்கள்

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

மேம்படுத்தல் நுட்பங்கள்:

• கூறு பிரித்தல் (Component Splitting): பெரிய கூறுகளை சிறிய, மேலும் நிர்வகிக்கக்கூடிய கூறுகளாகப் பிரிக்கவும். இது மறு-ரெண்டர்களின் வரம்பைக் குறைத்து ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.
• மெய்நிகராக்கம் (Virtualization): ஒரு பெரிய பட்டியல் அல்லது அட்டவணையின் புலப்படும் பகுதிகளை மட்டும் ரெண்டர் செய்ய மெய்நிகராக்க நுட்பங்களைப் பயன்படுத்தவும். இது ரெண்டர் செய்ய வேண்டிய கூறுகளின் எண்ணிக்கையை கணிசமாகக் குறைத்து ஸ்க்ரோலிங் செயல்திறனை மேம்படுத்துகிறது. `react-virtualized` மற்றும் `react-window` போன்ற நூலகங்கள் இதற்கு உதவலாம்.
• குறியீடு பிரித்தல் (Code Splitting): ஒரு குறிப்பிட்ட கூறு அல்லது பாதைக்குத் தேவையான குறியீட்டை மட்டும் ஏற்ற, குறியீடு பிரிப்பைப் பயன்படுத்தவும். இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைத்து, பயன்பாட்டின் ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.

உதாரணம்: உங்களிடம் பல புலங்களைக் கொண்ட ஒரு பெரிய படிவம் இருந்தால், அதை `AddressForm`, `ContactForm`, மற்றும் `PaymentForm` போன்ற சிறிய கூறுகளாகப் பிரிக்கலாம். இது பயனர் படிவத்தில் மாற்றங்களைச் செய்யும்போது மீண்டும் ரெண்டர் செய்ய வேண்டிய கூறுகளின் எண்ணிக்கையைக் குறைக்கும்.

4. திறமையற்ற தரவு பெறுதல்

திறமையற்ற தரவு பெறுதல் பயன்பாட்டு செயல்திறனை கணிசமாக பாதிக்கலாம். அதிகப்படியான தரவைப் பெறுவது அல்லது அதிகப்படியான கோரிக்கைகளைச் செய்வது பயன்பாட்டை மெதுவாக்கி, பயனர் அனுபவத்தைக் கெடுக்கும்.

மேம்படுத்தல் நுட்பங்கள்:

• பக்கப்படுத்தல் (Pagination): தரவை சிறிய துண்டுகளாக ஏற்றுவதற்கு பக்கப்படுத்தலைச் செயல்படுத்தவும். இது ஒரே நேரத்தில் மாற்றப்பட வேண்டிய மற்றும் செயலாக்கப்பட வேண்டிய தரவின் அளவைக் குறைக்கிறது.
• GraphQL: ஒரு கூறுக்குத் தேவையான தரவை மட்டும் பெறுவதற்கு GraphQL-ஐப் பயன்படுத்தவும். GraphQL சரியான தரவுத் தேவைகளைக் குறிப்பிட உங்களை அனுமதிக்கிறது மற்றும் அதிகப்படியான பெறுதலைத் தவிர்க்கிறது.
• கேச்சிங்: பின்தளத்திற்குச் செல்லும் கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க கிளையன்ட் பக்கத்திலோ அல்லது சர்வர் பக்கத்திலோ தரவைக் கேச் செய்யவும்.
• சோம்பேறி ஏற்றுதல் (Lazy Loading): தேவைப்படும்போது மட்டுமே தரவை ஏற்றவும். உதாரணமாக, படங்கள் அல்லது வீடியோக்கள் பார்வைக்கு வரும்போது அவற்றை சோம்பேறியாக ஏற்றலாம்.

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

5. பெரிய படங்கள் மற்றும் சொத்துக்கள்

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

மேம்படுத்தல் நுட்பங்கள்:

• பட சுருக்கம்: தரத்தை தியாகம் செய்யாமல் கோப்பு அளவைக் குறைக்க படங்களைச் சுருக்கவும். ImageOptim மற்றும் TinyPNG போன்ற கருவிகள் இதற்கு உதவலாம்.
• பட மறுஅளவிடுதல்: காட்சிக்கு பொருத்தமான பரிமாணங்களுக்கு படங்களை மறுஅளவிடவும். தேவையற்ற பெரிய படங்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• சோம்பேறி ஏற்றுதல்: படங்கள் மற்றும் வீடியோக்கள் பார்வைக்கு வரும்போது அவற்றை சோம்பேறியாக ஏற்றவும்.
• உள்ளடக்க விநியோக நெட்வொர்க் (CDN): பயனர்களுக்கு புவியியல் ரீதியாக நெருக்கமான சேவையகங்களிலிருந்து சொத்துக்களை வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும். இது தாமதத்தைக் குறைத்து, பதிவிறக்க வேகத்தை மேம்படுத்துகிறது.
• WebP வடிவம்: WebP பட வடிவத்தைப் பயன்படுத்தவும், இது JPEG மற்றும் PNG-ஐ விட சிறந்த சுருக்கத்தை வழங்குகிறது.

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

மேம்பட்ட சுயவிவர நுட்பங்கள்

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

1. Interactions Profiler

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

Interactions Profiler-ஐப் பயன்படுத்த, சுயவிவரத்தில் உள்ள "Interactions" தாவலைத் தேர்ந்தெடுத்து "Record" பொத்தானைக் கிளிக் செய்யவும். பின்னர், நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் பயனர் தொடர்பைச் செய்யவும். நீங்கள் தொடர்பை முடித்ததும், "Stop" பொத்தானைக் கிளிக் செய்யவும். சுயவிவரம் பின்னர் தொடர்பில் ஈடுபட்டுள்ள ஒவ்வொரு கூறுக்கும் ரெண்டரிங் நேரங்களைக் காட்டும் ஒரு ஃபிளேம் சார்ட்டைக் காண்பிக்கும்.

2. Commit Hooks

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

Commit hooks-ஐப் பயன்படுத்த, நீங்கள் `react-devtools-timeline-profiler` தொகுப்பை நிறுவ வேண்டும். நீங்கள் தொகுப்பை நிறுவியதும், commit hooks-ஐப் பதிவு செய்ய `useCommitHooks` ஹூக்கைப் பயன்படுத்தலாம். `useCommitHooks` ஹூக் இரண்டு வாதங்களை எடுக்கிறது: ஒரு `beforeCommit` செயல்பாடு மற்றும் ஒரு `afterCommit` செயல்பாடு. `beforeCommit` செயல்பாடு ஒவ்வொரு கமிட்டிற்கு முன்பும் அழைக்கப்படுகிறது, மற்றும் `afterCommit` செயல்பாடு ஒவ்வொரு கமிட்டிற்குப் பிறகும் அழைக்கப்படுகிறது.

3. உற்பத்தி உருவாக்கங்களை சுயவிவரம் செய்தல் (கவனத்துடன்)

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

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

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

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

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

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

முடிவுரை

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

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

மேலும் ஆதாரங்கள்

• ரியாக்ட் செயல்திறன் மேம்படுத்தல் ஆவணங்கள்
• ரியாக்ட் சுயவிவரத்தை அறிமுகப்படுத்துகிறோம்
• GitHub இல் react-devtools-timeline-profiler