ஜாவாஸ்கிரிப்ட் பண்டல் பகுப்பாய்வு: சார்பு வரைபடக் காட்சிப்படுத்தல் கருவிகள் பற்றிய ஒரு ஆழமான பார்வை

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

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

வலை செயல்திறனுக்கு பண்டல் பகுப்பாய்வு ஏன் முக்கியமானது?

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

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

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

சார்பு வரைபடத்தைப் புரிந்துகொள்வது

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

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

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

பண்டல் மேம்படுத்தலில் முக்கிய கருத்துக்கள்

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

• ட்ரீ ஷேக்கிங் (Tree Shaking): உங்கள் இறுதி பண்டலில் இருந்து பயன்படுத்தப்படாத கோடை (அல்லது "டெட் கோட்") தானாகவே நீக்கும் செயல்முறை. உதாரணமாக, நீங்கள் Lodash போன்ற ஒரு பயன்பாட்டு நூலகத்தை இறக்குமதி செய்து ஒரு செயல்பாட்டை மட்டுமே பயன்படுத்தினால், ட்ரீ ஷேக்கிங் அந்த குறிப்பிட்ட செயல்பாடு மட்டுமே சேர்க்கப்படுவதை உறுதி செய்கிறது, முழு நூலகமும் அல்ல.
• கோட் ஸ்ப்ளிட்டிங் (Code Splitting): ஒரு ஒற்றைக்கல் பண்டலை உருவாக்குவதற்குப் பதிலாக, கோட் ஸ்ப்ளிட்டிங் அதை சிறிய, தர்க்கரீதியான துண்டுகளாக உடைக்கிறது. நீங்கள் பக்கம்/பாதை வாரியாக (எ.கா., `home.js`, `profile.js`) அல்லது செயல்பாடு வாரியாக (எ.கா., `vendors.js`) பிரிக்கலாம். இந்தத் துண்டுகள் பின்னர் தேவைக்கேற்ப ஏற்றப்படலாம், இது ஆரம்பப் பக்க ஏற்றுதல் நேரத்தை வியத்தகு முறையில் மேம்படுத்துகிறது.
• நகல் சார்புகளை அடையாளம் காணுதல்: ஒரே பேக்கேஜ் ஒரு பண்டலில் பல முறை சேர்க்கப்படுவது ஆச்சரியப்படும் வகையில் பொதுவானது, பெரும்பாலும் வெவ்வேறு துணை சார்புகளுக்கு வெவ்வேறு பதிப்புகள் தேவைப்படுவதால். காட்சிப்படுத்தல் கருவிகள் இந்த நகல்களை அப்பட்டமாகத் தெளிவாக்குகின்றன.
• பெரிய சார்புகளைப் பகுப்பாய்வு செய்தல்: சில நூலகங்கள் பெரிய அளவில் இருப்பது அனைவரும் அறிந்ததே. ஒரு பகுப்பாய்வி, ஒரு தேதி-வடிவமைப்பு நூலகம் உங்களுக்குத் தேவையில்லாத ஜிகாபைட் கணக்கில் லோகேல் தரவைச் சேர்க்கிறது அல்லது ஒரு சார்ட்டிங் நூலகம் உங்கள் முழுப் பயன்பாட்டு கட்டமைப்பை விட கனமாக உள்ளது என்பதை வெளிப்படுத்தலாம்.

பிரபலமான சார்பு வரைபடக் காட்சிப்படுத்தல் கருவிகளின் ஒரு சுற்றுலா

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

1. webpack-bundle-analyzer

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

முக்கிய அம்சங்கள்:

• ஊடாடும் ட்ரீமேப்: உங்கள் பண்டலின் வெவ்வேறு பகுதிகளைக் கிளிக் செய்து பெரிதாக்கி, எந்த மாட்யூல்கள் ஒரு பெரிய பகுதியை உருவாக்குகின்றன என்பதைக் காணலாம்.
• பல அளவு அளவீடுகள்: இது `stat` அளவு (எந்தவொரு செயலாக்கத்திற்கும் முன் கோப்பின் மூல அளவு), `parsed` அளவு (பாகுபடுத்தப்பட்ட பிறகு ஜாவாஸ்கிரிப்ட் கோடின் அளவு), மற்றும் `gzipped` அளவு (சுருக்கத்திற்குப் பிறகு அளவு, இது பயனர் பதிவிறக்குவதற்கு மிக அருகில் உள்ளது) ஆகியவற்றைக் காட்ட முடியும்.
• எளிதான ஒருங்கிணைப்பு: ஒரு Webpack ப்ளகினாக, ஏற்கனவே உள்ள `webpack.config.js` கோப்பில் சேர்ப்பது நம்பமுடியாத அளவிற்கு எளிது.

அதை எப்படி பயன்படுத்துவது:

முதலில், இதை ஒரு டெவலப்மென்ட் சார்புநிலையாக நிறுவவும்:

npm install --save-dev webpack-bundle-analyzer

பின்னர், அதை உங்கள் Webpack உள்ளமைவில் சேர்க்கவும்:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { // ... other webpack config plugins: [ new BundleAnalyzerPlugin() ] };

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

அதை எப்போது பயன்படுத்துவது: Webpack பயன்படுத்தும் எந்தவொரு திட்டத்திற்கும் இது சரியான தொடக்கப் புள்ளி. அதன் எளிமை மற்றும் சக்திவாய்ந்த காட்சிப்படுத்தல் விரைவான கண்டறிதல்களுக்கும், மேம்பாட்டின் போது வழக்கமான சோதனைகளுக்கும் இதை आदर्शமாக்குகிறது.

2. source-map-explorer

அது என்ன: ஒரு கட்டமைப்பு-சார்பற்ற கருவி, அதன் ஜாவாஸ்கிரிப்ட் சோர்ஸ் மேப்களைப் பயன்படுத்தி ஒரு தயாரிப்பு பண்டலைப் பகுப்பாய்வு செய்கிறது. நீங்கள் சோர்ஸ் மேப்களை உருவாக்கும் வரை இது எந்த பண்ட்லருடனும் (Webpack, Rollup, Vite, Parcel) வேலை செய்யும்.

முக்கிய அம்சங்கள்:

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

அதை எப்படி பயன்படுத்துவது:

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

npm install --save-dev source-map-explorer

உங்கள் பண்டல் மற்றும் சோர்ஸ் மேப் கோப்புகளுக்கு எதிராக அதை இயக்கவும்:

npx source-map-explorer /path/to/your/bundle.js

இது `webpack-bundle-analyzer`-ஐப் போலவே ஒரு HTML ட்ரீமேப் காட்சிப்படுத்தலை உருவாக்கித் திறக்கும்.

அதை எப்போது பயன்படுத்துவது: Webpack-ஐப் பயன்படுத்தாத திட்டங்களுக்கு (எ.கா., Vite, Rollup, அல்லது Create React App உடன் உருவாக்கப்பட்டவை, இது Webpack-ஐ சுருக்கி விடுகிறது) இது சிறந்தது. மூன்றாம் தரப்பு நூலகங்களை மட்டுமல்ல, உங்கள் சொந்த பயன்பாட்டுக் கோடின் பங்களிப்பைப் பகுப்பாய்வு செய்ய விரும்பும் போதும் இது சிறந்தது.

3. Statoscope

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

முக்கிய அம்சங்கள்:

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

அதை எப்படி பயன்படுத்துவது:

Webpack-க்கு, நீங்கள் அதன் ப்ளகினைச் சேர்க்கிறீர்கள்:

npm install --save-dev @statoscope/webpack-plugin

பின்னர், உங்கள் `webpack.config.js`-ல்:

const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default; module.exports = { // ... other webpack config plugins: [ new StatoscopeWebpackPlugin() ] };

ஒரு பில்டிற்குப் பிறகு, அது உங்கள் வெளியீட்டு கோப்பகத்தில் ஒரு விரிவான HTML அறிக்கையை உருவாக்குகிறது.

அதை எப்போது பயன்படுத்துவது: Statoscope ஒரு நிறுவன-தர கருவி. நீங்கள் செயல்திறன் பட்ஜெட்களைச் செயல்படுத்த வேண்டியிருக்கும் போது, CI/CD சூழலில் காலப்போக்கில் பண்டல் அளவைக் கண்காணிக்க வேண்டியிருக்கும் போது, அல்லது பில்டுகளுக்கு இடையில் ஆழமான, ஒப்பீட்டுப் பகுப்பாய்வைச் செய்ய வேண்டியிருக்கும் போது இதைப் பயன்படுத்தவும். செயல்திறன் மிக முக்கியமாக இருக்கும் பெரிய அணிகள் மற்றும் முக்கிய பயன்பாடுகளுக்கு இது சரியானது.

4. மற்ற குறிப்பிடத்தக்க கருவிகள்

• rollup-plugin-visualizer (Vite/Rollup-க்கு): Rollup சுற்றுச்சூழல் அமைப்புக்கு (Vite இதைப் பயன்படுத்துகிறது) ஒரு அருமையான மற்றும் எளிமையான ப்ளகின். இது ஒரு ஊடாடும் சன்பர்ஸ்ட் அல்லது ட்ரீமேப் வரைபடத்தை வழங்குகிறது, இது Vite மற்றும் Rollup பயனர்களுக்கு `webpack-bundle-analyzer`-க்கு சமமானதாகும்.
• Bundle-buddy: ஒரு பழைய ஆனால் இன்னும் பயனுள்ள கருவி, இது வெவ்வேறு பண்டல் துண்டுகள் முழுவதும் நகல் சார்புகளைக் கண்டறிய உதவுகிறது, இது கோட்-ஸ்ப்ளிட்டிங் அமைப்புகளில் ஒரு பொதுவான சிக்கலாகும்.

ஒரு நடைமுறை வழிகாட்டி: பகுப்பாய்விலிருந்து செயலுக்கு

ஒரு சூழ்நிலையைக் கற்பனை செய்து கொள்வோம். உங்கள் திட்டத்தில் `webpack-bundle-analyzer`-ஐ இயக்குகிறீர்கள், மேலும் இரண்டு நூலகங்கள் உங்கள் பண்டலின் ஒரு பெரிய பகுதியை எடுத்துக் கொள்வதைக் காண்கிறீர்கள்: `moment.js` மற்றும் `lodash`.

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

• பெரிய `moment.js` பிளாக்கின் மீது சுட்டியை வைத்து, அதற்குள் ஒரு பெரிய `locales` கோப்பகத்தைக் கவனிக்கிறீர்கள். உங்கள் பயன்பாடு ஆங்கிலத்தை மட்டுமே ஆதரிக்கிறது, ஆனாலும் நீங்கள் டஜன் கணக்கான நாடுகளுக்கான மொழி ஆதரவை அனுப்புகிறீர்கள்.
• `lodash`-க்கு இரண்டு தனித்துவமான பிளாக்குகளைப் பார்க்கிறீர்கள். உன்னிப்பாகப் பார்த்தால், உங்கள் பயன்பாட்டின் ஒரு பகுதி `lodash@4.17.15`-ஐப் பயன்படுத்துகிறது மற்றும் நீங்கள் நிறுவிய ஒரு சார்புநிலை `lodash-es@4.17.10`-ஐப் பயன்படுத்துகிறது என்பதை உணர்கிறீர்கள். உங்களிடம் ஒரு நகல் சார்புநிலை உள்ளது.

படி 2: ஒரு கருதுகோளை உருவாக்கி தீர்வைச் செயல்படுத்தவும்

கருதுகோள் 1: பயன்படுத்தப்படாத லோகேல்களை அகற்றுவதன் மூலம் `moment.js`-ன் அளவை நாம் கடுமையாகக் குறைக்கலாம்.

தீர்வு: அவற்றை அகற்ற `moment-locales-webpack-plugin` போன்ற ஒரு பிரத்யேக Webpack ப்ளகினைப் பயன்படுத்தவும். மாற்றாக, Day.js அல்லது date-fns போன்ற மிகவும் இலகுவான, நவீன மாற்றுகளுக்கு மாறுவதைக் கருத்தில் கொள்ளுங்கள், அவை மாடுலராகவும் ட்ரீ-ஷேக்கபிளாகவும் வடிவமைக்கப்பட்டுள்ளன.

கருதுகோள் 2: ஒற்றை பதிப்பை கட்டாயப்படுத்தி நகல் `lodash`-ஐ நாம் அகற்றலாம்.

தீர்வு: முரண்பாட்டைத் தீர்க்க உங்கள் பேக்கேஜ் மேலாளரின் அம்சங்களைப் பயன்படுத்தவும். npm உடன், உங்கள் `package.json`-ல் `overrides` புலத்தைப் பயன்படுத்தி முழு திட்டத்திற்கும் `lodash`-ன் ஒற்றை பதிப்பைக் குறிப்பிடலாம். Yarn உடன், நீங்கள் `resolutions` புலத்தைப் பயன்படுத்தலாம். புதுப்பித்த பிறகு, `npm install` அல்லது `yarn install`-ஐ மீண்டும் இயக்கவும்.

படி 3: முன்னேற்றத்தைச் சரிபார்க்கவும்

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

உங்கள் பணிப்பாய்வில் பண்டல் பகுப்பாய்வை ஒருங்கிணைத்தல்

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

• உள்ளூர் மேம்பாடு: ஒரு குறிப்பிட்ட கட்டளையுடன் (எ.கா., `npm run analyze`) தேவைக்கேற்ப பகுப்பாய்வியை இயக்க உங்கள் பில்ட் கருவியை உள்ளமைக்கவும். நீங்கள் ஒரு புதிய பெரிய சார்புநிலையைச் சேர்க்கும்போதெல்லாம் இதைப் பயன்படுத்தவும்.
• புல் ரிக்வெஸ்ட் சோதனைகள்: ஒவ்வொரு புல் ரிக்வெஸ்டிலும் பண்டல் பகுப்பாய்வு அறிக்கைக்கான இணைப்புடன் (அல்லது அளவு மாற்றங்களின் சுருக்கம்) ஒரு கருத்தைப் பதிவிடும் GitHub ஆக்ஷன் அல்லது பிற CI பணியை அமைக்கவும். இது செயல்திறனை கோட் மதிப்பாய்வு செயல்முறையின் ஒரு வெளிப்படையான பகுதியாக ஆக்குகிறது.
• CI/CD பைப்லைன்: செயல்திறன் பட்ஜெட்களை அமைக்க Statoscope அல்லது தனிப்பயன் ஸ்கிரிப்ட்கள் போன்ற கருவிகளைப் பயன்படுத்தவும். ஒரு பில்ட் பண்டலை ஒரு குறிப்பிட்ட அளவு வரம்பைத் தாண்டச் செய்தால், CI பைப்லைன் தோல்வியடையலாம், இது செயல்திறன் பின்னடைவுகள் ஒருபோதும் தயாரிப்பை அடையாமல் தடுக்கிறது.

முடிவு: மெலிதான ஜாவாஸ்கிரிப்டின் கலை

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

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