வெப்பேக் மாட்யூல் கிராஃப் ஆப்டிமைசேஷன்: உலகளாவிய டெவலப்பர்களுக்கான ஒரு ஆழமான பார்வை

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

வெப்பேக் மாட்யூல் கிராஃப் என்றால் என்ன?

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

ஒரு எளிய பயன்பாட்டைக் கற்பனை செய்து பாருங்கள்:

// index.js
import { greet } from './greeter';
import { formatDate } from './utils';

console.log(greet('World'));
console.log(formatDate(new Date()));

// greeter.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString('en-US');
}

வெப்பேக், index.js ஆனது greeter.js மற்றும் utils.js ஐ சார்ந்துள்ளது என்பதைக் காட்டும் ஒரு மாட்யூல் கிராஃபை உருவாக்கும். மிகவும் சிக்கலான பயன்பாடுகள் கணிசமாக பெரிய மற்றும் மிகவும் ஒன்றோடொன்று இணைக்கப்பட்ட கிராஃப்களைக் கொண்டுள்ளன.

மாட்யூல் கிராஃபை மேம்படுத்துவது ஏன் முக்கியம்?

மோசமாக மேம்படுத்தப்பட்ட மாட்யூல் கிராஃப் பல சிக்கல்களுக்கு வழிவகுக்கும்:

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

மாட்யூல் கிராஃப் மேம்படுத்தல் நுட்பங்கள்

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

1. கோட் ஸ்பிளிட்டிங் (Code Splitting)

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

கோட் ஸ்பிளிட்டிங்கின் நன்மைகள்:

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

வெப்பேக் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்த பல வழிகளை வழங்குகிறது:

• நுழைவுப் புள்ளிகள் (Entry Points): உங்கள் வெப்பேக் கட்டமைப்பில் பல நுழைவுப் புள்ளிகளை வரையறுக்கவும். ஒவ்வொரு நுழைவுப் புள்ளியும் ஒரு தனி பண்டிலை உருவாக்கும்.
• டைனமிக் இம்போர்ட்ஸ் (Dynamic Imports): தேவைக்கேற்ப மாட்யூல்களை ஏற்றுவதற்கு import() தொடரியலைப் பயன்படுத்தவும். வெப்பேக் இந்த மாட்யூல்களுக்கு தானாகவே தனித்தனி துண்டுகளை உருவாக்கும். இது பெரும்பாலும் சோம்பேறி-ஏற்றுதல் (lazy-loading) கூறுகள் அல்லது அம்சங்களுக்குப் பயன்படுத்தப்படுகிறது.

  // டைனமிக் இம்போர்ட் உதாரணம்
  async function loadComponent() {
    const { default: MyComponent } = await import('./my-component');
    // MyComponent ஐப் பயன்படுத்தவும்
  }
  

• ஸ்பிளிட்சங்க்ஸ் பிளகின் (SplitChunks Plugin): SplitChunksPlugin ஆனது பல நுழைவுப் புள்ளிகளிலிருந்து பொதுவான மாட்யூல்களை தானாகவே கண்டறிந்து தனித்தனி துண்டுகளாகப் பிரித்தெடுக்கிறது. இது நகலெடுப்பைக் குறைத்து கேச்சிங்கை மேம்படுத்துகிறது. இது மிகவும் பொதுவான மற்றும் பரிந்துரைக்கப்பட்ட அணுகுமுறையாகும்.

  // webpack.config.js
  module.exports = {
    //...
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
  };
  

உதாரணம்: கோட் ஸ்பிளிட்டிங்குடன் சர்வதேசமயமாக்கல் (i18n)

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

// i18n.js
export async function loadTranslations(locale) {
  switch (locale) {
    case 'en':
      return import('./translations/en.json');
    case 'fr':
      return import('./translations/fr.json');
    case 'es':
      return import('./translations/es.json');
    default:
      return import('./translations/en.json');
  }
}

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

2. ட்ரீ ஷேக்கிங் (Tree Shaking) (பயன்படுத்தப்படாத கோட் நீக்கம்)

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

திறமையான ட்ரீ ஷேக்கிங்கிற்கான தேவைகள்:

• ES மாட்யூல்கள்: ட்ரீ ஷேக்கிங் ES மாட்யூல்களின் (import மற்றும் export) நிலையான கட்டமைப்பைச் சார்ந்துள்ளது. காமன்ஜேஎஸ் மாட்யூல்கள் (require) பொதுவாக ட்ரீ-ஷேக்கபிள் அல்ல.
• பக்க விளைவுகள் (Side Effects): வெப்பேக் எந்த மாட்யூல்களில் பக்க விளைவுகள் உள்ளன என்பதைப் புரிந்து கொள்ள வேண்டும் (DOM ஐ மாற்றுவது அல்லது API அழைப்புகளைச் செய்வது போன்ற அதன் சொந்த வரம்பிற்கு வெளியே செயல்களைச் செய்யும் கோட்). உங்கள் package.json கோப்பில் "sideEffects": false பண்பைப் பயன்படுத்தி மாட்யூல்களை பக்க விளைவுகள் இல்லாததாக அறிவிக்கலாம், அல்லது பக்க விளைவுகளைக் கொண்ட கோப்புகளின் ஒரு விரிவான வரிசையை வழங்கலாம். வெப்பேக் பக்க விளைவுகளுடன் கூடிய கோடை தவறாக அகற்றினால், உங்கள் பயன்பாடு சரியாகச் செயல்படாமல் போகலாம்.

  // package.json
  {
    //...
    "sideEffects": false
  }
  

• பாலிஃபில்களைக் குறைத்தல்: நீங்கள் எந்த பாலிஃபில்களைச் சேர்க்கிறீர்கள் என்பதில் கவனமாக இருங்கள். Polyfill.io போன்ற சேவையைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள் அல்லது உலாவி ஆதரவின் அடிப்படையில் பாலிஃபில்களைத் தேர்ந்தெடுத்து இறக்குமதி செய்யுங்கள்.

உதாரணம்: லோடேஷ் மற்றும் ட்ரீ ஷேக்கிங்

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

திறனற்ற இறக்குமதி:

// ட்ரீ ஷேக்கிங்கிற்கு முன்
import _ from 'lodash';

_.map([1, 2, 3], (x) => x * 2);

திறமையான இறக்குமதி (ட்ரீ-ஷேக்கபிள்):

// ட்ரீ ஷேக்கிங்கிற்குப் பிறகு
import map from 'lodash/map';

map([1, 2, 3], (x) => x * 2);

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

3. ஸ்கோப் ஹாய்ஸ்டிங் (Scope Hoisting) (மாட்யூல் ஒன்றிணைப்பு)

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

ஸ்கோப் ஹாய்ஸ்டிங் எவ்வாறு செயல்படுகிறது:

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

ஸ்கோப் ஹாய்ஸ்டிங்கை இயக்குதல்:

வெப்பேக் புரொடக்ஷன் பயன்முறையில் ஸ்கோப் ஹாய்ஸ்டிங் இயல்பாகவே இயக்கப்பட்டுள்ளது. உங்கள் வெப்பேக் கட்டமைப்பில் இதை வெளிப்படையாகவும் இயக்கலாம்:

// webpack.config.js
module.exports = {
  //...
  optimization: {
    concatenateModules: true,
  },
};

ஸ்கோப் ஹாய்ஸ்டிங்கின் நன்மைகள்:

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

4. மாட்யூல் ஃபெடரேஷன் (Module Federation)

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

முக்கிய கருத்துக்கள்:

• ஹோஸ்ட் (Host): பிற பயன்பாடுகளிலிருந்து (ரிமோட்டுகள்) மாட்யூல்களைப் பயன்படுத்தும் ஒரு பயன்பாடு.
• ரிமோட் (Remote): பிற பயன்பாடுகள் (ஹோஸ்ட்கள்) பயன்படுத்துவதற்காக மாட்யூல்களை வெளிப்படுத்தும் ஒரு பயன்பாடு.
• பகிரப்பட்டது (Shared): ஹோஸ்ட் மற்றும் ரிமோட் பயன்பாடுகளுக்கு இடையில் பகிரப்பட்ட மாட்யூல்கள். வெப்பேக் ஒவ்வொரு பகிரப்பட்ட மாட்யூலின் ஒரே ஒரு பதிப்பு மட்டுமே ஏற்றப்படுவதை தானாகவே உறுதி செய்யும், இது நகலெடுப்பு மற்றும் முரண்பாடுகளைத் தடுக்கிறது.

உதாரணம்: ஒரு UI கூறு நூலகத்தைப் பகிர்தல்

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

app1 (ஹோஸ்ட்):

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        'ui': 'ui@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// App.js
import React from 'react';
import Button from 'ui/Button';

function App() {
  return (
    

      
App 1
      Click Me
    
  );
}

export default App;

app2 (ஹோஸ்டும் கூட):

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        'ui': 'ui@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

ui (ரிமோட்):

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: 'ui',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

மாட்யூல் ஃபெடரேஷனின் நன்மைகள்:

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

மாட்யூல் ஃபெடரேஷனுக்கான உலகளாவிய பரிசீலனைகள்:

• பதிப்பு மேலாண்மை (Versioning): பொருந்தக்கூடிய சிக்கல்களைத் தவிர்க்க பகிரப்பட்ட மாட்யூல்களின் பதிப்புகளை கவனமாக நிர்வகிக்கவும்.
• சார்பு மேலாண்மை (Dependency Management): அனைத்து பயன்பாடுகளும் சீரான சார்புகளைக் கொண்டிருப்பதை உறுதிசெய்க.
• பாதுகாப்பு: பகிரப்பட்ட மாட்யூல்களை அங்கீகரிக்கப்படாத அணுகலில் இருந்து பாதுகாக்க பொருத்தமான பாதுகாப்பு நடவடிக்கைகளைச் செயல்படுத்தவும்.

5. கேச்சிங் உத்திகள் (Caching Strategies)

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

கேச்சிங் வகைகள்:

• உலாவி கேச்சிங் (Browser Caching): நிலையான சொத்துக்களை (ஜாவாஸ்கிரிப்ட், சிஎஸ்எஸ், படங்கள்) கேச் செய்ய உலாவிக்கு அறிவுறுத்தவும், இதனால் அவை மீண்டும் மீண்டும் பதிவிறக்கம் செய்யப்பட வேண்டியதில்லை. இது பொதுவாக HTTP தலைப்புகள் (Cache-Control, Expires) வழியாகக் கட்டுப்படுத்தப்படுகிறது.
• வெப்பேக் கேச்சிங் (Webpack Caching): முந்தைய பில்டுகளின் முடிவுகளைச் சேமிக்க வெப்பேக்கின் உள்ளமைக்கப்பட்ட கேச்சிங் வழிமுறைகளைப் பயன்படுத்தவும். இது அடுத்தடுத்த பில்டுகளை கணிசமாக வேகப்படுத்தலாம், குறிப்பாக பெரிய திட்டங்களுக்கு. வெப்பேக் 5 நிலையான கேச்சிங்கை அறிமுகப்படுத்துகிறது, இது கேஷை வட்டில் சேமிக்கிறது. இது குறிப்பாக CI/CD சூழல்களில் நன்மை பயக்கும்.

  // webpack.config.js
  module.exports = {
    //...
    cache: {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
    },
  };
  

• உள்ளடக்க ஹாஷிங் (Content Hashing): உங்கள் கோப்புப் பெயர்களில் உள்ளடக்க ஹாஷ்களைப் பயன்படுத்தவும், கோப்புகளின் உள்ளடக்கம் மாறும்போது மட்டுமே உலாவி புதிய பதிப்புகளைப் பதிவிறக்குவதை உறுதிசெய்யவும். இது உலாவி கேச்சிங்கின் செயல்திறனை அதிகரிக்கிறது.

  // webpack.config.js
  module.exports = {
    //...
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };
  

கேச்சிங்கிற்கான உலகளாவிய பரிசீலனைகள்:

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

6. ரிசால்வ் விருப்பங்களை மேம்படுத்துதல் (Optimize Resolve Options)

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

• resolve.modules: வெப்பேக் மாட்யூல்களைத் தேட வேண்டிய கோப்பகங்களைக் குறிப்பிடவும். node_modules கோப்பகத்தையும் மற்றும் எந்தவொரு தனிப்பயன் மாட்யூல் கோப்பகங்களையும் சேர்க்கவும்.

  // webpack.config.js
  module.exports = {
    //...
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  };
  

• resolve.extensions: வெப்பேக் தானாகவே தீர்க்க வேண்டிய கோப்பு நீட்டிப்புகளைக் குறிப்பிடவும். பொதுவான நீட்டிப்புகளில் .js, .jsx, .ts, மற்றும் .tsx ஆகியவை அடங்கும். இந்த நீட்டிப்புகளைப் பயன்பாட்டின் அதிர்வெண்ணின்படி வரிசைப்படுத்துவது தேடல் வேகத்தை மேம்படுத்தும்.

  // webpack.config.js
  module.exports = {
    //...
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.jsx'],
    },
  };
  

• resolve.alias: பொதுவாகப் பயன்படுத்தப்படும் மாட்யூல்கள் அல்லது கோப்பகங்களுக்கு மாற்றுப்பெயர்களை உருவாக்கவும். இது உங்கள் கோடை எளிதாக்கி பில்ட் நேரங்களை மேம்படுத்தும்.

  // webpack.config.js
  module.exports = {
    //...
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components/'),
      },
    },
  };
  

7. டிரான்ஸ்பிலேஷன் மற்றும் பாலிஃபில்லிங்கைக் குறைத்தல்

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

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

  // package.json
  {
    //...
    "browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
  

• டைனமிக் பாலிஃபில்லிங்: பயனரின் உலாவிக்குத் தேவையான பாலிஃபில்களை மட்டும் மாறும் வகையில் ஏற்றுவதற்கு Polyfill.io போன்ற சேவையைப் பயன்படுத்தவும்.
• நூலகங்களின் ESM பில்டுகள்: பல நவீன நூலகங்கள் காமன்ஜேஎஸ் மற்றும் ES மாட்யூல் (ESM) பில்டுகள் இரண்டையும் வழங்குகின்றன. சிறந்த ட்ரீ ஷேக்கிங்கை இயக்க முடிந்தவரை ESM பில்டுகளை விரும்புங்கள்.

8. உங்கள் பில்டுகளை சுயவிவரப்படுத்துதல் மற்றும் பகுப்பாய்வு செய்தல்

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

• வெப்பேக் பண்டில் அனலைசர் (Webpack Bundle Analyzer): உங்கள் வெப்பேக் பண்டில்களின் அளவு மற்றும் அமைப்பை காட்சிப்படுத்தவும். இது பெரிய மாட்யூல்கள் அல்லது நகல் கோடை அடையாளம் காண உதவும்.

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

• வெப்பேக் புரோஃபைலிங் (Webpack Profiling): பில்ட் செயல்பாட்டின் போது விரிவான செயல்திறன் தரவைச் சேகரிக்க வெப்பேக்கின் சுயவிவரப்படுத்தல் அம்சத்தைப் பயன்படுத்தவும். மெதுவான லோடர்ஸ் அல்லது பிளகின்களை அடையாளம் காண இந்தத் தரவைப் பகுப்பாய்வு செய்யலாம்.

  // webpack.config.js
  module.exports = {
    //...
    plugins: [
      new webpack.debug.ProfilingPlugin({
        outputPath: 'webpack.profile.json'
      })
    ],
  };
  

  பின்னர் சுயவிவரத் தரவைப் பகுப்பாய்வு செய்ய Chrome DevTools போன்ற கருவிகளைப் பயன்படுத்தவும்.

முடிவுரை

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