M
MLOG
ஜாவாஸ்கிரிப்ட் கோட் ஸ்பிளிட்டிங்: டைனமிக் லோடிங் மற்றும் செயல்திறன் மேம்பாட்டில் ஒரு ஆழ்ந்த பார்வை | MLOG | MLOG ); }

இந்த சூழ்நிலையில், பயனர் "Show Terms and Conditions" பட்டனைக் கிளிக் செய்யும் முதல் முறை மட்டுமே `HeavyModal`-ற்கான குறியீடு சேவையகத்திலிருந்து கோரப்படுகிறது.

3. மூன்றாம் தரப்பு நூலகங்களைப் பிரித்தல் (Vendor Chunks)

உங்கள் பயன்பாட்டின் குறியீடு பெரும்பாலும் `node_modules`-லிருந்து மூன்றாம் தரப்பு நூலகங்களைச் சார்ந்துள்ளது (எ.கா., React, Lodash, D3.js, Moment.js). இந்த நூலகங்கள் உங்கள் சொந்த பயன்பாட்டுக் குறியீட்டை விட மிகக் குறைவாகவே மாறுகின்றன. அவற்றை ஒரு தனி "vendor" துண்டாகப் பிரிப்பதன் மூலம், நீங்கள் நீண்ட கால உலாவி கேச்சிங்கைப் பயன்படுத்திக் கொள்ளலாம்.

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

Webpack (அதன் `SplitChunksPlugin` உடன்) மற்றும் Vite போன்ற நவீன பண்ட்லர்கள் இதைப் பற்றி நம்பமுடியாத அளவிற்கு புத்திசாலிகள். அவை பெரும்பாலும் மாட்யூல் பயன்பாடு மற்றும் அளவின் அடிப்படையில் தானாகவே வெண்டார் துண்டுகளை உருவாக்க முடியும், இதற்கு குறைந்தபட்ச உள்ளமைவு மட்டுமே தேவை.

Webpack `splitChunks` உள்ளமைவு எடுத்துக்காட்டு:


// webpack.config.js
module.exports = {
  // ... மற்ற உள்ளமைவுகள்
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[/]node_modules[/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

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

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

மேம்பட்ட நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகள்

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

ப்ரீஃபெட்சிங் மற்றும் ப்ரீலோடிங்

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

Webpack போன்ற பண்ட்லர்கள் "மேஜிக் கமெண்ட்ஸ்" மூலம் இதை எளிதாகச் செய்ய உங்களை அனுமதிக்கின்றன:


// இந்த மாட்யூல் மதிப்பிடப்படும்போது டாஷ்போர்டு குறியீட்டை ப்ரீஃபெட்ச் செய்யவும்
const DashboardPage = lazy(() => 
  import(/* webpackPrefetch: true */ './pages/DashboardPage')
);

பண்டில் பகுப்பாய்விகளுடன் ஸ்பிளிட் புள்ளிகளைக் கண்டறிதல்

எதைப் பிரிப்பது என்று உங்களுக்கு எப்படித் தெரியும்? யூகிக்காதீர்கள்—பகுப்பாய்வு செய்யுங்கள்! `webpack-bundle-analyzer` அல்லது `source-map-explorer` போன்ற கருவிகள் உங்கள் பண்டில்களின் ஒரு ஊடாடும் ட்ரீமேப் காட்சிப்படுத்தலை உருவாக்குகின்றன. இது பிரிப்பதற்கு முதன்மை வேட்பாளர்களாக இருக்கும் மிகப்பெரிய மாட்யூல்கள் மற்றும் நூலகங்களை உடனடியாக அடையாளம் காண உங்களை அனுமதிக்கிறது.

நெட்வொர்க் நீர்வீழ்ச்சிகளைத் தவிர்த்தல்

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

முடிவு: கோட் ஸ்பிளிட்டிங் தவிர்க்க முடியாதது

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

நன்மைகள் தெளிவானவை மற்றும் ஈர்க்கக்கூடியவை:

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