ஜாவாஸ்கிரிப்ட் மாட்யூல் புரொஃபைலிங்: செயல்திறன் பகுப்பாய்வில் ஒரு ஆழமான பார்வை

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

மாட்யூல் புரொஃபைலிங் என்பது தனிப்பட்ட ஜாவாஸ்கிரிப்ட் மாட்யூல்களின் செயல்திறன் பண்புகளை பகுப்பாய்வு செய்யும் ஒரு முறையான செயல்முறையாகும். இது "பயன்பாடு மெதுவாக உள்ளது" என்ற தெளிவற்ற உணர்வுகளைத் தாண்டி, தரவு சார்ந்த நுண்ணறிவுகளுக்குச் செல்வதாகும், அதாவது, "`data-visualization` மாட்யூல் நமது ஆரம்ப பண்டில் அளவிற்கு 500KB சேர்க்கிறது மற்றும் அதன் துவக்கத்தின் போது பிரதான திரெட்டை 200ms க்கு தடுக்கிறது." இந்த வழிகாட்டி உங்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல்களை திறம்பட புரொஃபைல் செய்ய தேவையான கருவிகள், நுட்பங்கள் மற்றும் மனநிலை பற்றிய விரிவான கண்ணோட்டத்தை வழங்கும், இதன் மூலம் உலகளாவிய பார்வையாளர்களுக்காக வேகமான, திறமையான பயன்பாடுகளை உருவாக்க முடியும்.

மாட்யூல் புரொஃபைலிங் ஏன் முக்கியமானது

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

கோர் வெப் வைட்டல்ஸ் (CWV) மீதான தாக்கம்

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

• Largest Contentful Paint (LCP): பெரிய ஜாவாஸ்கிரிப்ட் பண்டில்கள் பிரதான திரெட்டைத் தடுக்கலாம், முக்கியமான உள்ளடக்கத்தை ரெண்டரிங் செய்வதைத் தாமதப்படுத்தி, LCP-ஐ எதிர்மறையாகப் பாதிக்கலாம்.
• Interaction to Next Paint (INP): இந்த அளவீடு பதிலளிக்கும் தன்மையை அளவிடுகிறது. CPU-தீவிர மாட்யூல்கள் நீண்ட பணிகளைச் செய்யும் போது பிரதான திரெட்டைத் தடுக்கலாம், இதனால் கிளிக்குகள் அல்லது விசை அழுத்தங்கள் போன்ற பயனர் தொடர்புகளுக்கு உலாவி பதிலளிப்பதைத் தடுக்கிறது, இது அதிக INP-க்கு வழிவகுக்கிறது.
• Cumulative Layout Shift (CLS): இட ஒதுக்கீடு செய்யாமல் DOM-ஐ கையாளும் ஜாவாஸ்கிரிப்ட் எதிர்பாராத லேஅவுட் மாற்றங்களை ஏற்படுத்தி, CLS ஸ்கோரைப் பாதிக்கலாம்.

பண்டில் அளவு மற்றும் நெட்வொர்க் தாமதம்

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

CPU இயக்கச் செலவு

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

குறியீடு ஆரோக்கியம் மற்றும் பராமரிப்பு

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

மாட்யூல் புரொஃபைலிங்கின் இரண்டு தூண்கள்

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

தூண் 1: நிலையான பகுப்பாய்வு - வரிசைப்படுத்தலுக்கு முன் பண்டலைப் பகுப்பாய்வு செய்தல்

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

முக்கிய கருவி: பண்டில் அனலைசர்கள்

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

• Webpack Bundle Analyzer: Webpack பயன்படுத்தும் திட்டங்களுக்கான மிகவும் பிரபலமான தேர்வு. இது ஒரு தெளிவான, வண்ண-குறியிடப்பட்ட ட்ரீமேப்பை வழங்குகிறது, அங்கு ஒவ்வொரு செவ்வகத்தின் பரப்பளவும் மாட்யூலின் அளவிற்கு விகிதாசாரமாக இருக்கும். வெவ்வேறு பிரிவுகளின் மீது சுட்டியை வைத்து, மூல கோப்பு அளவு, பாகுபடுத்தப்பட்ட அளவு மற்றும் ஜிசிப் செய்யப்பட்ட அளவு ஆகியவற்றைக் காணலாம், இது ஒரு மாட்யூலின் செலவைப் பற்றிய முழுமையான படத்தை உங்களுக்கு வழங்குகிறது.
• Rollup Plugin Visualizer: Rollup பண்ட்லரைப் பயன்படுத்தும் டெவலப்பர்களுக்கான இதே போன்ற கருவி. இது உங்கள் பண்டிலின் கலவையை காட்சிப்படுத்தும் ஒரு HTML கோப்பை உருவாக்குகிறது, இது பெரிய சார்புகளைக் கண்டறிய உதவுகிறது.
• Source Map Explorer: இந்த கருவி சோர்ஸ் மேப்களை உருவாக்கக்கூடிய எந்த பண்ட்லருடனும் வேலை செய்யும். இது தொகுக்கப்பட்ட குறியீட்டை பகுப்பாய்வு செய்து, அதை உங்கள் அசல் மூல கோப்புகளுடன் மீண்டும் பொருத்துவதற்கு சோர்ஸ் மேப்பைப் பயன்படுத்துகிறது. இது மூன்றாம் தரப்பு சார்புகள் மட்டுமல்ல, உங்கள் சொந்த குறியீட்டின் எந்தப் பகுதிகள் வீக்கத்திற்கு பங்களிக்கின்றன என்பதைக் கண்டறிய குறிப்பாக பயனுள்ளதாக இருக்கும்.

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

தூண் 2: டைனமிக் பகுப்பாய்வு - இயக்க நேரத்தில் புரொஃபைலிங் செய்தல்

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

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

Chrome, Firefox, மற்றும் Edge போன்ற உலாவிகளில் உள்ள செயல்திறன் (Performance) தாவல் டைனமிக் பகுப்பாய்விற்கான மிகவும் சக்திவாய்ந்த கருவியாகும். இது நெட்வொர்க் கோரிக்கைகள் முதல் ரெண்டரிங் மற்றும் ஸ்கிரிப்ட் இயக்கம் வரை உலாவி செய்யும் எல்லாவற்றின் விரிவான காலவரிசையைப் பதிவு செய்ய உங்களை அனுமதிக்கிறது.

• ஃபிளேம் சார்ட்: இது செயல்திறன் தாவலில் உள்ள மையக் காட்சிப்படுத்தல் ஆகும். இது காலப்போக்கில் பிரதான திரெட்டின் செயல்பாட்டைக் காட்டுகிறது. "Main" டிராக்கில் உள்ள நீண்ட, அகலமான தொகுதிகள் UI-ஐத் தடுத்து, மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும் "நீண்ட பணிகள்" ஆகும். இந்தப் பணிகளை பெரிதாக்குவதன் மூலம், நீங்கள் ஜாவாஸ்கிரிப்ட் அழைப்பு அடுக்கைக் காணலாம்—எந்தச் செயல்பாடு எந்தச் செயல்பாட்டை அழைத்தது என்பதற்கான மேலிருந்து கீழான பார்வை—இது தடையின் மூலத்தை ஒரு குறிப்பிட்ட மாட்யூலுக்குத் திரும்பக் கண்டறிய உங்களை அனுமதிக்கிறது.
• பாட்டம்-அப் மற்றும் கால் ட்ரீ தாவல்கள்: இந்த தாவல்கள் பதிவிலிருந்து திரட்டப்பட்ட தரவை வழங்குகின்றன. "Bottom-Up" பார்வை குறிப்பாக பயனுள்ளதாக இருக்கும், ஏனெனில் இது தனிப்பட்ட முறையில் செயல்படுத்த அதிக நேரம் எடுத்த செயல்பாடுகளை பட்டியலிடுகிறது. "மொத்த நேரம்" மூலம் வரிசைப்படுத்துவதன் மூலம், எந்த செயல்பாடுகள், மற்றும் அதன் மூலம் எந்த மாட்யூல்கள், பதிவு செய்யும் காலத்தில் மிகவும் கணக்கீட்டு ரீதியாக விலை உயர்ந்தவை என்பதை நீங்கள் காணலாம்.

நுட்பம்: `performance.measure()` உடன் தனிப்பயன் செயல்திறன் குறிகள்

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

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

டைனமிக்காக இறக்குமதி செய்யப்பட்ட ஒரு மாட்யூலை புரொஃபைல் செய்வதற்கான உதாரணம்:

            async function loadAndRunHeavyModule() {
  performance.mark('heavy-module-start');

  try {
    const heavyModule = await import('./heavy-module.js');
    heavyModule.doComplexCalculation();
  } catch (error) {
    console.error("Failed to load module", error);
  } finally {
    performance.mark('heavy-module-end');
    performance.measure(
      'Heavy Module Load and Execution',
      'heavy-module-start',
      'heavy-module-end'
    );
  }
}

            

              
                Copy
              
            
          

நீங்கள் ஒரு செயல்திறன் சுயவிவரத்தைப் பதிவுசெய்யும்போது, இந்த தனிப்பயன் "Heavy Module Load and Execution" அளவீடு "Timings" டிராக்கில் தோன்றும், இது அந்த செயல்பாட்டிற்கு ஒரு துல்லியமான, தனிமைப்படுத்தப்பட்ட அளவீட்டை உங்களுக்கு வழங்குகிறது.

Node.js இல் புரொஃபைலிங்

சர்வர்-பக்க ரெண்டரிங் (SSR) அல்லது பின்தள பயன்பாடுகளுக்கு, நீங்கள் உலாவி DevTools-ஐப் பயன்படுத்த முடியாது. Node.js V8 இயந்திரத்தால் இயக்கப்படும் ஒரு உள்ளமைக்கப்பட்ட புரொஃபைலரைக் கொண்டுள்ளது. நீங்கள் உங்கள் ஸ்கிரிப்டை --prof கொடியுடன் இயக்கலாம், இது ஒரு பதிவு கோப்பை உருவாக்குகிறது. இந்தக் கோப்பை பின்னர் --prof-process கொடியுடன் செயலாக்கி, செயல்பாட்டு இயக்க நேரங்களின் மனிதனால் படிக்கக்கூடிய பகுப்பாய்வை உருவாக்கலாம், இது உங்கள் சர்வர்-பக்க மாட்யூல்களில் உள்ள தடைகளைக் கண்டறிய உதவுகிறது.

மாட்யூல் புரொஃபைலிங்கிற்கான ஒரு நடைமுறை பணிப்பாய்வு

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

படி 1: நிலையான பகுப்பாய்வுடன் தொடங்கவும் (எளிதில் கிடைக்கும் பலன்கள்)

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

• பெரிய, ஒற்றை நூலகங்கள்: நீங்கள் ஒரு சில செயல்பாடுகளை மட்டுமே பயன்படுத்தும் ஒரு பெரிய சார்ட்டிங் அல்லது பயன்பாட்டு நூலகம் உள்ளதா?
• நகல் சார்புகள்: நீங்கள் தற்செயலாக ஒரே நூலகத்தின் பல பதிப்புகளைச் சேர்க்கிறீர்களா?
• ட்ரீ-ஷேக் செய்யப்படாத மாட்யூல்கள்: ஒரு நூலகம் ட்ரீ-ஷேக்கிங்கிற்காக கட்டமைக்கப்படவில்லையா, இதனால் நீங்கள் ஒரு பகுதியை மட்டும் இறக்குமதி செய்தாலும் அதன் முழு குறியீட்டுத் தளமும் சேர்க்கப்படுகிறதா?

இந்த பகுப்பாய்வின் அடிப்படையில், நீங்கள் உடனடி நடவடிக்கை எடுக்கலாம். உதாரணமாக, `moment.js` உங்கள் பண்டிலின் ஒரு பெரிய பகுதியாக இருப்பதைக் கண்டால், அதை `date-fns` அல்லது `day.js` போன்ற சிறிய மாற்றுகளுடன் மாற்றுவதை நீங்கள் ஆராயலாம், அவை மிகவும் மாடுலர் மற்றும் ட்ரீ-ஷேக்கபிள் ஆகும்.

படி 2: செயல்திறன் அடிப்படையை நிறுவுதல்

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

படி 3: டைனமிக் புரொஃபைலிங் மற்றும் கருதுகோள் சோதனை

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

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

படி 4: மேம்படுத்தி மீண்டும் அளவிடவும்

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

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

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

படி 5: தானியங்குபடுத்தி கண்காணிக்கவும்

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

• செயல்திறன் பட்ஜெட்டுகள்: Lighthouse CI போன்ற கருவிகளைப் பயன்படுத்தி செயல்திறன் பட்ஜெட்களை அமைக்கவும் (எ.கா., TBT 200ms-க்கு குறைவாக இருக்க வேண்டும், பிரதான பண்டில் அளவு 250KB-க்கு குறைவாக இருக்க வேண்டும்). இந்த பட்ஜெட்டுகள் மீறப்பட்டால் உங்கள் CI பைப்லைன் பில்டை தோல்வியடையச் செய்ய வேண்டும்.
• உண்மையான பயனர் கண்காணிப்பு (RUM): உலகெங்கிலும் உள்ள உங்கள் உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரிக்க ஒரு RUM கருவியை ஒருங்கிணைக்கவும். இது உங்கள் பயன்பாடு வெவ்வேறு சாதனங்கள், நெட்வொர்க்குகள் மற்றும் புவியியல் இருப்பிடங்களில் எவ்வாறு செயல்படுகிறது என்பது பற்றிய நுண்ணறிவுகளை உங்களுக்கு வழங்கும், இது உள்ளூர் சோதனையின் போது நீங்கள் தவறவிடக்கூடிய சிக்கல்களைக் கண்டறிய உதவும்.

பொதுவான ஆபத்துகளும் அவற்றை எவ்வாறு தவிர்ப்பது

நீங்கள் புரொஃபைலிங்கில் ஆழமாகச் செல்லும்போது, இந்த பொதுவான தவறுகளை மனதில் கொள்ளுங்கள்:

• டெவலப்மென்ட் பயன்முறையில் புரொஃபைலிங்: ஒரு டெவலப்மென்ட் சர்வர் பில்டை ஒருபோதும் புரொஃபைல் செய்யாதீர்கள். டெவ் பில்டுகளில் ஹாட்-ரீலோடிங் மற்றும் பிழைத்திருத்தத்திற்கான கூடுதல் குறியீடு அடங்கும், அவை சிறிதாக்கப்படவில்லை, மற்றும் செயல்திறனுக்காக மேம்படுத்தப்படவில்லை. எப்போதும் உற்பத்தி போன்ற பில்டை புரொஃபைல் செய்யவும்.
• நெட்வொர்க் மற்றும் CPU த்ராட்லிங்கை புறக்கணித்தல்: உங்கள் டெவலப்மென்ட் மெஷின் உங்கள் சராசரி பயனரின் சாதனத்தை விட மிகவும் சக்தி வாய்ந்ததாக இருக்கலாம். உங்கள் உலாவியின் DevTools-இல் உள்ள த்ராட்லிங் அம்சங்களைப் பயன்படுத்தி மெதுவான நெட்வொர்க் இணைப்புகளையும் (எ.கா., "Fast 3G") மற்றும் மெதுவான CPU-களையும் (எ.கா., "4x slowdown") உருவகப்படுத்தி, பயனர் அனுபவத்தைப் பற்றிய யதார்த்தமான படத்தைப் பெறுங்கள்.
• மைக்ரோ-ஆப்டிமைசேஷன்களில் கவனம் செலுத்துதல்: பரேட்டோ கொள்கை (80/20 விதி) செயல்திறனுக்கும் பொருந்தும். மற்றொரு மாட்யூல் பிரதான திரெட்டை 300 மில்லி விநாடிகளுக்குத் தடுத்தால், 2 மில்லி விநாடிகளைச் சேமிக்கும் ஒரு செயல்பாட்டை மேம்படுத்த நாட்களைச் செலவிடாதீர்கள். எப்போதும் மிகப்பெரிய தடைகளை முதலில் சமாளிக்கவும். ஃபிளேம் சார்ட் இவற்றை எளிதாகக் கண்டறிய உதவுகிறது.
• மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மறந்துவிடுதல்: உங்கள் பயன்பாட்டின் செயல்திறன் அது இயக்கும் அனைத்து குறியீடுகளாலும் பாதிக்கப்படுகிறது, உங்கள் சொந்த குறியீட்டால் மட்டுமல்ல. பகுப்பாய்வு, விளம்பரங்கள் அல்லது வாடிக்கையாளர் ஆதரவு விட்ஜெட்டுகளுக்கான மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள் பெரும்பாலும் செயல்திறன் சிக்கல்களின் முக்கிய ஆதாரங்களாகும். அவற்றின் தாக்கத்தை புரொஃபைல் செய்து, அவற்றை லேசி-லோடிங் செய்வதைக் கருத்தில் கொள்ளவும் அல்லது இலகுவான மாற்றுகளைக் கண்டறியவும்.

முடிவு: தொடர்ச்சியான ஒரு நடைமுறையாக புரொஃபைலிங்

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

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