റിയാക്റ്റ് പ്രകടന പ്രൊഫൈലിംഗ്: കമ്പോണന്റ് റെൻഡർ വിശകലനത്തിലേക്കുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

ഇന്നത്തെ അതിവേഗ ഡിജിറ്റൽ ലോകത്ത്, ഉപയോക്തൃ അനുഭവം വളരെ പ്രധാനമാണ്. വേഗത കുറഞ്ഞതും പ്രതികരണശേഷി ഇല്ലാത്തതുമായ ഒരു വെബ് ആപ്ലിക്കേഷൻ ഉപയോക്താക്കളെ വേഗത്തിൽ നിരാശരാക്കുകയും ഉപേക്ഷിക്കാൻ പ്രേരിപ്പിക്കുകയും ചെയ്യും. റിയാക്റ്റ് ഡെവലപ്പർമാരെ സംബന്ധിച്ചിടത്തോളം, സുഗമവും ആസ്വാദ്യകരവുമായ ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. ഇത് നേടുന്നതിനുള്ള ഏറ്റവും ഫലപ്രദമായ തന്ത്രങ്ങളിലൊന്നാണ് സൂക്ഷ്മമായ കമ്പോണന്റ് റെൻഡർ വിശകലനം. ഈ ലേഖനം റിയാക്റ്റ് പെർഫോമൻസ് പ്രൊഫൈലിംഗിന്റെ ലോകത്തേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലുന്നു, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളിലെ പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും ആവശ്യമായ അറിവും ടൂളുകളും നിങ്ങൾക്ക് നൽകുന്നു.

എന്തുകൊണ്ടാണ് കമ്പോണന്റ് റെൻഡർ വിശകലനം പ്രധാനപ്പെട്ടതാകുന്നത്?

റിയാക്റ്റിന്റെ കമ്പോണന്റ്-ബേസ്ഡ് ആർക്കിടെക്ചർ ശക്തമാണെങ്കിലും, ശ്രദ്ധയോടെ കൈകാര്യം ചെയ്തില്ലെങ്കിൽ ചിലപ്പോൾ പ്രകടന പ്രശ്നങ്ങൾക്ക് ഇടയാക്കും. അനാവശ്യമായ റീ-റെൻഡറുകൾ ഒരു സാധാരണ പ്രശ്നമാണ്, ഇത് വിലയേറിയ റിസോഴ്‌സുകൾ ഉപയോഗിക്കുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വേഗത കുറയ്ക്കുകയും ചെയ്യുന്നു. കമ്പോണന്റ് റെൻഡർ വിശകലനം നിങ്ങളെ ഇനിപ്പറയുന്നവയ്ക്ക് സഹായിക്കുന്നു:

• പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്തുക: ആവശ്യത്തിലധികം തവണ റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ കൃത്യമായി കണ്ടെത്തുക.
• റീ-റെൻഡറുകളുടെ കാരണങ്ങൾ മനസ്സിലാക്കുക: ഒരു കമ്പോണന്റ് എന്തിനാണ് വീണ്ടും റെൻഡർ ചെയ്യുന്നതെന്ന് നിർണ്ണയിക്കുക, അത് പ്രോപ്പ് മാറ്റങ്ങൾ, സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ, അല്ലെങ്കിൽ പാരന്റ് കമ്പോണന്റ് റീ-റെൻഡറുകൾ എന്നിവ കൊണ്ടാണോ എന്ന് മനസ്സിലാക്കുക.
• കമ്പോണന്റ് റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുക: അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നതിനും മൊത്തത്തിലുള്ള ആപ്ലിക്കേഷൻ പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും വേണ്ട തന്ത്രങ്ങൾ നടപ്പിലാക്കുക.
• ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുക: കൂടുതൽ സുഗമവും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു യൂസർ ഇന്റർഫേസ് നൽകുക.

റിയാക്റ്റ് പ്രകടന പ്രൊഫൈലിംഗിനുള്ള ടൂളുകൾ

റിയാക്റ്റ് കമ്പോണന്റ് റെൻഡറുകൾ വിശകലനം ചെയ്യാൻ നിങ്ങളെ സഹായിക്കുന്ന നിരവധി ശക്തമായ ടൂളുകൾ ലഭ്യമാണ്. അവയിൽ ഏറ്റവും പ്രചാരമുള്ള ചില ഓപ്ഷനുകൾ താഴെ നൽകുന്നു:

1. റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസ് (പ്രൊഫൈലർ)

റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസ് ബ്രൗസർ എക്സ്റ്റൻഷൻ ഏതൊരു റിയാക്റ്റ് ഡെവലപ്പർക്കും ഒഴിച്ചുകൂടാനാവാത്ത ഒരു ടൂളാണ്. ഇതിൽ ഒരു ബിൽറ്റ്-ഇൻ പ്രൊഫൈലർ ഉൾപ്പെടുന്നു, ഇത് കമ്പോണന്റ് റെൻഡർ പ്രകടനം റെക്കോർഡ് ചെയ്യാനും വിശകലനം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു. പ്രൊഫൈലർ താഴെ പറയുന്ന കാര്യങ്ങളെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകുന്നു:

• കമ്പോണന്റ് റെൻഡർ സമയം: ഓരോ കമ്പോണന്റും റെൻഡർ ചെയ്യാൻ എത്ര സമയമെടുക്കുന്നു എന്ന് കാണുക.
• റെൻഡർ ആവൃത്തി: അടിക്കടി റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ കണ്ടെത്തുക.
• കമ്പോണന്റ് ഇടപെടലുകൾ: റീ-റെൻഡറുകൾക്ക് കാരണമാകുന്ന ഡാറ്റയുടെയും ഇവന്റുകളുടെയും ഒഴുക്ക് കണ്ടെത്തുക.

റിയാക്റ്റ് പ്രൊഫൈലർ എങ്ങനെ ഉപയോഗിക്കാം:

1. റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസ് ബ്രൗസർ എക്സ്റ്റൻഷൻ ഇൻസ്റ്റാൾ ചെയ്യുക (Chrome, Firefox, Edge എന്നിവയ്ക്കായി ലഭ്യമാണ്).
2. നിങ്ങളുടെ ബ്രൗസറിലെ ഡെവലപ്പർ ടൂൾസ് തുറന്ന് "Profiler" ടാബിലേക്ക് പോകുക.
3. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രൊഫൈലിംഗ് ആരംഭിക്കാൻ "Record" ബട്ടൺ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങൾ വിശകലനം ചെയ്യാൻ ആഗ്രഹിക്കുന്ന കമ്പോണന്റുകളെ പ്രവർത്തനക്ഷമമാക്കാൻ ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
5. പ്രൊഫൈലിംഗ് സെഷൻ അവസാനിപ്പിക്കാൻ "Stop" ബട്ടൺ ക്ലിക്ക് ചെയ്യുക.
6. പ്രൊഫൈലർ, ഫ്ലേം ചാർട്ട് വിഷ്വലൈസേഷൻ ഉൾപ്പെടെ, കമ്പോണന്റ് റെൻഡർ പ്രകടനത്തിന്റെ വിശദമായ ഒരു വിവരണം പ്രദർശിപ്പിക്കും.

ഓരോ കമ്പോണന്റും റെൻഡർ ചെയ്യാൻ എടുത്ത സമയം ഫ്ലേം ചാർട്ട് ദൃശ്യപരമായി പ്രതിനിധീകരിക്കുന്നു. വീതിയുള്ള ബാറുകൾ ദൈർഘ്യമേറിയ റെൻഡർ സമയങ്ങളെ സൂചിപ്പിക്കുന്നു, ഇത് പ്രകടനത്തിലെ തടസ്സങ്ങൾ വേഗത്തിൽ കണ്ടെത്താൻ നിങ്ങളെ സഹായിക്കും.

2. Why Did You Render?

"Why Did You Render?" എന്നത് ഒരു കമ്പോണന്റ് എന്തിനാണ് റീ-റെൻഡർ ചെയ്യുന്നത് എന്നതിനെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ നൽകുന്നതിനായി റിയാക്റ്റിനെ മങ്കി-പാച്ച് ചെയ്യുന്ന ഒരു ലൈബ്രറിയാണ്. ഏതൊക്കെ പ്രോപ്പുകളാണ് മാറിയതെന്നും ആ മാറ്റങ്ങൾ ഒരു റീ-റെൻഡർ ആവശ്യപ്പെടുന്നതാണോ എന്നും മനസ്സിലാക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു. അപ്രതീക്ഷിതമായ റീ-റെൻഡറുകൾ ഡീബഗ്ഗ് ചെയ്യുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഇൻസ്റ്റാളേഷൻ:

            npm install @welldone-software/why-did-you-render --save
            

              
                Copy
              
            
          

ഉപയോഗം:

            import React from 'react';
if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ എൻട്രി പോയിന്റിൽ (ഉദാഹരണത്തിന്, `index.js`) സ്ഥാപിക്കണം. ഒരു കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോൾ, "Why Did You Render?" കൺസോളിലേക്ക് വിവരങ്ങൾ ലോഗ് ചെയ്യും, മാറിയ പ്രോപ്പുകൾ ഹൈലൈറ്റ് ചെയ്യുകയും ആ മാറ്റങ്ങളെ അടിസ്ഥാനമാക്കി കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യേണ്ടതുണ്ടോ എന്ന് സൂചിപ്പിക്കുകയും ചെയ്യും.

3. റിയാക്റ്റ് പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുകൾ

പ്രകടന പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും നൂതന ഫീച്ചറുകൾ വാഗ്ദാനം ചെയ്യുന്ന നിരവധി വാണിജ്യ റിയാക്റ്റ് പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുകൾ ഉണ്ട്. ഈ ടൂളുകൾ പലപ്പോഴും തത്സമയ നിരീക്ഷണം, അലേർട്ടിംഗ്, വിശദമായ പ്രകടന റിപ്പോർട്ടുകൾ എന്നിവ നൽകുന്നു.

• Sentry: ട്രാൻസാക്ഷൻ പ്രകടനം നിരീക്ഷിക്കുന്നതിനും വേഗത കുറഞ്ഞ കമ്പോണന്റുകൾ കണ്ടെത്തുന്നതിനും ഉപയോക്തൃ അനുഭവത്തെക്കുറിച്ചുള്ള ഉൾക്കാഴ്ചകൾ നേടുന്നതിനും പ്രകടന നിരീക്ഷണ കഴിവുകൾ വാഗ്ദാനം ചെയ്യുന്നു.
• New Relic: കമ്പോണന്റ്-ലെവൽ പെർഫോമൻസ് മെട്രിക്കുകൾ ഉൾപ്പെടെ, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷന്റെ ആഴത്തിലുള്ള നിരീക്ഷണം നൽകുന്നു.
• Raygun: നിങ്ങളുടെ ഉപയോക്താക്കളുടെ കാഴ്ചപ്പാടിൽ നിന്ന് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം നിരീക്ഷിക്കുന്നതിന് റിയൽ യൂസർ മോണിറ്ററിംഗ് (RUM) വാഗ്ദാനം ചെയ്യുന്നു.

കമ്പോണന്റ് റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള തന്ത്രങ്ങൾ

പ്രൊഫൈലിംഗ് ടൂളുകൾ ഉപയോഗിച്ച് പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്തിക്കഴിഞ്ഞാൽ, കമ്പോണന്റ് റെൻഡറിംഗ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് നിങ്ങൾക്ക് വിവിധ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ നടപ്പിലാക്കാം. ഏറ്റവും ഫലപ്രദമായ ചില ടെക്നിക്കുകൾ താഴെ നൽകുന്നു:

1. മെമ്മോയിസേഷൻ (Memoization)

ചെലവേറിയ ഫംഗ്‌ഷൻ കോളുകളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുകയും അതേ ഇൻപുട്ടുകൾ വീണ്ടും വരുമ്പോൾ കാഷെ ചെയ്ത ഫലം തിരികെ നൽകുകയും ചെയ്യുന്ന ഒരു ശക്തമായ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കാണ് മെമ്മോയിസേഷൻ. റിയാക്റ്റിൽ, അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നതിന് കമ്പോണന്റുകളിൽ മെമ്മോയിസേഷൻ പ്രയോഗിക്കാവുന്നതാണ്.

a) React.memo

React.memo എന്നത് ഒരു ഫംഗ്ഷണൽ കമ്പോണന്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റാണ് (HOC). അതിന്റെ പ്രോപ്പുകൾ മാറിയിട്ടുണ്ടെങ്കിൽ (ഒരു ഷാലോ കംപാരിസൺ ഉപയോഗിച്ച്) മാത്രമേ ഇത് കമ്പോണന്റിനെ റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. റെൻഡറിംഗിനായി പ്രോപ്പുകളെ മാത്രം ആശ്രയിക്കുന്ന പ്യുവർ ഫംഗ്ഷണൽ കമ്പോണന്റുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

            import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Render logic
  return <div>{props.data}</div>;
});

export default MyComponent;

            

              
                Copy
              
            
          

b) useMemo ഹുക്ക്

useMemo ഹുക്ക് ഒരു ഫംഗ്‌ഷൻ കോളിന്റെ ഫലത്തെ മെമ്മോയിസ് ചെയ്യുന്നു. അതിന്റെ ഡിപൻഡൻസികൾ മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രമേ ഇത് ഫംഗ്ഷൻ വീണ്ടും എക്സിക്യൂട്ട് ചെയ്യുകയുള്ളൂ. ചെലവേറിയ കണക്കുകൂട്ടലുകൾ മെമ്മോയിസ് ചെയ്യുന്നതിനോ അല്ലെങ്കിൽ ചൈൽഡ് കമ്പോണന്റുകളിൽ പ്രോപ്പുകളായി ഉപയോഗിക്കുന്ന ഒബ്ജക്റ്റുകളിലേക്കോ ഫംഗ്ഷനുകളിലേക്കോ സ്ഥിരമായ റെഫറൻസുകൾ ഉണ്ടാക്കുന്നതിനോ ഇത് ഉപയോഗപ്രദമാണ്.

            import React, { useMemo } from 'react';

function MyComponent(props) {
  const expensiveValue = useMemo(() => {
    // Perform an expensive calculation
    return computeExpensiveValue(props.data);
  }, [props.data]);

  return <div>{expensiveValue}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

c) useCallback ഹുക്ക്

useCallback ഹുക്ക് ഒരു ഫംഗ്ഷൻ ഡെഫനിഷൻ മെമ്മോയിസ് ചെയ്യുന്നു. അതിന്റെ ഡിപൻഡൻസികൾ മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രമേ ഇത് ഫംഗ്ഷൻ വീണ്ടും ഉണ്ടാക്കുകയുള്ളൂ. React.memo ഉപയോഗിച്ച് മെമ്മോയിസ് ചെയ്ത ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് കോൾബാക്കുകൾ പാസ് ചെയ്യാൻ ഇത് ഉപയോഗപ്രദമാണ്, കാരണം ഓരോ പാരന്റ് റെൻഡറിലും ഒരു പുതിയ കോൾബാക്ക് ഫംഗ്ഷൻ പ്രോപ്പായി പാസ് ചെയ്യുന്നതുകൊണ്ട് ചൈൽഡ് കമ്പോണന്റ് അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്നത് ഇത് തടയുന്നു.

            import React, { useCallback } from 'react';

function MyComponent(props) {
  const handleClick = useCallback(() => {
    // Handle click event
    props.onClick(props.data);
  }, [props.data, props.onClick]);

  return <button onClick={handleClick}>Click Me</button>;
}

export default MyComponent;

            

              
                Copy
              
            
          

2. ShouldComponentUpdate (ക്ലാസ് കമ്പോണന്റുകൾക്കായി)

ക്ലാസ് കമ്പോണന്റുകളെ സംബന്ധിച്ചിടത്തോളം, shouldComponentUpdate എന്ന ലൈഫ്സൈക്കിൾ മെത്തേഡ്, അതിന്റെ പ്രോപ്പുകളിലെയും സ്റ്റേറ്റിലെയും മാറ്റങ്ങളെ അടിസ്ഥാനമാക്കി ഒരു കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യಬೇಕോ എന്ന് സ്വമേധയാ നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യണമെങ്കിൽ ഈ മെത്തേഡ് true എന്നും അല്ലെങ്കിൽ false എന്നും തിരികെ നൽകണം.

            import React from 'react';

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Compare props and state to determine if re-render is necessary
    if (nextProps.data !== this.props.data) {
      return true;
    }
    return false;
  }

  render() {
    // Render logic
    return <div>{this.props.data}</div>;
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

കുറിപ്പ്: മിക്ക കേസുകളിലും, shouldComponentUpdate-നെക്കാൾ React.memo, useMemo/useCallback ഹുക്കുകൾ എന്നിവ ഉപയോഗിക്കുന്നതാണ് നല്ലത്, കാരണം അവ സാധാരണയായി ഉപയോഗിക്കാനും പരിപാലിക്കാനും എളുപ്പമാണ്.

3. ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകൾ

ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകൾ ഉപയോഗിക്കുന്നത് പ്രോപ്പുകളിലെയും സ്റ്റേറ്റിലെയും മാറ്റങ്ങൾ കണ്ടെത്തുന്നത് എളുപ്പമാക്കുന്നതിലൂടെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ സഹായിക്കും. ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകൾ എന്നാൽ, ഒരിക്കൽ ഉണ്ടാക്കിയാൽ പിന്നീട് മാറ്റം വരുത്താൻ കഴിയാത്ത ഡാറ്റാ സ്ട്രക്ച്ചറുകളാണ്. ഒരു മാറ്റം ആവശ്യമുള്ളപ്പോൾ, മാറ്റം വരുത്തിയ മൂല്യങ്ങളോടുകൂടിയ ഒരു പുതിയ ഡാറ്റാ സ്ട്രക്ച്ചർ ഉണ്ടാക്കുന്നു. ഇത് ലളിതമായ ഇക്വാളിറ്റി ചെക്കുകൾ (===) ഉപയോഗിച്ച് കാര്യക്ഷമമായി മാറ്റങ്ങൾ കണ്ടെത്താൻ അനുവദിക്കുന്നു.

Immutable.js, Immer പോലുള്ള ലൈബ്രറികൾ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളിൽ ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകളും അവയുമായി പ്രവർത്തിക്കുന്നതിനുള്ള യൂട്ടിലിറ്റികളും നൽകുന്നു. ഡാറ്റാ സ്ട്രക്ച്ചറിന്റെ ഒരു ഡ്രാഫ്റ്റിൽ മാറ്റം വരുത്താൻ നിങ്ങളെ അനുവദിച്ചുകൊണ്ട് Immer ഇമ്മ്യൂട്ടബിൾ ഡാറ്റയുമായി പ്രവർത്തിക്കുന്നത് ലളിതമാക്കുന്നു, ഇത് പിന്നീട് യാന്ത്രികമായി ഒരു ഇമ്മ്യൂട്ടബിൾ കോപ്പിയായി മാറുന്നു.

            import { useImmer } from 'use-immer';

function MyComponent() {
  const [data, updateData] = useImmer({
    name: 'John Doe',
    age: 30,
  });

  const handleClick = () => {
    updateData(draft => {
      draft.age++;
    });
  };

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <button onClick={handleClick}>Increment Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

4. കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും

കോഡ് സ്പ്ലിറ്റിംഗ് എന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ കോഡിനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ബണ്ടിലുകളായി വിഭജിക്കുന്ന പ്രക്രിയയാണ്. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രാരംഭ ലോഡ് സമയം ഗണ്യമായി കുറയ്ക്കാൻ സഹായിക്കും, പ്രത്യേകിച്ച് വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകളിൽ.

React.lazy, Suspense എന്നീ കമ്പോണന്റുകൾ ഉപയോഗിച്ച് റിയാക്റ്റ് കോഡ് സ്പ്ലിറ്റിംഗിന് ബിൽറ്റ്-ഇൻ പിന്തുണ നൽകുന്നു. React.lazy കമ്പോണന്റുകൾ ഡൈനാമിക്കായി ഇമ്പോർട്ട് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അതേസമയം കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കാനുള്ള ഒരു മാർഗ്ഗം Suspense നൽകുന്നു.

            import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

ഈ സമീപനം, പ്രത്യേകിച്ച് നിരവധി റൂട്ടുകളോ കമ്പോണന്റുകളോ ഉള്ള ആപ്ലിക്കേഷനുകളിൽ, പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു. ഉദാഹരണത്തിന്, ഉൽപ്പന്ന വിശദാംശങ്ങളും ഉപയോക്തൃ പ്രൊഫൈലുകളും ഉള്ള ഒരു ഇ-കൊമേഴ്‌സ് പ്ലാറ്റ്‌ഫോമിന് ഈ കമ്പോണന്റുകൾ ആവശ്യമുള്ളതുവരെ ലേസി-ലോഡ് ചെയ്യാൻ കഴിയും. അതുപോലെ, ആഗോളതലത്തിൽ വിതരണം ചെയ്യപ്പെട്ട ഒരു വാർത്താ ആപ്ലിക്കേഷന് ഉപയോക്താവിന്റെ ലൊക്കേൽ അടിസ്ഥാനമാക്കി ഭാഷാ-നിർദ്ദിഷ്ട കമ്പോണന്റുകൾ ലോഡുചെയ്യാൻ കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കാം.

5. വെർച്വലൈസേഷൻ (Virtualization)

വലിയ ലിസ്റ്റുകളോ ടേബിളുകളോ റെൻഡർ ചെയ്യുമ്പോൾ, സ്ക്രീനിൽ കാണുന്ന ഐറ്റംസ് മാത്രം റെൻഡർ ചെയ്യുന്നതിലൂടെ വെർച്വലൈസേഷന് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും. ഇത് നിലവിൽ കാണാത്ത ആയിരക്കണക്കിന് ഐറ്റംസ് റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് ബ്രൗസറിനെ തടയുന്നു, ഇത് ഒരു വലിയ പ്രകടന തടസ്സമാകും.

react-window, react-virtualized പോലുള്ള ലൈബ്രറികൾ വലിയ ലിസ്റ്റുകളും ടേബിളുകളും കാര്യക്ഷമമായി റെൻഡർ ചെയ്യുന്നതിനുള്ള കമ്പോണന്റുകൾ നൽകുന്നു. ഈ ലൈബ്രറികൾ റെൻഡർ ചെയ്യേണ്ട DOM നോഡുകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് വിൻഡോയിംഗ്, സെൽ റീസൈക്ലിംഗ് പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നു.

            import React from 'react';
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function MyListComponent() {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemSize={35}
      itemCount={1000}
    >
      {Row}
    </FixedSizeList>
  );
}

            

              
                Copy
              
            
          

6. ഡിബൗൺസിംഗും ത്രോട്ടിലിംഗും

ഒരു ഫംഗ്‌ഷൻ എക്സിക്യൂട്ട് ചെയ്യുന്നതിന്റെ നിരക്ക് പരിമിതപ്പെടുത്താൻ ഉപയോഗിക്കുന്ന ടെക്നിക്കുകളാണ് ഡിബൗൺസിംഗും ത്രോട്ടിലിംഗും. ഒരു ഫംഗ്‌ഷൻ അവസാനമായി വിളിച്ചതിന് ശേഷം ഒരു നിശ്ചിത സമയം കഴിഞ്ഞതിന് ശേഷം മാത്രമേ എക്സിക്യൂട്ട് ചെയ്യുന്നുള്ളൂ എന്ന് ഡിബൗൺസിംഗ് ഉറപ്പാക്കുന്നു. ഒരു നിശ്ചിത സമയ ഇടവേളയിൽ ഒരു ഫംഗ്ഷൻ പരമാവധി ഒരു തവണ മാത്രമേ എക്സിക്യൂട്ട് ചെയ്യുന്നുള്ളൂ എന്ന് ത്രോട്ടിലിംഗ് ഉറപ്പാക്കുന്നു.

സ്ക്രോൾ ഇവന്റുകൾ, റീസൈസ് ഇവന്റുകൾ, ഇൻപുട്ട് ഇവന്റുകൾ എന്നിങ്ങനെ അടിക്കടി ട്രിഗർ ചെയ്യപ്പെടുന്ന ഇവന്റുകൾ കൈകാര്യം ചെയ്യാൻ ഈ ടെക്നിക്കുകൾ ഉപയോഗപ്രദമാണ്. ഈ ഇവന്റുകൾ ഡിബൗൺസ് ചെയ്യുകയോ ത്രോട്ടിൽ ചെയ്യുകയോ ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ അനാവശ്യമായ ജോലികൾ ചെയ്യുന്നത് തടയാനും അതിന്റെ പ്രതികരണശേഷി മെച്ചപ്പെടുത്താനും കഴിയും.

            import { debounce } from 'lodash';

function MyComponent() {
  const handleScroll = debounce(() => {
    // Perform some action on scroll
    console.log('Scroll event');
  }, 250);

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

  return <div style={{ height: '2000px' }}>Scroll Me</div>;
}

            

              
                Copy
              
            
          

7. റെൻഡറിൽ ഇൻലൈൻ ഫംഗ്ഷനുകളും ഒബ്ജക്റ്റുകളും ഒഴിവാക്കുക

ഒരു കമ്പോണന്റിന്റെ റെൻഡർ മെത്തേഡിനുള്ളിൽ നേരിട്ട് ഫംഗ്ഷനുകളോ ഒബ്ജക്റ്റുകളോ നിർവചിക്കുന്നത് അനാവശ്യമായ റീ-റെൻഡറുകളിലേക്ക് നയിച്ചേക്കാം, പ്രത്യേകിച്ച് ഇവ ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് പ്രോപ്പുകളായി പാസ് ചെയ്യുമ്പോൾ. ഓരോ തവണയും പാരന്റ് കമ്പോണന്റ് റെൻഡർ ചെയ്യുമ്പോൾ, ഒരു പുതിയ ഫംഗ്ഷൻ അല്ലെങ്കിൽ ഒബ്ജക്റ്റ് ഉണ്ടാക്കുന്നു, ഇത് അടിസ്ഥാന ലോജിക്കോ ഡാറ്റയോ അതേപടി തുടർന്നാലും, ചൈൽഡ് കമ്പോണന്റ് ഒരു പ്രോപ്പ് മാറ്റം തിരിച്ചറിയാനും വീണ്ടും റെൻഡർ ചെയ്യാനും കാരണമാകുന്നു.

പകരം, ഈ ഫംഗ്ഷനുകളോ ഒബ്ജക്റ്റുകളോ റെൻഡർ മെത്തേഡിന് പുറത്ത് നിർവചിക്കുക, അവയെ മെമ്മോയിസ് ചെയ്യാൻ useCallback അല്ലെങ്കിൽ useMemo ഉപയോഗിക്കുന്നത് ഉത്തമമാണ്. ഇത് ഒരേ ഫംഗ്ഷൻ അല്ലെങ്കിൽ ഒബ്ജക്റ്റ് ഇൻസ്റ്റൻസ് റെൻഡറുകളിലുടനീളം ചൈൽഡ് കമ്പോണന്റിലേക്ക് പാസ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, അതുവഴി അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നു.

            import React, { useCallback } from 'react';

function MyComponent(props) {
  // Avoid this: inline function creation
  // <button onClick={() => props.onClick(props.data)}>Click Me</button>

  // Use useCallback to memoize the function
  const handleClick = useCallback(() => {
    props.onClick(props.data);
  }, [props.data, props.onClick]);

  return <button onClick={handleClick}>Click Me</button>;
}

export default MyComponent;

            

              
                Copy
              
            
          

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ

ഈ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ പ്രായോഗികമായി എങ്ങനെ പ്രയോഗിക്കാം എന്ന് വിശദീകരിക്കാൻ, നമുക്ക് ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ പരിഗണിക്കാം:

• ഇ-കൊമേഴ്‌സ് ഉൽപ്പന്ന ലിസ്റ്റ്: നൂറുകണക്കിന് ഇനങ്ങളുള്ള ഒരു ഉൽപ്പന്ന ലിസ്റ്റ്, സ്ക്രീനിൽ കാണുന്ന ഉൽപ്പന്നങ്ങൾ മാത്രം റെൻഡർ ചെയ്യാൻ വെർച്വലൈസേഷൻ ഉപയോഗിച്ച് ഒപ്റ്റിമൈസ് ചെയ്യാവുന്നതാണ്. ഓരോ ഉൽപ്പന്ന ഇനങ്ങളുടെയും അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാൻ മെമ്മോയിസേഷൻ ഉപയോഗിക്കാം.
• തത്സമയ ചാറ്റ് ആപ്ലിക്കേഷൻ: സന്ദേശങ്ങളുടെ ഒരു സ്ട്രീം പ്രദർശിപ്പിക്കുന്ന ഒരു ചാറ്റ് ആപ്ലിക്കേഷൻ, സന്ദേശ കമ്പോണന്റുകൾ മെമ്മോയിസ് ചെയ്തും സന്ദേശ ഡാറ്റയിലെ മാറ്റങ്ങൾ കാര്യക്ഷമമായി കണ്ടെത്താൻ ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകൾ ഉപയോഗിച്ചും ഒപ്റ്റിമൈസ് ചെയ്യാവുന്നതാണ്.
• ഡാറ്റാ വിഷ്വലൈസേഷൻ ഡാഷ്‌ബോർഡ്: സങ്കീർണ്ണമായ ചാർട്ടുകളും ഗ്രാഫുകളും പ്രദർശിപ്പിക്കുന്ന ഒരു ഡാഷ്‌ബോർഡ്, ഓരോ വ്യൂവിനും ആവശ്യമായ ചാർട്ട് കമ്പോണന്റുകൾ മാത്രം ലോഡ് ചെയ്യാൻ കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിച്ച് ഒപ്റ്റിമൈസ് ചെയ്യാവുന്നതാണ്. ചാർട്ടുകൾ റെൻഡർ ചെയ്യുന്നതിനുള്ള ചെലവേറിയ കണക്കുകൂട്ടലുകൾക്ക് UseMemo പ്രയോഗിക്കാവുന്നതാണ്.

റിയാക്റ്റ് പെർഫോമൻസ് പ്രൊഫൈലിംഗിനുള്ള മികച്ച രീതികൾ

റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ പ്രൊഫൈൽ ചെയ്യുമ്പോഴും ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോഴും പിന്തുടരേണ്ട ചില മികച്ച രീതികൾ താഴെ നൽകുന്നു:

• പ്രൊഡക്ഷൻ മോഡിൽ പ്രൊഫൈൽ ചെയ്യുക: ഡെവലപ്‌മെന്റ് മോഡിൽ പ്രകടനത്തെ ബാധിച്ചേക്കാവുന്ന അധിക പരിശോധനകളും മുന്നറിയിപ്പുകളും ഉൾപ്പെടുന്നു. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനത്തിന്റെ കൃത്യമായ ചിത്രം ലഭിക്കാൻ എപ്പോഴും പ്രൊഡക്ഷൻ മോഡിൽ പ്രൊഫൈൽ ചെയ്യുക.
• ഏറ്റവും കൂടുതൽ സ്വാധീനം ചെലുത്തുന്ന മേഖലകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ ഏറ്റവും വലിയ പ്രകടന തടസ്സങ്ങൾ ഉണ്ടാക്കുന്ന മേഖലകൾ കണ്ടെത്തുകയും ആ മേഖലകൾ ആദ്യം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് മുൻഗണന നൽകുകയും ചെയ്യുക.
• അളക്കുക, അളക്കുക, അളക്കുക: നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷനുകൾ യഥാർത്ഥത്തിൽ പ്രകടനം മെച്ചപ്പെടുത്തുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ അവയുടെ സ്വാധീനം എപ്പോഴും അളക്കുക.
• അമിതമായി ഒപ്റ്റിമൈസ് ചെയ്യരുത്: ആവശ്യമുള്ളപ്പോൾ മാത്രം ഒപ്റ്റിമൈസ് ചെയ്യുക. മുൻകൂട്ടിയുള്ള ഒപ്റ്റിമൈസേഷൻ സങ്കീർണ്ണവും അനാവശ്യവുമായ കോഡിലേക്ക് നയിച്ചേക്കാം.
• അപ്-റ്റു-ഡേറ്റായിരിക്കുക: ഏറ്റവും പുതിയ പ്രകടന മെച്ചപ്പെടുത്തലുകളിൽ നിന്ന് പ്രയോജനം നേടുന്നതിന് നിങ്ങളുടെ റിയാക്റ്റ് പതിപ്പും ഡിപൻഡൻസികളും അപ്-റ്റു-ഡേറ്റായി സൂക്ഷിക്കുക.

ഉപസംഹാരം

റിയാക്റ്റ് പെർഫോമൻസ് പ്രൊഫൈലിംഗ് ഏതൊരു റിയാക്റ്റ് ഡെവലപ്പർക്കും അത്യാവശ്യമായ ഒരു കഴിവാണ്. കമ്പോണന്റുകൾ എങ്ങനെ റെൻഡർ ചെയ്യുന്നു എന്ന് മനസ്സിലാക്കുന്നതിലൂടെയും ഉചിതമായ പ്രൊഫൈലിംഗ് ടൂളുകളും ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളും ഉപയോഗിക്കുന്നതിലൂടെയും, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനവും ഉപയോക്തൃ അനുഭവവും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ നിങ്ങൾക്ക് കഴിയും. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പതിവായി പ്രൊഫൈൽ ചെയ്യാനും ഏറ്റവും കൂടുതൽ സ്വാധീനം ചെലുത്തുന്ന മേഖലകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാനും നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷനുകളുടെ ഫലങ്ങൾ അളക്കാനും ഓർമ്മിക്കുക. ഈ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ സങ്കീർണ്ണതയോ ആഗോള ഉപയോക്തൃ അടിത്തറയോ പരിഗണിക്കാതെ, വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതും ഉപയോഗിക്കാൻ ആസ്വാദ്യകരവുമാണെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് കഴിയും.