M
MLOG
ஜாவாஸ்கிரிப்ட் மாட்யூல் ஆப்டிமைசேஷன்: பில்ட் டூல் ஒருங்கிணைப்பில் தேர்ச்சி பெறுதல் | MLOG | MLOG

இந்த எடுத்துக்காட்டில், MyComponent ஆனது Suspense கூறுக்குள் ரெண்டர் செய்யப்படும்போது மட்டுமே ஏற்றப்படும்.

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

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

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

Webpack உடன் செயல்படுத்துதல்:

மாட்யூல் ஃபெடரேஷன் முக்கியமாக Webpack 5 ஆல் ஆதரிக்கப்படுகிறது. இது ஒரு "ஹோஸ்ட்" பயன்பாடு மற்றும் "ரிமோட்" பயன்பாடுகளை உள்ளமைப்பதை உள்ளடக்கியது. ஹோஸ்ட் பயன்பாடு இயக்க நேரத்தில் ரிமோட் பயன்பாடுகளிலிருந்து மாட்யூல்களைப் பயன்படுத்துகிறது.

உதாரணம் (Webpack உள்ளமைவு):

ஹோஸ்ட் பயன்பாடு (webpack.config.js):

            
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'HostApp',
      remotes: {
        RemoteApp: 'RemoteApp@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

ரிமோட் பயன்பாடு (webpack.config.js):

            
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'RemoteApp',
      exposes: {
        './MyComponent': './src/MyComponent.js',
      },
    }),
  ],
};

6. மூன்றாம் தரப்பு லைப்ரரிகளை மேம்படுத்துதல்

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

7. படங்களை மேம்படுத்துதல் (Image Optimization)

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

நடைமுறை உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

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

1. ஒற்றைப் பக்கப் பயன்பாடு (SPA)

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

2. இ-காமர்ஸ் இணையதளம்

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

3. லைப்ரரி டெவலப்மென்ட்

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

குறிப்பிட்ட பில்ட் டூல்களுடன் ஒருங்கிணைத்தல்

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

Webpack

உள்ளமைவு (webpack.config.js):

            
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  mode: 'production', // Enable production mode for optimization
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // Minify JavaScript
    ],
    splitChunks: {
      chunks: 'all', // Enable code splitting for all chunks
    },
  },
  plugins: [
    new CompressionPlugin({ // Enable Gzip compression
      algorithm: 'gzip',
      test: /\.(js|css)$/,
    }),
  ],
};

Parcel

பார்சலுக்கு குறைந்தபட்ச உள்ளமைவு தேவை. parcel build கட்டளையைப் பயன்படுத்தி தயாரிப்புக்காக உருவாக்கவும்:

            
parcel build src/index.html --dist-dir dist

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

Rollup

உள்ளமைவு (rollup.config.js):

            
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm', // Use ES module format for tree shaking
  },
  plugins: [
    terser(), // Minify JavaScript
  ],
};

மாட்யூல் ஆப்டிமைசேஷனுக்கான சிறந்த நடைமுறைகள்

பயனுள்ள மாட்யூல் ஆப்டிமைசேஷனை உறுதிப்படுத்த, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

முடிவுரை

ஜாவாஸ்கிரிப்ட் மாட்யூல் ஆப்டிமைசேஷன் உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்குவதில் ஒரு முக்கியமான அம்சமாகும். மாட்யூல் அமைப்புகளின் கொள்கைகளைப் புரிந்துகொள்வதன் மூலமும், நவீன பில்ட் டூல்களைப் பயன்படுத்துவதன் மூலமும், ட்ரீ ஷேக்கிங், கோட் ஸ்பிளிட்டிங், மினிஃபிகேஷன் மற்றும் லேசி லோடிங் போன்ற ஆப்டிமைசேஷன் நுட்பங்களைப் பயன்படுத்துவதன் மூலமும், உங்கள் திட்டங்களின் செயல்திறன், பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவற்றை கணிசமாக மேம்படுத்தலாம். வலை தொடர்ந்து विकसित होत असताना, या ऑप्टिमायझेशन धोरणांवर प्रभुत्व मिळवणे अपवादात्मक वापरकर्ता अनुभव देण्यासाठी आवश्यक असेल.

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