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

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

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

C அல்லது C++ போன்ற மொழிகளில், நினைவகத்தை கைமுறையாக ஒதுக்குவதற்கும் விடுவிப்பதற்கும் டெவலப்பர்கள் பொறுப்பாவார்கள். இது நுண்ணிய கட்டுப்பாட்டை வழங்குகிறது, ஆனால் நினைவக கசிவுகள் (பயன்படுத்தப்படாத நினைவகத்தை விடுவிக்கத் தவறுதல்) மற்றும் தொங்கும் சுட்டிகள் (விடுவிக்கப்பட்ட நினைவகத்தை அணுகுதல்) அபாயத்தையும் ஏற்படுத்துகிறது, இது பயன்பாட்டு செயலிழப்புகள் மற்றும் செயல்திறன் குறைவுக்கு வழிவகுக்கும். ஜாவாஸ்கிரிப்ட், எனவே ரியாக்ட், தானியங்கி நினைவக மேலாண்மையை செயல்படுத்துகிறது, அதாவது ஜாவாஸ்கிரிப்ட் இயந்திரம் (எ.கா., Chrome's V8, Firefox's SpiderMonkey) நினைவக ஒதுக்கீடு மற்றும் விடுவிப்பை தானாகவே கையாளுகிறது.

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

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

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

ஜாவாஸ்கிரிப்ட் இயந்திரங்களின் பங்கு (V8, SpiderMonkey)

ரியாக்ட் நேரடியாக குப்பை சேகரிப்பைக் கட்டுப்படுத்துவதில்லை; இது பயனரின் உலாவியில் அல்லது Node.js சூழலில் உள்ள அடிப்படை ஜாவாஸ்கிரிப்ட் இயந்திரத்தை நம்பியுள்ளது. மிகவும் பொதுவான ஜாவாஸ்கிரிப்ட் இயந்திரங்களில்:

• V8 (Chrome, Edge, Node.js): V8 அதன் செயல்திறன் மற்றும் மேம்பட்ட குப்பை சேகரிப்பு நுட்பங்களுக்கு பெயர் பெற்றது. இது ஒரு ஜெனரேஷனல் குப்பை சேகரிப்பானைப் பயன்படுத்துகிறது, இது ஹீப்பை இரண்டு முக்கிய தலைமுறைகளாகப் பிரிக்கிறது: இளைய தலைமுறை (குறுகிய கால பொருள்கள் அடிக்கடி சேகரிக்கப்படும் இடம்) மற்றும் பழைய தலைமுறை (நீண்ட கால பொருள்கள் வசிக்கும் இடம்).
• SpiderMonkey (Firefox): SpiderMonkey மற்றொரு உயர்-செயல்திறன் இயந்திரமாகும், இது ஒரு ஜெனரேஷனல் குப்பை சேகரிப்பானுடன் இதேபோன்ற அணுகுமுறையைப் பயன்படுத்துகிறது.
• JavaScriptCore (Safari): Safari மற்றும் iOS சாதனங்களில் பெரும்பாலும் பயன்படுத்தப்படும் JavaScriptCore அதன் சொந்த மேம்படுத்தப்பட்ட குப்பை சேகரிப்பு உத்திகளைக் கொண்டுள்ளது.

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

ரியாக்ட் பயன்பாடுகளில் நினைவக கசிவுகளின் பொதுவான காரணங்கள்

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

• நிகழ்வு கேட்போர் இறக்கப்படவில்லை: ஒரு கூறில் நிகழ்வு கேட்போரை (எ.கா., `window.addEventListener`) இணைத்து, கூறு இறக்கும்போது அவற்றை அகற்றத் தவறுவது கசிவுகளின் ஒரு பொதுவான ஆதாரமாகும். நிகழ்வு கேட்போர் கூறு அல்லது அதன் தரவுக்கு ஒரு குறிப்பைக் கொண்டிருந்தால், கூறு குப்பை சேகரிக்கப்பட முடியாது.
• டைமர்கள் மற்றும் இடைவெளிகள் அழிக்கப்படவில்லை: நிகழ்வு கேட்போரைப் போலவே, ஒரு கூறு இறக்கும்போது `setTimeout`, `setInterval`, அல்லது `requestAnimationFrame` ஐ அழிக்காமல் பயன்படுத்துவது நினைவக கசிவுகளுக்கு வழிவகுக்கும். இந்த டைமர்கள் கூறின் குறிப்புகளை வைத்திருக்கின்றன, அதன் குப்பை சேகரிப்பைத் தடுக்கின்றன.
• குளோசர்கள்: வெளிப்புறச் செயல்பாடு இயங்குவதை முடித்த பிறகும், குளோசர்கள் அவற்றின் லெக்சிகல் ஸ்கோப்பில் உள்ள மாறிகளின் குறிப்புகளை வைத்திருக்க முடியும். ஒரு குளோசர் ஒரு கூறின் தரவைப் பிடித்தால், கூறு குப்பை சேகரிக்கப்படாமல் போகலாம்.
• சுழற்சி குறிப்புகள்: இரண்டு பொருள்கள் ஒன்றுக்கொன்று குறிப்புகளை வைத்திருந்தால், ஒரு சுழற்சி குறிப்பு உருவாக்கப்படுகிறது. இரண்டு பொருள்களும் நேரடியாக வேறு எங்கும் குறிப்பிடப்படாவிட்டாலும், குப்பை சேகரிப்பான் அவை குப்பையா என்பதைத் தீர்மானிக்க சிரமப்படலாம், மேலும் அவற்றை வைத்திருக்கலாம்.
• பெரிய தரவு கட்டமைப்புகள்: கூறு நிலை அல்லது props இல் அதிகப்படியான பெரிய தரவு கட்டமைப்புகளைச் சேமிப்பது நினைவகexhaustion க்கு வழிவகுக்கும்.
• `useMemo` மற்றும் `useCallback` இன் தவறான பயன்பாடு: இந்த ஹூக்ஸ் மேம்படுத்தலுக்காக நோக்கம் கொண்டவை என்றாலும், அவற்றை தவறாகப் பயன்படுத்துவது தேவையற்ற பொருள் உருவாக்கத்திற்கு வழிவகுக்கும் அல்லது அவை சார்புகளை தவறாகப் பிடித்தால் பொருள்கள் குப்பை சேகரிக்கப்படுவதைத் தடுக்கலாம்.
• முறையற்ற DOM கையாளுதல்: ரியாக்ட் கூறிற்குள் DOM உறுப்புகளை கைமுறையாக உருவாக்குவது அல்லது DOM ஐ நேரடியாக மாற்றுவது கவனமாக கையாளப்படாவிட்டால் நினைவக கசிவுகளுக்கு வழிவகுக்கும், குறிப்பாக சுத்தம் செய்யப்படாத உறுப்புகள் உருவாக்கப்பட்டால்.

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

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

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

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

  செயல்முறை பொதுவாக டெவலப்பர் கருவிகளைத் திறப்பது (வழக்கமாக வலது கிளிக் செய்து "Inspect" அல்லது F12 போன்ற விசைப்பலகை குறுக்குவழியைப் பயன்படுத்துவதன் மூலம்), "Memory" அல்லது "Performance" தாவலுக்குச் செல்வது, மற்றும் ஸ்னாப்ஷாட்கள் அல்லது பதிவுகளை எடுப்பது ஆகியவை அடங்கும். கருவிகள் பின்னர் குறிப்பிட்ட பொருள்களையும் அவை எவ்வாறு குறிப்பிடப்படுகின்றன என்பதையும் காண உங்களை அனுமதிக்கிறது.

• ரியாக்ட் டெவலப்பர் கருவிகள்: ரியாக்ட் டெவலப்பர் கருவிகள் உலாவி நீட்டிப்பு கூறு மரம் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது, இதில் கூறுகள் எவ்வாறு ரெண்டரிங் ஆகின்றன மற்றும் அவற்றின் props மற்றும் state ஆகியவை அடங்கும். நினைவக சுயவிவரத்திற்கு நேரடியாக இல்லாவிட்டாலும், கூறு உறவுகளைப் புரிந்துகொள்ள இது பயனுள்ளதாக இருக்கும், இது நினைவகம் தொடர்பான சிக்கல்களை பிழைத்திருத்த உதவும்.
• நினைவக சுயவிவர நூலகங்கள் மற்றும் தொகுப்புகள்: நினைவக கசிவு கண்டறிதலை தானியக்கமாக்க அல்லது மேம்பட்ட சுயவிவர அம்சங்களை வழங்க பல நூலகங்கள் மற்றும் தொகுப்புகள் உதவும். உதாரணங்கள்:
  • `why-did-you-render`: ரியாக்ட் கூறுகளின் தேவையற்ற மறு-ரெண்டர்களை அடையாளம் காண இந்த நூலகம் உதவுகிறது, இது செயல்திறனை பாதிக்கலாம் மற்றும் நினைவக சிக்கல்களை தீவிரப்படுத்தலாம்.
  • `react-perf-tool`: ரெண்டரிங் நேரங்கள் மற்றும் கூறு புதுப்பிப்புகள் தொடர்பான செயல்திறன் அளவீடுகள் மற்றும் பகுப்பாய்வுகளை வழங்குகிறது.
  • `memory-leak-finder` அல்லது ஒத்த கருவிகள்: சில நூலகங்கள் பொருள் குறிப்புகளைக் கண்காணிப்பதன் மூலமும் சாத்தியமான கசிவுகளைக் கண்டறிவதன் மூலமும் நினைவக கசிவு கண்டறிதலை குறிப்பாக நிவர்த்தி செய்கின்றன.
• குறியீடு ஆய்வு மற்றும் சிறந்த நடைமுறைகள்: குறியீடு ஆய்வுகள் மிக முக்கியம். வழக்கமான குறியீடு ஆய்வு நினைவக கசிவுகளைப் பிடிக்கலாம் மற்றும் குறியீட்டு தரத்தை மேம்படுத்தலாம். இந்த சிறந்த நடைமுறைகளை சீராக அமல்படுத்துங்கள்:
  • நிகழ்வு கேட்போரை இறக்க: `useEffect` இல் ஒரு கூறு இறக்கும்போது, கூறு ஏற்றுதல் போது சேர்க்கப்பட்ட நிகழ்வு கேட்போரை அகற்ற ஒரு துப்புரவு செயல்பாட்டைத் திரும்பப் பெறவும். எடுத்துக்காட்டு:

                
        useEffect(() => {
            const handleResize = () => { /* ... */ };
            window.addEventListener('resize', handleResize);
            return () => {
                window.removeEventListener('resize', handleResize);
            };
        }, []);
        
                
    
                  
                    Copy
                  
                
              

  • டைமர்களை அழிக்க: `useEffect` இல் உள்ள துப்புரவு செயல்பாட்டை `clearInterval` அல்லது `clearTimeout` ஐப் பயன்படுத்தி டைமர்களை அழிக்கப் பயன்படுத்தவும். எடுத்துக்காட்டு:

                
        useEffect(() => {
            const timerId = setInterval(() => { /* ... */ }, 1000);
            return () => {
                clearInterval(timerId);
            };
        }, []);
        
                
    
                  
                    Copy
                  
                
              

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

ரியாக்ட் கூறுகளுக்கான குறிப்பிட்ட மேம்படுத்தல் நுட்பங்கள்

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

• கூறு நினைவாக்கம்: செயல்பாட்டுக் கூறுகளை நினைவாக்க `React.memo` ஐப் பயன்படுத்தவும். கூறின் props மாறாமல் இருந்தால் இது மறு-ரெண்டர்களைத் தடுக்கிறது. இது தேவையற்ற கூறு மறு-ரெண்டர்கள் மற்றும் அதனுடன் தொடர்புடைய நினைவக ஒதுக்கீட்டைக் கணிசமாகக் குறைக்கிறது.

              
    const MyComponent = React.memo(function MyComponent(props) { /* ... */ });
    
              
  
                
                  Copy
                
              
            

• `useCallback` உடன் செயல்பாட்டு props ஐ நினைவாக்குதல்: குழந்தை கூறுகளுக்கு அனுப்பப்படும் செயல்பாட்டு props ஐ நினைவாக்க `useCallback` ஐப் பயன்படுத்தவும். செயல்பாட்டின் சார்புகள் மாறும்போது மட்டுமே குழந்தை கூறுகள் மறு-ரெண்டர் ஆவதை இது உறுதி செய்கிறது.

              
    const handleClick = useCallback(() => { /* ... */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

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

              
    const calculatedValue = useMemo(() => { /* Expensive calculation */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

• `useMemo` மற்றும் `useCallback` உடன் ரெண்டரிங் செயல்திறனை மேம்படுத்துதல்: எப்போது `useMemo` மற்றும் `useCallback` ஐப் பயன்படுத்துவது என்பதை கவனமாக பரிசீலிக்கவும். அவை மேலதிகச் செலவைச் சேர்ப்பதால், குறிப்பாக அதிக நிலை மாற்றங்களைக் கொண்ட ஒரு கூறில் அவற்றை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• குறியீடு பிரித்தல் மற்றும் சோம்பேறி ஏற்றுதல்: கூறுகள் மற்றும் குறியீட்டு தொகுதிகளை தேவைப்படும்போது மட்டுமே ஏற்றவும். குறியீடு பிரித்தல் மற்றும் சோம்பேறி ஏற்றுதல் ஆரம்ப தொகுப்பு அளவையும் நினைவகப் பாதையையும் குறைக்கிறது, ஆரம்ப ஏற்றுதல் நேரங்களையும் பதிலளிப்புத் திறனையும் மேம்படுத்துகிறது. ரியாக்ட் `React.lazy` மற்றும் `` உடன் உள்ளமைக்கப்பட்ட தீர்வுகளை வழங்குகிறது. தேவைக்கேற்ப பயன்பாட்டின் பகுதிகளை ஏற்ற ஒரு மாறும் `import()` அறிக்கையைப் பயன்படுத்த கருதுங்கள்.

              
     const MyComponent = React.lazy(() => import('./MyComponent'));
     
     function App() {
         return (
             Loading...

  }> ); }
  Copy