JavaScript தொகுதிக்கூறு அளவீடுகள்: செயல்திறனை அளவிடுதல் மற்றும் மேம்படுத்துதல்

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

JavaScript தொகுதிக்கூறு அளவீடுகளை ஏன் அளவிட வேண்டும்?

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

• மேம்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரம் மற்றும் அதிக பதிலளிக்கக்கூடிய தொடர்புகள் சிறந்த பயனர் அனுபவத்திற்கு நேரடியாக மொழிபெயர்க்கப்படுகின்றன. பயனர்கள் வேகமாகவும் திறமையாகவும் இருக்கும் வலைத்தளம் அல்லது பயன்பாட்டுடன் ஈடுபடுவதற்கான வாய்ப்புகள் அதிகம்.
• குறைக்கப்பட்ட அலைவரிசை நுகர்வு: தொகுதிக்கூறு அளவுகளை மேம்படுத்துவது நெட்வொர்க்கில் மாற்றப்படும் தரவுகளின் அளவைக் குறைக்கிறது, இது பயனர்கள் மற்றும் சேவையகம் இரண்டிற்கும் அலைவரிசையைச் சேமிக்கிறது. வரையறுக்கப்பட்ட தரவு திட்டங்கள் அல்லது மெதுவான இணைய இணைப்பு உள்ள பயனர்களுக்கு இது மிகவும் முக்கியமானது.
• மேம்படுத்தப்பட்ட SEO: Google போன்ற தேடுபொறிகள் பக்க ஏற்றுதல் வேகத்தை ஒரு தரவரிசை காரணியாக கருதுகின்றன. தொகுதிக்கூறு செயல்திறனை மேம்படுத்துவது உங்கள் வலைத்தளத்தின் தேடுபொறி மேம்படுத்தலை (SEO) தரவரிசையை மேம்படுத்தலாம்.
• செலவு சேமிப்பு: குறைக்கப்பட்ட அலைவரிசை நுகர்வு ஹோஸ்டிங் மற்றும் CDN சேவைகளில் குறிப்பிடத்தக்க செலவு சேமிப்புக்கு வழிவகுக்கும்.
• சிறந்த குறியீடு தரம்: தொகுதிக்கூறு அளவீடுகளை பகுப்பாய்வு செய்வது பெரும்பாலும் குறியீடு கட்டமைப்பை மேம்படுத்த, இறந்த குறியீட்டை அகற்ற மற்றும் செயல்திறன் தடைகளை அடையாளம் காண வாய்ப்புகளை வெளிப்படுத்துகிறது.

முக்கிய JavaScript தொகுதிக்கூறு அளவீடுகள்

உங்கள் JavaScript தொகுதிக்கூறுகளின் செயல்திறனை மதிப்பிட உதவும் பல முக்கிய அளவீடுகள் உள்ளன:

1. பொதி அளவு

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

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

எப்படி அளவிடுவது:

• Webpack பொதி பகுப்பாய்வி: உங்கள் பொதி உள்ளடக்கங்களின் ஒரு ஊடாடும் ட்ரீமேப் காட்சிப்படுத்தலை உருவாக்கும் ஒரு பிரபலமான கருவி, பெரிய சார்புகளை அடையாளம் காணவும், மேம்படுத்துவதற்கான சாத்தியமான பகுதிகளையும் அனுமதிக்கிறது. அதை டெவ் சார்பாக நிறுவவும்: `npm install --save-dev webpack-bundle-analyzer`.
• Rollup காட்சிப்படுத்தி: Webpack பொதி பகுப்பாய்வியைப் போன்றது, ஆனால் Rollup பொதியுருவாக்கிக்காக. `rollup-plugin-visualizer`.
• Parcel பொதி உருவாக்குபவர்: Parcel பெரும்பாலும் உள்ளமைக்கப்பட்ட பொதி அளவு பகுப்பாய்வு கருவிகளை உள்ளடக்கியது. விவரங்களுக்கு Parcel இன் ஆவணத்தைப் பார்க்கவும்.
• `gzip` மற்றும் `brotli` சுருக்கம்: எப்போதும் `gzip` அல்லது Brotli சுருக்கத்திற்கு *பிறகு* பொதி அளவுகளை அளவிடவும், இவை உற்பத்தியில் பொதுவாக பயன்படுத்தப்படும் சுருக்க வழிமுறைகள். `gzip-size` போன்ற கருவிகள் இதற்கு உதவலாம்: `npm install -g gzip-size`.

உதாரணம்:

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

2. ஏற்றுதல் நேரம்

ஏற்றுதல் நேரம் என்பது உங்கள் JavaScript தொகுதிக்கூறுகளைப் பதிவிறக்கி பாகுபடுத்த உலாவி எடுக்கும் நேரத்தைக் குறிக்கிறது.

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

எப்படி அளவிடுவது:

• உலாவியில் உருவாக்குனர் கருவிகள்: பெரும்பாலான உலாவிகள் பிணைய கோரிக்கைகளை பகுப்பாய்வு செய்யவும், மெதுவாக ஏற்றும் ஆதாரங்களை அடையாளம் காணவும் அனுமதிக்கும் உள்ளமைக்கப்பட்ட உருவாக்குனர் கருவிகளை வழங்குகின்றன. ஏற்றுதல் நேரத்தை அளவிடுவதற்கு "பிணையம்" தாவல் மிகவும் பயனுள்ளதாக இருக்கும்.
• WebPageTest: பல்வேறு இடங்கள் மற்றும் பிணைய நிலைமைகளிலிருந்து உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிக்க அனுமதிக்கும் ஒரு சக்திவாய்ந்த ஆன்லைன் கருவி. WebPageTest தனிப்பட்ட ஆதாரங்களைப் பதிவிறக்க எடுக்கும் நேரம் உட்பட ஏற்றுதல் நேரத்தைப் பற்றிய விரிவான தகவல்களை வழங்குகிறது.
• Lighthouse: Chrome உருவாக்குனர் கருவிகளில் ஒருங்கிணைக்கப்பட்ட செயல்திறன் தணிக்கை கருவி. Lighthouse உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த விரிவான அறிக்கையை வழங்குகிறது, மேம்படுத்துவதற்கான பரிந்துரைகளையும் உள்ளடக்கியது.
• உண்மையான பயனர் கண்காணிப்பு (RUM): RUM கருவிகள் களத்தில் உள்ள உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைப் சேகரிக்கின்றன, இது உண்மையான பயனர் அனுபவத்தைப் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது. New Relic Browser, Datadog RUM மற்றும் Sentry ஆகியவை உதாரணங்களாகும்.

உதாரணம்:

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

3. இயக்க நேரம்

இயக்க நேரம் என்பது உங்கள் JavaScript குறியீட்டை இயக்க உலாவி எடுக்கும் நேரத்தைக் குறிக்கிறது.

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

எப்படி அளவிடுவது:

• உலாவியில் உருவாக்குனர் கருவிகள்: Chrome உருவாக்குனர் கருவிகளில் உள்ள "செயல்திறன்" தாவல் உங்கள் JavaScript குறியீட்டை சுயவிவரமாக்கவும், செயல்திறன் தடைகளை அடையாளம் காணவும் உங்களை அனுமதிக்கிறது. உங்கள் பயன்பாட்டின் செயல்பாட்டின் ஒரு காலவரிசையை நீங்கள் பதிவு செய்யலாம் மற்றும் எந்த செயல்பாடுகள் இயக்க அதிக நேரம் எடுத்துக்கொள்கின்றன என்பதைப் பார்க்கலாம்.
• `console.time()` மற்றும் `console.timeEnd()`: குறிப்பிட்ட குறியீடு தொகுதிகளின் இயக்க நேரத்தை அளவிட இந்த செயல்பாடுகளைப் பயன்படுத்தலாம்: `console.time('myFunction'); myFunction(); console.timeEnd('myFunction');`.
• JavaScript சுயவிவரமாக்கிகள்: சிறப்பு JavaScript சுயவிவரமாக்கிகள் (எ.கா., IDE களில் சேர்க்கப்பட்டவை அல்லது தனியான கருவிகளாக கிடைக்கும்) குறியீடு இயக்கத்தைப் பற்றிய கூடுதல் விரிவான நுண்ணறிவுகளை வழங்க முடியும்.

உதாரணம்:

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

4. ஊடாடும் நேரத்திற்கு (TTI)

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

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

எப்படி அளவிடுவது:

• Lighthouse: Lighthouse அதன் செயல்திறன் தணிக்கையின் ஒரு பகுதியாக ஒரு தானியங்கி TTI மதிப்பெண்ணை வழங்குகிறது.
• WebPageTest: WebPageTest மற்ற முக்கிய செயல்திறன் அளவீடுகளுடன் TTI ஐயும் தெரிவிக்கிறது.
• Chrome உருவாக்குனர் கருவிகள்: நேரடியாக TTI ஐத் தெரிவிக்காதபோது, Chrome DevTools செயல்திறன் தாவல் பிரதான-த்ரெட் செயல்பாட்டை பகுப்பாய்வு செய்யவும், ஒரு நீண்ட TTI க்கு பங்களிக்கும் காரணிகளை அடையாளம் காணவும் உங்களை அனுமதிக்கிறது. நீண்ட காலமாக இயங்கும் பணிகளையும், தடுக்கும் ஸ்கிரிப்டுகளையும் பாருங்கள்.

உதாரணம்:

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

5. முதல் உள்ளடக்க ஓவியம் (FCP) & மிகப்பெரிய உள்ளடக்க ஓவியம் (LCP)

முதல் உள்ளடக்க ஓவியம் (FCP) முதல் உரை அல்லது படம் திரையில் வரையப்படும் நேரத்தைக் குறிக்கிறது. இது ஏதோ நடந்து கொண்டிருக்கிறது என்ற உணர்வை பயனர்களுக்கு அளிக்கிறது.

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

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

எப்படி அளவிடுவது:

• Lighthouse: Lighthouse தானாகவே FCP மற்றும் LCP ஐக் கணக்கிடுகிறது.
• WebPageTest: WebPageTest மற்ற அளவீடுகளுடன் FCP மற்றும் LCP ஐ தெரிவிக்கிறது.
• Chrome உருவாக்குனர் கருவிகள்: செயல்திறன் தாவல் ஓவியம் நிகழ்வுகள் குறித்த விரிவான தகவல்களை வழங்குகிறது மற்றும் LCP க்கு பங்களிக்கும் கூறுகளை அடையாளம் காண உதவும்.
• உண்மையான பயனர் கண்காணிப்பு (RUM): RUM கருவிகள் உண்மையான பயனர்களுக்காக FCP மற்றும் LCP ஐ கண்காணிக்க முடியும், இது வெவ்வேறு சாதனங்கள் மற்றும் பிணைய நிலைமைகளில் செயல்திறன் குறித்த நுண்ணறிவுகளை வழங்குகிறது.

உதாரணம்:

மெதுவான LCP உகந்ததாக இல்லாத ஒரு பெரிய ஹீரோ படத்தால் ஏற்படலாம். படத்தை மேம்படுத்துவது (சுருக்கம், சரியான அளவிடுதல், WebP போன்ற நவீன பட வடிவமைப்பைப் பயன்படுத்துதல்) LCP ஐ கணிசமாக மேம்படுத்தலாம்.

JavaScript தொகுதிக்கூறு செயல்திறனை பகுப்பாய்வு செய்வதற்கான கருவிகள்

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

• Webpack பொதி பகுப்பாய்வி: முன்னர் குறிப்பிட்டபடி, இந்த கருவி உங்கள் பொதி உள்ளடக்கங்களின் காட்சி பிரதிநிதித்துவத்தை வழங்குகிறது.
• Rollup காட்சிப்படுத்தி: Webpack பொதி பகுப்பாய்வியைப் போன்றது, ஆனால் Rollup க்காக வடிவமைக்கப்பட்டுள்ளது.
• Lighthouse: Chrome உருவாக்குனர் கருவிகளில் ஒருங்கிணைக்கப்பட்ட ஒரு விரிவான செயல்திறன் தணிக்கை கருவி.
• WebPageTest: பல்வேறு இடங்களில் இருந்து வலைத்தள செயல்திறனை சோதிக்க ஒரு சக்திவாய்ந்த ஆன்லைன் கருவி.
• Chrome உருவாக்குனர் கருவிகள்: Chrome இல் உள்ளமைக்கப்பட்ட உருவாக்குனர் கருவிகள் பிணைய கோரிக்கைகள், JavaScript இயக்கம் மற்றும் ரெண்டரிங் செயல்திறன் பற்றிய ஏராளமான தகவல்களை வழங்குகின்றன.
• உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகள் (New Relic, Datadog, Sentry): உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவை சேகரிக்கவும்.
• மூல வரைபட எக்ஸ்ப்ளோரர்: உங்கள் JavaScript குறியீட்டிற்குள் தனிப்பட்ட செயல்பாடுகளின் அளவை பகுப்பாய்வு செய்ய இந்த கருவி உதவுகிறது.
• Bundle Buddy: உங்கள் பொதியில் நகல் தொகுதிக்கூறுகளை அடையாளம் காண உதவுகிறது.

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

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

1. குறியீடு பிரித்தல்

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

இது எப்படி வேலை செய்கிறது:

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

உதாரணம்:

Webpack இன் டைனமிக் `import()` தொடரியலைப் பயன்படுத்தி, தேவைக்கேற்ப தொகுதிக்கூறுகளை ஏற்றலாம்:

            
 async function loadComponent() {
 const module = await import('./my-component');
 const MyComponent = module.default;
 // Render the component
 }

            

              
                Copy
              
            
          

2. ட்ரீ ஷேக்கிங்

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

இது எப்படி வேலை செய்கிறது:

• ட்ரீ ஷேக்கிங் பயன்படுத்தப்படாத குறியீட்டை அடையாளம் காண நிலையான பகுப்பாய்வை நம்பியுள்ளது.
• Webpack மற்றும் Rollup போன்ற நவீன பொதியுருவாக்கிகள் உள்ளமைக்கப்பட்ட ட்ரீ ஷேக்கிங் திறன்களைக் கொண்டுள்ளன.
• ட்ரீ ஷேக்கிங்கின் செயல்திறனை அதிகரிக்க, CommonJS தொகுதிக்கூறுகளுக்கு (`require` தொடரியல்) பதிலாக ES தொகுதிக்கூறுகளை (`import` மற்றும் `export` தொடரியல்) பயன்படுத்தவும். ES தொகுதிக்கூறுகள் நிலையான முறையில் பகுப்பாய்வு செய்ய வடிவமைக்கப்பட்டுள்ளன.

உதாரணம்:

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

3. சிறுமைப்படுத்தல் மற்றும் சுருக்கம்

சிறுமைப்படுத்தல் என்பது உங்கள் குறியீட்டிலிருந்து தேவையற்ற எழுத்துக்களை (வெற்று இடம், கருத்துகள்) அகற்றுவதை உள்ளடக்குகிறது. சுருக்கம் என்பது gzip அல்லது Brotli போன்ற வழிமுறைகளைப் பயன்படுத்தி உங்கள் குறியீட்டின் அளவைக் குறைப்பதை உள்ளடக்குகிறது.

இது எப்படி வேலை செய்கிறது:

• பெரும்பாலான பொதியுருவாக்கிகள் உள்ளமைக்கப்பட்ட சிறுமைப்படுத்தல் திறன்களைக் கொண்டுள்ளன (எ.கா., Webpack க்கான Terser செருகுநிரல்).
• சுருக்கம் பொதுவாக வலை சேவையகத்தால் கையாளப்படுகிறது (எ.கா., Nginx அல்லது Apache இல் gzip அல்லது Brotli சுருக்கத்தைப் பயன்படுத்துதல்).
• சரியான `Content-Encoding` ஹெடருடன் சுருக்கப்பட்ட சொத்துக்களை அனுப்ப உங்கள் சேவையகம் உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.

உதாரணம்:

உங்கள் JavaScript குறியீட்டைச் சிறுமைப்படுத்துவது அதன் அளவை 20-50% குறைக்கலாம், அதே நேரத்தில் gzip அல்லது Brotli சுருக்கம் அதன் அளவை 70-90% குறைக்கலாம்.

4. சோம்பேறி ஏற்றுதல்

சோம்பேறி ஏற்றுதல் என்பது தேவைப்படும்போது மட்டும் ஆதாரங்களை (படங்கள், வீடியோக்கள், JavaScript தொகுதிக்கூறுகள்) ஏற்றுவதை உள்ளடக்குகிறது. இது ஆரம்ப பக்க ஏற்றுதல் நேரத்தை குறைக்கிறது மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகிறது.

இது எப்படி வேலை செய்கிறது:

• பட சோம்பேறி ஏற்றுதல்: பார்வைக்கு அருகில் வரும் வரை படங்களை ஏற்றுவதை ஒத்திவைக்க `` குறிச்சொற்களில் `loading="lazy"` பண்புக்கூறைப் பயன்படுத்தவும்.
• தொகுதிக்கூறு சோம்பேறி ஏற்றுதல்: தேவைக்கேற்ப தொகுதிக்கூறுகளை ஏற்ற டைனமிக் `import()` தொடரியலைப் பயன்படுத்தவும்.
• Intersection Observer API: ஒரு உறுப்பு காட்சிப்படுத்தலில் தெரியும்போதெல்லாம் கண்டறிய Intersection Observer API ஐப் பயன்படுத்தவும் அதற்கேற்ப ஆதாரங்களை ஏற்றவும்.

உதாரணம்:

மடிப்புக்கு கீழே உள்ள படங்களை சோம்பேறியாக ஏற்றுதல் (ஆரம்பத்தில் பார்க்க முடியாத பக்கத்தின் பகுதி) ஆரம்ப பக்க ஏற்றுதல் நேரத்தை கணிசமாக குறைக்கலாம்.

5. சார்புகளை மேம்படுத்துதல்

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

இது எப்படி வேலை செய்கிறது:

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

உதாரணம்:

ஒரு பெரிய தேதி வடிவமைத்தல் நூலகத்தைப் பயன்படுத்துவதற்கு பதிலாக, எளிய தேதி வடிவமைத்தல் பணிகளுக்காக உள்ளமைக்கப்பட்ட `Intl.DateTimeFormat` API ஐப் பயன்படுத்த கருதுங்கள்.

6. தற்காலிக சேமிப்பு

உலாவியின் தற்காலிக சேமிப்பகத்தில் நிலையான சொத்துக்களை (JavaScript கோப்புகள், CSS கோப்புகள், படங்கள்) சேமிக்க உலாவி தற்காலிக சேமிப்பகத்தை மேம்படுத்தவும். இது அடுத்தடுத்த வருகைகளில் உலாவியின் தற்காலிக சேமிப்பகத்திலிருந்து இந்த சொத்துக்களை ஏற்ற உலாவியை அனுமதிக்கிறது, இது ஏற்றுதல் நேரத்தை குறைக்கிறது.

இது எப்படி வேலை செய்கிறது:

• நிலையான சொத்துக்களுக்கான பொருத்தமான தற்காலிக சேமிப்பு ஹெடர்களை அமைக்க உங்கள் வலை சேவையகத்தை உள்ளமைக்கவும். பொதுவான தற்காலிக சேமிப்பு ஹெடர்களில் `Cache-Control` மற்றும் `Expires` ஆகியவை அடங்கும்.
• ஒரு கோப்பின் உள்ளடக்கம் மாறும்போது தற்காலிக சேமிப்பை செல்லாததாக்க உள்ளடக்க ஹேஷிங்கைப் பயன்படுத்தவும். பொதியுருவாக்கிகள் பொதுவாக உள்ளடக்க ஹேஷ்களை உருவாக்கும் வழிமுறைகளை வழங்குகின்றன.
• உங்கள் சொத்துக்களை உங்கள் பயனர்களுக்கு நெருக்கமாக தற்காலிக சேமிக்க உள்ளடக்க விநியோக நெட்வொர்க்கைப் (CDN) பயன்படுத்த கருதுங்கள்.

உதாரணம்:

நீண்ட காலாவதி நேரத்துடன் `Cache-Control` ஹெடரை அமைப்பது (எ.கா., `Cache-Control: max-age=31536000`) ஒரு வருடத்திற்கு ஒரு கோப்பை தற்காலிக சேமிக்க உலாவியை அறிவுறுத்த முடியும்.

7. JavaScript இயக்கத்தை மேம்படுத்துதல்

மேம்படுத்தப்பட்ட பொதி அளவுகளுடன் கூட, மெதுவான JavaScript இயக்கம் இன்னும் செயல்திறனை பாதிக்கலாம்.

இது எப்படி வேலை செய்கிறது:

• நீண்ட காலமாக இயங்கும் பணிகளைத் தவிர்க்கவும்: பிரதான த்ரெட்டை தடுப்பதைத் தடுக்க நீண்ட காலமாக இயங்கும் பணிகளை சிறிய துண்டுகளாக உடைக்கவும்.
• வலை பணியாளர்களைப் பயன்படுத்தவும்: கணக்கீட்டு முறையில் தீவிரமான பணிகளை வலை பணியாளர்களுக்கு இறக்குமதி செய்து அவற்றை ஒரு தனி நூலில் இயக்கவும்.
• Debouncing மற்றும் Throttling: நிகழ்வு கையாளுபவர்களின் அதிர்வெண்ணை குறைக்க debouncing மற்றும் throttling நுட்பங்களைப் பயன்படுத்தவும் (எ.கா., உருள் நிகழ்வுகள், மறுஅளவிடுதல் நிகழ்வுகள்).
• திறமையான DOM கையாளுதல்: DOM கையாளுதல்களைக் குறைக்கவும், செயல்திறனை மேம்படுத்த ஆவண துண்டுகள் போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• வழிமுறை மேம்பாடு: கணக்கீட்டு முறையில் தீவிரமான வழிமுறைகளை மதிப்பாய்வு செய்து, மேம்படுத்துவதற்கான வாய்ப்புகளை ஆராயுங்கள்.

உதாரணம்:

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

8. உள்ளடக்க விநியோக நெட்வொர்க்கைப் பயன்படுத்தவும் (CDN)

CDNs என்பவை நிலையான சொத்துக்களை தற்காலிக சேமிக்கும் சேவையகங்களின் புவியியல் ரீதியாக விநியோகிக்கப்பட்ட நெட்வொர்க்குகள். பயனருக்கு நெருக்கமாக உள்ள ஒரு சேவையகத்திலிருந்து சொத்துக்களை வழங்குவதன் மூலம் CDN ஐப் பயன்படுத்துவது ஏற்றுதல் நேரத்தை மேம்படுத்தலாம்.

இது எப்படி வேலை செய்கிறது:

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

உதாரணம்:

பிரபலமான CDNs இல் Cloudflare, Amazon CloudFront மற்றும் Akamai ஆகியவை அடங்கும்.

முடிவுரை

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

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