ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂൾ ഗ്രാഫ് ഒപ്റ്റിമൈസേഷൻ: ഡിപെൻഡൻസി ഗ്രാഫ് ലഘൂകരണം

ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്‌മെന്റിൽ, വെബ്പാക്ക്, റോൾഅപ്പ്, പാർസൽ പോലുള്ള മൊഡ്യൂൾ ബണ്ട്ലറുകൾ ഡിപെൻഡൻസികൾ കൈകാര്യം ചെയ്യുന്നതിനും വിന്യാസത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്ത ബണ്ടിലുകൾ നിർമ്മിക്കുന്നതിനും അത്യാവശ്യമായ ഉപകരണങ്ങളാണ്. ഈ ബണ്ട്ലറുകൾ ഒരു മൊഡ്യൂൾ ഗ്രാഫിനെ ആശ്രയിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ മൊഡ്യൂളുകൾ തമ്മിലുള്ള ആശ്രിതത്വത്തിന്റെ ഒരു പ്രതിനിധാനമാണ്. ഈ ഗ്രാഫിന്റെ സങ്കീർണ്ണത ബിൽഡ് സമയത്തെയും ബണ്ടിൽ വലുപ്പത്തെയും മൊത്തത്തിലുള്ള ആപ്ലിക്കേഷൻ പ്രകടനത്തെയും കാര്യമായി ബാധിക്കും. അതിനാൽ ഡിപെൻഡൻസികൾ ലഘൂകരിച്ച് മൊഡ്യൂൾ ഗ്രാഫ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റിന്റെ ഒരു നിർണായക വശമാണ്.

മൊഡ്യൂൾ ഗ്രാഫിനെ മനസ്സിലാക്കാം

മൊഡ്യൂൾ ഗ്രാഫ് ഒരു ഡയറക്റ്റഡ് ഗ്രാഫാണ്, അതിൽ ഓരോ നോഡും ഒരു മൊഡ്യൂളിനെയും (ജാവാസ്ക്രിപ്റ്റ് ഫയൽ, സിഎസ്എസ് ഫയൽ, ഇമേജ് മുതലായവ) ഓരോ എഡ്ജും മൊഡ്യൂളുകൾ തമ്മിലുള്ള ഡിപെൻഡൻസിയെയും പ്രതിനിധീകരിക്കുന്നു. ഒരു ബണ്ട്ലർ നിങ്ങളുടെ കോഡ് പ്രോസസ്സ് ചെയ്യുമ്പോൾ, അത് ഒരു എൻട്രി പോയിന്റിൽ നിന്ന് (സാധാരണയായി `index.js` അല്ലെങ്കിൽ `main.js`) ആരംഭിച്ച് ഡിപെൻഡൻസികളിലൂടെ ആവർത്തിച്ച് സഞ്ചരിച്ച് മൊഡ്യൂൾ ഗ്രാഫ് നിർമ്മിക്കുന്നു. ഈ ഗ്രാഫ് പിന്നീട് വിവിധ ഒപ്റ്റിമൈസേഷനുകൾ നടത്താൻ ഉപയോഗിക്കുന്നു, ഉദാഹരണത്തിന്:

• ട്രീ ഷേക്കിംഗ്: ഉപയോഗിക്കാത്ത കോഡ് (ഡെഡ് കോഡ്) ഒഴിവാക്കുന്നു.
• കോഡ് സ്പ്ലിറ്റിംഗ്: കോഡിനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്നു.
• മൊഡ്യൂൾ കോൺകാറ്റിനേഷൻ: ഓവർഹെഡ് കുറയ്ക്കുന്നതിന് ഒന്നിലധികം മൊഡ്യൂളുകളെ ഒരൊറ്റ സ്കോപ്പിലേക്ക് സംയോജിപ്പിക്കുന്നു.
• മിനിഫിക്കേഷൻ: വൈറ്റ്‌സ്‌പേസ് നീക്കം ചെയ്തും വേരിയബിൾ പേരുകൾ ചെറുതാക്കിയും കോഡിന്റെ വലുപ്പം കുറയ്ക്കുന്നു.

ഒരു സങ്കീർണ്ണമായ മൊഡ്യൂൾ ഗ്രാഫ് ഈ ഒപ്റ്റിമൈസേഷനുകളെ തടസ്സപ്പെടുത്തുകയും വലിയ ബണ്ടിൽ വലുപ്പത്തിലേക്കും വേഗത കുറഞ്ഞ ലോഡിംഗ് സമയത്തിലേക്കും നയിക്കുകയും ചെയ്യും. അതിനാൽ, മികച്ച പ്രകടനം കൈവരിക്കുന്നതിന് മൊഡ്യൂൾ ഗ്രാഫ് ലഘൂകരിക്കുന്നത് അത്യാവശ്യമാണ്.

ഡിപെൻഡൻസി ഗ്രാഫ് ലഘൂകരിക്കുന്നതിനുള്ള വിദ്യകൾ

ഡിപെൻഡൻസി ഗ്രാഫ് ലഘൂകരിക്കുന്നതിനും ബിൽഡ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും നിരവധി വിദ്യകൾ ഉപയോഗിക്കാം. അവയിൽ ചിലത് താഴെ പറയുന്നവയാണ്:

1. സർക്കുലർ ഡിപെൻഡൻസികൾ കണ്ടെത്തുകയും നീക്കം ചെയ്യുകയും ചെയ്യുക

രണ്ടോ അതിലധികമോ മൊഡ്യൂളുകൾ പരസ്പരം നേരിട്ടോ അല്ലാതെയോ ആശ്രയിക്കുമ്പോഴാണ് സർക്കുലർ ഡിപെൻഡൻസികൾ ഉണ്ടാകുന്നത്. ഉദാഹരണത്തിന്, മൊഡ്യൂൾ A, മൊഡ്യൂൾ B-യെ ആശ്രയിച്ചേക്കാം, അത് തിരിച്ച് മൊഡ്യൂൾ A-യെയും ആശ്രയിക്കുന്നു. സർക്കുലർ ഡിപെൻഡൻസികൾ മൊഡ്യൂൾ ഇനീഷ്യലൈസേഷൻ, കോഡ് എക്സിക്യൂഷൻ, ട്രീ ഷേക്കിംഗ് എന്നിവയിൽ പ്രശ്നങ്ങളുണ്ടാക്കും. സർക്കുലർ ഡിപെൻഡൻസികൾ കണ്ടെത്തുമ്പോൾ ബണ്ട്ലറുകൾ സാധാരണയായി മുന്നറിയിപ്പുകളോ പിശകുകളോ നൽകുന്നു.

ഉദാഹരണം:

moduleA.js:

            import { moduleBFunction } from './moduleB';

export function moduleAFunction() {
 return moduleBFunction();
}

            

              
                Copy
              
            
          

moduleB.js:

            import { moduleAFunction } from './moduleA';

export function moduleBFunction() {
 return moduleAFunction();
}

            

              
                Copy
              
            
          

പരിഹാരം:

സർക്കുലർ ഡിപെൻഡൻസി നീക്കം ചെയ്യുന്നതിനായി കോഡ് റീഫാക്ടർ ചെയ്യുക. ഇതിനായി പങ്കുവെക്കേണ്ട ഫംഗ്ഷണാലിറ്റി അടങ്ങുന്ന ഒരു പുതിയ മൊഡ്യൂൾ ഉണ്ടാക്കുകയോ ഡിപെൻഡൻസി ഇൻജെക്ഷൻ ഉപയോഗിക്കുകയോ ചെയ്യാം.

റീഫാക്ടർ ചെയ്തത്:

utils.js:

            export function sharedFunction() {
 // Shared logic here
 return "Shared value";
}

            

              
                Copy
              
            
          

moduleA.js:

            import { sharedFunction } from './utils';

export function moduleAFunction() {
 return sharedFunction();
}

            

              
                Copy
              
            
          

moduleB.js:

            import { sharedFunction } from './utils';

export function moduleBFunction() {
 return sharedFunction();
}

            

              
                Copy
              
            
          

പ്രവർത്തനപരമായ ഉൾക്കാഴ്ച: `madge` അല്ലെങ്കിൽ ബണ്ട്ലർ-നിർദ്ദിഷ്‌ട പ്ലഗിനുകൾ പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡ്ബേസിൽ സർക്കുലർ ഡിപെൻഡൻസികൾക്കായി പതിവായി സ്കാൻ ചെയ്യുകയും അവ ഉടനടി പരിഹരിക്കുകയും ചെയ്യുക.

2. ഇമ്പോർട്ടുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക

നിങ്ങൾ മൊഡ്യൂളുകൾ ഇമ്പോർട്ട് ചെയ്യുന്ന രീതി മൊഡ്യൂൾ ഗ്രാഫിനെ കാര്യമായി സ്വാധീനിക്കും. നെയിംഡ് ഇമ്പോർട്ടുകൾ ഉപയോഗിക്കുന്നതും വൈൽഡ്കാർഡ് ഇമ്പോർട്ടുകൾ ഒഴിവാക്കുന്നതും ട്രീ ഷേക്കിംഗ് കൂടുതൽ ഫലപ്രദമായി നടത്താൻ ബണ്ട്ലറിനെ സഹായിക്കും.

ഉദാഹരണം (കാര്യക്ഷമമല്ലാത്തത്):

            import * as utils from './utils';

utils.functionA();
utils.functionB();

            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, `utils.js`-ൽ നിന്ന് ഏതൊക്കെ ഫംഗ്ഷനുകളാണ് യഥാർത്ഥത്തിൽ ഉപയോഗിക്കുന്നതെന്ന് ബണ്ട്ലറിന് നിർണ്ണയിക്കാൻ കഴിഞ്ഞേക്കില്ല, ഇത് ഉപയോഗിക്കാത്ത കോഡ് ബണ്ടിലിൽ ഉൾപ്പെടുത്താൻ സാധ്യതയുണ്ട്.

ഉദാഹരണം (കാര്യക്ഷമമായത്):

            import { functionA, functionB } from './utils';

functionA();
functionB();

            

              
                Copy
              
            
          

നെയിംഡ് ഇമ്പോർട്ടുകൾ ഉപയോഗിക്കുമ്പോൾ, ഏതൊക്കെ ഫംഗ്ഷനുകളാണ് ഉപയോഗിക്കുന്നതെന്ന് ബണ്ട്ലറിന് എളുപ്പത്തിൽ തിരിച്ചറിയാനും ബാക്കിയുള്ളവ ഒഴിവാക്കാനും കഴിയും.

പ്രവർത്തനപരമായ ഉൾക്കാഴ്ച: സാധ്യമാകുമ്പോഴെല്ലാം വൈൽഡ്കാർഡ് ഇമ്പോർട്ടുകളേക്കാൾ നെയിംഡ് ഇമ്പോർട്ടുകൾക്ക് മുൻഗണന നൽകുക. ഈ രീതി നടപ്പിലാക്കാൻ ESLint പോലുള്ള ടൂളുകൾ ഇമ്പോർട്ടുമായി ബന്ധപ്പെട്ട നിയമങ്ങൾക്കൊപ്പം ഉപയോഗിക്കുക.

3. കോഡ് സ്പ്ലിറ്റിംഗ്

നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്ന പ്രക്രിയയാണ് കോഡ് സ്പ്ലിറ്റിംഗ്. പ്രാരംഭ കാഴ്ചയ്ക്ക് ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യുന്നതിലൂടെ ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുന്നു. സാധാരണ കോഡ് സ്പ്ലിറ്റിംഗ് തന്ത്രങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• റൂട്ട്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ്: ആപ്ലിക്കേഷന്റെ റൂട്ടുകളെ അടിസ്ഥാനമാക്കി കോഡ് വിഭജിക്കുന്നു.
• കമ്പോണന്റ്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ്: ഓരോ കമ്പോണന്റുകളെയും അടിസ്ഥാനമാക്കി കോഡ് വിഭജിക്കുന്നു.
• വെണ്ടർ സ്പ്ലിറ്റിംഗ്: തേർഡ്-പാർട്ടി ലൈബ്രറികളെ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോഡിൽ നിന്ന് വേർതിരിക്കുന്നു.

ഉദാഹരണം (റിയാക്റ്റ് ഉപയോഗിച്ച് റൂട്ട്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ്):

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

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

function App() {
 return (
 
 Loading...