ஜாவாஸ்கிரிப்ட் மாட்யூல் கோட் ஸ்ப்ளிட்டிங்: பண்டல் ஆப்டிமைசேஷனுக்கான ஒரு வழிகாட்டி

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    import('./LargeComponent') // Dynamic import
      .then((module) => {
        setComponent(() => module.default);
      })
      .catch((error) => {
        console.error('Error loading component:', error);
      });
  }, []);

  if (!Component) {
    return 
Loading...
;
  }

  return ; // Render the dynamically imported component
}

export default MyComponent;

            

              
                Copy
              
            
          

            import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    
      Loading...

இங்கே, ரியாக்டின் `lazy` மற்றும் `Suspense` ஆகியவை ரூட்டின் அடிப்படையில் காம்போனென்ட்களை டைனமிக்காக ஏற்றுவதற்குப் பயன்படுத்தப்படுகின்றன. ஒவ்வொரு பக்கமும் (`Home`, `About`, `Contact`) பயனர் அந்த ரூட்டிற்குச் செல்லும்போது மட்டுமே ஏற்றப்படுகிறது.

கோட் ஸ்ப்ளிட்டிங்கிற்கான கருவிகள்

பல பிரபலமான ஜாவாஸ்கிரிப்ட் பண்டலர்கள் கோட் ஸ்ப்ளிட்டிங்கிற்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகின்றன:

1. வெப்பேக்

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

வெப்பேக் உள்ளமைவு எடுத்துக்காட்டு:

            module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].bundle.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

            

              
                Copy
              
            
          

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

2. பார்சல்

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

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

            import('./my-module').then((module) => {
  // Use the module
});

            

              
                Copy
              
            
          

பார்சல் தானாகவே `my-module`-க்கு ஒரு தனி சங்ஸை உருவாக்கி, தேவைக்கேற்ப அதை ஏற்றும்.

3. ரோலப்

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

ரோலப் உள்ளமைவு எடுத்துக்காட்டு:

            import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    chunkFileNames: '[name]-[hash].js',
  },
  plugins: [
    nodeResolve(),
  ],
  manualChunks: {
    vendor: ['react', 'react-dom'],
  },
};

            

              
                Copy
              
            
          

The `manualChunks` விருப்பம் உங்கள் குறியீடு எப்படி சங்ஸ்களாக பிரிக்கப்பட வேண்டும் என்பதை கைமுறையாக வரையறுக்க உங்களை அனுமதிக்கிறது, இது பண்டலிங் செயல்முறையில் அதிக கட்டுப்பாட்டை வழங்குகிறது.

கோட் ஸ்ப்ளிட்டிங்கை செயல்படுத்துதல்: ஒரு படிப்படியான வழிகாட்டி

உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாட்டில் கோட் ஸ்ப்ளிட்டிங்கை செயல்படுத்துவதற்கான ஒரு பொதுவான படிப்படியான வழிகாட்டி இதோ:

1. உங்கள் பயன்பாட்டை பகுப்பாய்வு செய்யுங்கள்: உங்கள் பயன்பாட்டில் கோட் ஸ்ப்ளிட்டிங்கிலிருந்து பயனடையக்கூடிய பகுதிகளை அடையாளம் காணவும். பெரிய காம்போனென்ட்கள், அடிக்கடி பயன்படுத்தப்படாத மாட்யூல்கள் அல்லது ஆரம்ப ஏற்றத்தில் உடனடியாகத் தேவைப்படாத ரூட்களைத் தேடுங்கள். உங்கள் பண்டலை காட்சிப்படுத்தவும், மேம்படுத்துவதற்கான சாத்தியமான பகுதிகளை அடையாளம் காணவும் வெப்பேக் பண்டல் அனலைசர் போன்ற கருவிகளைப் பயன்படுத்தவும்.
2. ஒரு பண்டலரைத் தேர்ந்தெடுக்கவும்: கோட் ஸ்ப்ளிட்டிங்கை ஆதரிக்கும் மற்றும் உங்கள் திட்டத்தின் தேவைகளைப் பூர்த்தி செய்யும் ஒரு பண்டலரைத் தேர்ந்தெடுக்கவும். வெப்பேக், பார்சல், மற்றும் ரோலப் அனைத்தும் சிறந்த தேர்வுகளாகும்.
3. டைனமிக் இம்போர்ட்ஸை செயல்படுத்தவும்: தேவைக்கேற்ப மாட்யூல்களை ஏற்றுவதற்கு டைனமிக் இம்போர்ட்ஸை (`import()`) பயன்படுத்தவும். கோட் ஸ்ப்ளிட்டிங்கை இயக்குவதற்கான திறவுகோல் இதுவாகும்.
4. உங்கள் பண்டலரை உள்ளமைக்கவும்: உங்கள் குறியீட்டை சரியாக சங்ஸ்களாக பிரிக்க உங்கள் பண்டலரை உள்ளமைக்கவும். குறிப்பிட்ட உள்ளமைவு விருப்பங்களுக்கு நீங்கள் தேர்ந்தெடுத்த பண்டலரின் ஆவணங்களைப் பார்க்கவும்.
5. சோதனை செய்து மேம்படுத்தவும்: கோட் ஸ்ப்ளிட்டிங்கைச் செயல்படுத்திய பிறகு உங்கள் பயன்பாட்டை முழுமையாகச் சோதித்து, எல்லாம் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்தவும். நெட்வொர்க் கோரிக்கைகளைக் கண்காணிக்கவும், சங்ஸ்கள் திறமையாக ஏற்றப்படுகின்றனவா என்பதைச் சரிபார்க்கவும் உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். உங்கள் பண்டல் அளவு மற்றும் ஏற்றுதல் செயல்திறனை மேம்படுத்த வெவ்வேறு உள்ளமைவு விருப்பங்களுடன் பரிசோதனை செய்யவும்.
6. ப்ரீலோடிங் மற்றும் ப்ரீஃபெட்சிங்கை கருத்தில் கொள்ளுங்கள்: செயல்திறனை மேலும் மேம்படுத்த ப்ரீலோடிங் மற்றும் ப்ரீஃபெட்சிங் நுட்பங்களை ஆராயுங்கள். ப்ரீலோடிங் முக்கியமான ஆதாரங்களை ஏற்றுவதற்கு முன்னுரிமை அளிக்க உங்களை அனுமதிக்கிறது, அதே நேரத்தில் ப்ரீஃபெட்சிங் எதிர்காலத்தில் தேவைப்படக்கூடிய ஆதாரங்களை ஏற்ற உங்களை அனுமதிக்கிறது.

மேம்பட்ட கோட் ஸ்ப்ளிட்டிங் நுட்பங்கள்

அடிப்படைகளுக்கு அப்பால், உங்கள் கோட் ஸ்ப்ளிட்டிங் உத்தியை மேலும் மேம்படுத்த பல மேம்பட்ட நுட்பங்களைப் பயன்படுத்தலாம்:

1. வெண்டர் சங்கிங்

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

2. பொதுவான சங்ஸ்களை பிரித்தெடுத்தல்

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

3. ரூட்-அடிப்படையிலான ப்ரீஃபெட்சிங்

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

4. மாட்யூல் ஃபெடரேஷன் (வெப்பேக் 5+)

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

கோட் ஸ்ப்ளிட்டிங்கிற்கான சிறந்த நடைமுறைகள்

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

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

கோட் ஸ்ப்ளிட்டிங் மற்றும் உலகளாவிய செயல்திறன்

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

உலகளாவிய பார்வையாளர்களுக்காக கோட் ஸ்ப்ளிட்டிங்கைச் செயல்படுத்தும்போது இந்தக் காரணிகளைக் கவனியுங்கள்:

• நெட்வொர்க் நிலைமைகள்: மெதுவான நெட்வொர்க் இணைப்புகளைக் கொண்ட பயனர்களுக்கு மேம்படுத்தவும். கோட் ஸ்ப்ளிட்டிங் ஆரம்பத்தில் பதிவிறக்கம் செய்ய வேண்டிய தரவின் அளவைக் குறைக்க உதவும், இது 2G அல்லது 3G நெட்வொர்க்குகளில் உள்ள பயனர்களுக்கான அனுபவத்தை மேம்படுத்துகிறது.
• சாதனத் திறன்கள்: குறைந்த சக்தி கொண்ட சாதனங்களைக் கொண்ட பயனர்களுக்கு மேம்படுத்தவும். கோட் ஸ்ப்ளிட்டிங் பாகுபடுத்தப்பட்டு செயல்படுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைக்கும், இது பழைய அல்லது குறைந்த சக்தி வாய்ந்த சாதனங்களில் செயல்திறனை மேம்படுத்துகிறது.
• டேட்டா செலவுகள்: வரையறுக்கப்பட்ட டேட்டா திட்டங்களைக் கொண்ட பயனர்களுக்கான செலவுகளைக் குறைக்க டேட்டா நுகர்வைக் குறைக்கவும். கோட் ஸ்ப்ளிட்டிங் பயனர்கள் தங்களுக்குத் தேவையான குறியீட்டை மட்டுமே பதிவிறக்குவதை உறுதி செய்கிறது, இது அலைவரிசை நுகர்வைக் குறைத்து அவர்களின் பணத்தை மிச்சப்படுத்துகிறது.
• உள்ளடக்க விநியோக நெட்வொர்க்குகள் (CDNs): உங்கள் குறியீட்டை உலகெங்கிலும் உள்ள பல சேவையகங்களில் விநியோகிக்க CDNs-ஐப் பயன்படுத்தவும். இது வெவ்வேறு பிராந்தியங்களில் உள்ள பயனர்களுக்கான தாமதத்தைக் குறைத்து, பதிவிறக்க வேகத்தை மேம்படுத்துகிறது.

முடிவுரை

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