ரியாக்ட் ஃபைபர் கன்கரன்ட் மோட் ப்ரொஃபைலர்: ரெண்டரிங் செயல்திறன் காட்சிப்படுத்தல்

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

ரியாக்ட் ஃபைபர் என்றால் என்ன?

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

ஃபைபரின் முக்கிய நன்மைகள்:

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

கன்கரன்ட் மோடைப் புரிந்துகொள்வது

கன்கரன்ட் மோட் ஃபைபரின் அடிப்படையில் உருவாக்கப்பட்டுள்ளது, இது மிகவும் பதிலளிக்கக்கூடிய மற்றும் ஊடாடும் பயன்பாடுகளை உருவாக்குவதற்கான மேம்பட்ட அம்சங்களைத் திறக்கிறது. இது புதிய APIகள் மற்றும் ரெண்டரிங் உத்திகளை அறிமுகப்படுத்துகிறது, அவை ரியாக்ட்-க்கு:

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

ரியாக்ட் ஃபைபர் கன்கரன்ட் மோட் ப்ரொஃபைலரை அறிமுகப்படுத்துதல்

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

ப்ரொஃபைலர் மூலம், நீங்கள்:

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

ப்ரொஃபைலரை அமைத்தல்

ரியாக்ட் ஃபைபர் கன்கரன்ட் மோட் ப்ரொஃபைலரைப் பயன்படுத்த, உங்களுக்குத் தேவை:

1. ரியாக்ட் டெவ் டூல்ஸ்: Chrome, Firefox அல்லது Edge க்கான ரியாக்ட் டெவ் டூல்ஸ் உலாவி நீட்டிப்பை நிறுவவும்.
2. ரியாக்ட் 16.4+: உங்கள் ரியாக்ட் பயன்பாடு ரியாக்ட் பதிப்பு 16.4 அல்லது அதற்கு மேற்பட்ட (சிறந்ததாக, சமீபத்திய பதிப்பு) பயன்படுத்துவதை உறுதிப்படுத்தவும்.
3. மேம்பாட்டு முறை: ப்ரொஃபைலர் முதன்மையாக மேம்பாட்டு முறையில் பயன்படுத்த வடிவமைக்கப்பட்டுள்ளது. நீங்கள் உற்பத்தி உருவாக்கங்களை (production builds) ப்ரொஃபைல் செய்ய முடிந்தாலும், முடிவுகள் குறைந்த விரிவானதாகவும் துல்லியமற்றதாகவும் இருக்கலாம்.

ப்ரொஃபைலரைப் பயன்படுத்துதல்

ப்ரொஃபைலரை அமைத்தவுடன், உங்கள் பயன்பாட்டின் செயல்திறனை பகுப்பாய்வு செய்ய இந்த படிகளைப் பின்பற்றவும்:

1. ரியாக்ட் டெவ் டூல்ஸ் திறக்கவும்: உங்கள் உலாவியின் டெவலப்பர் கருவிகளைத் திறந்து "Profiler" தாவலைத் தேர்ந்தெடுக்கவும்.
2. பதிவு செய்யத் தொடங்கவும்: உங்கள் பயன்பாட்டை ப்ரொஃபைல் செய்யத் தொடங்க "Record" பொத்தானைக் கிளிக் செய்யவும்.
3. உங்கள் பயன்பாட்டுடன் தொடர்பு கொள்ளுங்கள்: ஒரு வழக்கமான பயனர் எப்படிச் செய்வாரோ, அப்படியே உங்கள் பயன்பாட்டைப் பயன்படுத்தவும். வெவ்வேறு செயல்களைத் தூண்டவும், பக்கங்களுக்கு இடையில் செல்லவும், பல்வேறு கூறுகளுடன் தொடர்பு கொள்ளவும்.
4. பதிவை நிறுத்தவும்: ப்ரொஃபைலிங் அமர்வை முடிக்க "Stop" பொத்தானைக் கிளிக் செய்யவும்.
5. முடிவுகளை பகுப்பாய்வு செய்யவும்: ப்ரொஃபைலர் உங்கள் பயன்பாட்டின் ரெண்டரிங் செயல்திறனின் காட்சிப்படுத்தலைக் காண்பிக்கும்.

ப்ரொஃபைலர் காட்சிப்படுத்தல்கள்

உங்கள் பயன்பாட்டின் ரெண்டரிங் செயல்திறனைப் புரிந்துகொள்ள ப்ரொஃபைலர் பல காட்சிப்படுத்தல்களை வழங்குகிறது:

ஃபிளேம் விளக்கப்படம்

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

ஃபிளேம் விளக்கப்படத்தைப் புரிந்துகொள்வது:

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

தரவரிசை விளக்கப்படம்

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

தரவரிசை விளக்கப்படத்தைப் பயன்படுத்துதல்:

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

கூறு விளக்கப்படம்

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

கூறு விளக்கப்படத்தை பகுப்பாய்வு செய்தல்:

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

தொடர்புகள்

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

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

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

1. மெமோயிசேஷன் (Memoization)

மெமோயிசேஷன் என்பது தேவையற்ற மீண்டும் ரெண்டர்களைத் தடுப்பதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். இது விலையுயர்ந்த கணக்கீடுகளின் முடிவுகளை தற்காலிகமாக சேமித்து, அதே உள்ளீடுகள் வழங்கப்படும்போது அவற்றை மீண்டும் பயன்படுத்துவதை உள்ளடக்குகிறது. ரியாக்ட்டில், செயல்பாட்டு கூறுகளுக்கு React.memo ஐயும், வகுப்பு கூறுகளுக்கு shouldComponentUpdate (அல்லது PureComponent) ஐயும் மெமோயிசேஷனை செயல்படுத்த பயன்படுத்தலாம்.

உதாரணம் (React.memo):

const MyComponent = React.memo(function MyComponent(props) {
  // ... ரெண்டர் தர்க்கம் ...
});

உதாரணம் (shouldComponentUpdate):

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // மீண்டும் ரெண்டர் தேவைப்பட்டால் தீர்மானிக்க பண்புகள் மற்றும் நிலையை ஒப்பிடுக
    return nextProps.data !== this.props.data;
  }

  render() {
    // ... ரெண்டர் தர்க்கம் ...
  }
}

சர்வதேச பரிசீலனைகள்: உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கத்தைக் (எ.கா., தேதிகள், எண்கள், உரை) காண்பிக்கும் கூறுகளை மெமோயிஸ் செய்யும்போது, மெமோயிசேஷன் விசை உள்ளூர் தகவல்களை உள்ளடக்கியிருப்பதை உறுதிசெய்யவும். இல்லையெனில், உள்ளூர் மொழி மாறும்போது கூறு மீண்டும் ரெண்டர் செய்யப்படாமல் போகலாம்.

2. குறியீடு பிரிப்பு (Code Splitting)

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

உதாரணம் (React.lazy):

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyParentComponent() {
  return (
    ஏற்றப்படுகிறது...
}>
      
    
  );
}

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

3. மெய்நிகராக்கம் (Virtualization)

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

Libraries like react-window and react-virtualized provide components for implementing virtualization in React applications.

4. டிபவுன்சிங் மற்றும் த்ரோட்லிங் (Debouncing and Throttling)

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

உதாரணம் (Debouncing):

import { debounce } from 'lodash';

function MyComponent() {
  const handleInputChange = debounce((value) => {
    // இங்கே விலையுயர்ந்த செயல்பாட்டைச் செய்யவும்
    console.log('உள்ளீடு மதிப்பு:', value);
  }, 300);

  return (
     handleInputChange(e.target.value)} />
  );
}

உதாரணம் (Throttling):

import { throttle } from 'lodash';

function MyComponent() {
  const handleScroll = throttle(() => {
    // இங்கே விலையுயர்ந்த செயல்பாட்டைச் செய்யவும்
    console.log('சுருள்வது...');
  }, 200);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    
த்ரோட்ல் செய்யப்பட்ட செயல்பாட்டைத் தூண்ட சுருட்டவும்
  );
}

5. தரவு எடுத்தலை மேம்படுத்துதல்

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

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

6. தேவையற்ற நிலை புதுப்பிப்புகளைத் தவிர்க்கவும்

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

7. படங்கள் மற்றும் சொத்துக்களை மேம்படுத்துதல்

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

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

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

8. திறமையான நிகழ்வு கையாளுதல்

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

9. உற்பத்தி உருவாக்கங்களைப் பயன்படுத்தவும்

எப்போதும் உங்கள் ரியாக்ட் பயன்பாட்டின் உற்பத்தி உருவாக்கங்களை (production builds) பயன்படுத்தவும். உற்பத்தி உருவாக்கங்கள் செயல்திறனுக்காக மேம்படுத்தப்பட்டுள்ளன, மேலும் பொதுவாக மேம்பாட்டு உருவாக்கங்களை விட சிறியவை. உற்பத்தி உருவாக்கங்களை உருவாக்க create-react-app அல்லது Next.js போன்ற கருவிகளைப் பயன்படுத்தவும்.

10. மூன்றாம் தரப்பு நூலகங்களை பகுப்பாய்வு செய்யவும்

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

மேம்பட்ட ப்ரொஃபைலிங் நுட்பங்கள்

உற்பத்தி உருவாக்கங்களை ப்ரொஃபைலிங் செய்தல்

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

குறிப்பிட்ட தொடர்புகளை ப்ரொஃபைலிங் செய்தல்

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

ப்ரொஃபைலர் API ஐப் பயன்படுத்துதல்

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

முடிவுரை

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