જાવાસ્ક્રિપ્ટ મોડ્યુલ ગ્રાફ ઓપ્ટિમાઇઝેશન: ડિપેન્ડન્સી ગ્રાફનું સરળીકરણ

આધુનિક જાવાસ્ક્રિપ્ટ ડેવલપમેન્ટમાં, વેબપેક, રોલઅપ અને પાર્સલ જેવા મોડ્યુલ બંડલર્સ ડિપેન્ડન્સીનું સંચાલન કરવા અને ડિપ્લોયમેન્ટ માટે ઓપ્ટિમાઇઝ્ડ બંડલ બનાવવા માટે આવશ્યક સાધનો છે. આ બંડલર્સ મોડ્યુલ ગ્રાફ પર આધાર રાખે છે, જે તમારી એપ્લિકેશનમાં મોડ્યુલ્સ વચ્ચેની ડિપેન્ડન્સીનું પ્રતિનિધિત્વ છે. આ ગ્રાફની જટિલતા બિલ્ડ સમય, બંડલનું કદ અને એકંદરે એપ્લિકેશન પર્ફોર્મન્સ પર નોંધપાત્ર અસર કરી શકે છે. તેથી, ડિપેન્ડન્સીને સરળ બનાવીને મોડ્યુલ ગ્રાફને ઓપ્ટિમાઇઝ કરવું એ ફ્રન્ટ-એન્ડ ડેવલપમેન્ટનું એક મહત્ત્વનું પાસું છે.

મોડ્યુલ ગ્રાફને સમજવું

મોડ્યુલ ગ્રાફ એ એક ડાયરેક્ટેડ ગ્રાફ છે જ્યાં દરેક નોડ એક મોડ્યુલ (જાવાસ્ક્રિપ્ટ ફાઇલ, CSS ફાઇલ, ઇમેજ, વગેરે) નું પ્રતિનિધિત્વ કરે છે અને દરેક એજ મોડ્યુલ્સ વચ્ચેની ડિપેન્ડન્સીનું પ્રતિનિધિત્વ કરે છે. જ્યારે બંડલર તમારા કોડને પ્રોસેસ કરે છે, ત્યારે તે એન્ટ્રી પોઇન્ટ (સામાન્ય રીતે `index.js` અથવા `main.js`) થી શરૂ થાય છે અને ડિપેન્ડન્સીને રિકર્સિવલી ટ્રાવર્સ કરે છે, અને મોડ્યુલ ગ્રાફ બનાવે છે. આ ગ્રાફનો ઉપયોગ પછી વિવિધ ઓપ્ટિમાઇઝેશન કરવા માટે થાય છે, જેમ કે:

• ટ્રી શેકિંગ: ડેડ કોડ (કોડ જેનો ક્યારેય ઉપયોગ થતો નથી) દૂર કરવો.
• કોડ સ્પ્લિટિંગ: કોડને નાના ભાગોમાં વિભાજીત કરવો જે માંગ પર લોડ કરી શકાય.
• મોડ્યુલ કોન્કેટેનેશન: ઓવરહેડ ઘટાડવા માટે બહુવિધ મોડ્યુલ્સને એક જ સ્કોપમાં જોડવા.
• મિનિફિકેશન: વ્હાઇટસ્પેસ દૂર કરીને અને વેરીએબલના નામને ટૂંકા કરીને કોડનું કદ ઘટાડવું.

એક જટિલ મોડ્યુલ ગ્રાફ આ ઓપ્ટિમાઇઝેશનમાં અવરોધ લાવી શકે છે, જેનાથી બંડલનું કદ મોટું થાય છે અને લોડિંગ સમય ધીમો થાય છે. તેથી, શ્રેષ્ઠ પર્ફોર્મન્સ પ્રાપ્ત કરવા માટે મોડ્યુલ ગ્રાફને સરળ બનાવવો આવશ્યક છે.

ડિપેન્ડન્સી ગ્રાફ સરળીકરણ માટેની તકનીકો

ડિપેન્ડન્સી ગ્રાફને સરળ બનાવવા અને બિલ્ડ પર્ફોર્મન્સ સુધારવા માટે ઘણી તકનીકોનો ઉપયોગ કરી શકાય છે. તેમાં શામેલ છે:

૧. સર્ક્યુલર ડિપેન્ડન્સીને ઓળખવી અને દૂર કરવી

સર્ક્યુલર ડિપેન્ડન્સી ત્યારે થાય છે જ્યારે બે કે તેથી વધુ મોડ્યુલ્સ એકબીજા પર પ્રત્યક્ષ કે પરોક્ષ રીતે નિર્ભર હોય. ઉદાહરણ તરીકે, મોડ્યુલ 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` અથવા બંડલર-સ્પેસિફિક પ્લગઇન્સ જેવા સાધનોનો ઉપયોગ કરીને સર્ક્યુલર ડિપેન્ડન્સી માટે સ્કેન કરો અને તેને તાત્કાલિક ઉકેલો.

૨. ઇમ્પોર્ટ્સને ઓપ્ટિમાઇઝ કરવું

તમે જે રીતે મોડ્યુલ્સ ઇમ્પોર્ટ કરો છો તે મોડ્યુલ ગ્રાફને નોંધપાત્ર રીતે અસર કરી શકે છે. નેમ્ડ ઇમ્પોર્ટ્સનો ઉપયોગ અને વાઇલ્ડકાર્ડ ઇમ્પોર્ટ્સ ટાળવાથી બંડલરને ટ્રી શેકિંગ વધુ અસરકારક રીતે કરવામાં મદદ મળી શકે છે.

ઉદાહરણ (બિનકાર્યક્ષમ):

            import * as utils from './utils';

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

            

              
                Copy
              
            
          

આ કિસ્સામાં, બંડલર કદાચ નક્કી ન કરી શકે કે `utils.js` માંથી કયા ફંક્શન્સનો વાસ્તવમાં ઉપયોગ થાય છે, અને સંભવિતપણે બિનઉપયોગી કોડને બંડલમાં શામેલ કરી શકે છે.

ઉદાહરણ (કાર્યક્ષમ):

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

functionA();
functionB();

            

              
                Copy
              
            
          

નેમ્ડ ઇમ્પોર્ટ્સ સાથે, બંડલર સરળતાથી ઓળખી શકે છે કે કયા ફંક્શન્સનો ઉપયોગ થાય છે અને બાકીનાને દૂર કરી શકે છે.

કાર્યક્ષમ સૂચન: જ્યારે પણ શક્ય હોય ત્યારે વાઇલ્ડકાર્ડ ઇમ્પોર્ટ્સ કરતાં નેમ્ડ ઇમ્પોર્ટ્સને પ્રાધાન્ય આપો. આ પ્રથાને લાગુ કરવા માટે ઇમ્પોર્ટ-સંબંધિત નિયમો સાથે ESLint જેવા સાધનોનો ઉપયોગ કરો.

૩. કોડ સ્પ્લિટિંગ

કોડ સ્પ્લિટિંગ એ તમારી એપ્લિકેશનને નાના ભાગોમાં વિભાજીત કરવાની પ્રક્રિયા છે જે માંગ પર લોડ કરી શકાય છે. આ તમારી એપ્લિકેશનનો પ્રારંભિક લોડ સમય ઘટાડે છે કારણ કે તે ફક્ત પ્રારંભિક દૃશ્ય માટે જરૂરી કોડ લોડ કરે છે. સામાન્ય કોડ સ્પ્લિટિંગ વ્યૂહરચનાઓમાં શામેલ છે:

• રાઉટ-આધારિત સ્પ્લિટિંગ: એપ્લિકેશનના રાઉટ્સના આધારે કોડને વિભાજીત કરવો.
• કમ્પોનન્ટ-આધારિત સ્પ્લિટિંગ: વ્યક્તિગત કમ્પોનન્ટ્સના આધારે કોડને વિભાજીત કરવો.
• વેન્ડર સ્પ્લિટિંગ: તૃતીય-પક્ષ લાઇબ્રેરીઓને તમારા એપ્લિકેશન કોડથી અલગ કરવી.

ઉદાહરણ (રીએક્ટ સાથે રાઉટ-આધારિત સ્પ્લિટિંગ):

            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...