જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક આર્કિટેક્ચર: કમ્પોનન્ટ ટ્રી ઓપ્ટિમાઇઝેશનમાં નિપુણતા

આધુનિક વેબ ડેવલપમેન્ટની દુનિયામાં, જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક સર્વોપરી છે. React, Angular અને Vue.js જેવા ફ્રેમવર્ક્સ જટિલ અને ઇન્ટરેક્ટિવ યુઝર ઇન્ટરફેસ બનાવવા માટે શક્તિશાળી સાધનો પ્રદાન કરે છે. આ ફ્રેમવર્ક્સના કેન્દ્રમાં કમ્પોનન્ટ ટ્રીનો ખ્યાલ છે – એક શ્રેણીબદ્ધ માળખું જે UI નું પ્રતિનિધિત્વ કરે છે. જોકે, જેમ જેમ એપ્લિકેશન્સ જટિલતામાં વધે છે, તેમ તેમ જો યોગ્ય રીતે સંચાલિત ન કરવામાં આવે તો કમ્પોનન્ટ ટ્રી એક મોટો પર્ફોર્મન્સ અવરોધ બની શકે છે. આ લેખ જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક્સમાં કમ્પોનન્ટ ટ્રીને ઓપ્ટિમાઇઝ કરવા માટેની એક વ્યાપક માર્ગદર્શિકા પૂરી પાડે છે, જેમાં પર્ફોર્મન્સ અવરોધો, રેન્ડરિંગ વ્યૂહરચનાઓ અને શ્રેષ્ઠ પદ્ધતિઓનો સમાવેશ થાય છે.

કમ્પોનન્ટ ટ્રીને સમજવું

કમ્પોનન્ટ ટ્રી એ UI નું એક શ્રેણીબદ્ધ પ્રતિનિધિત્વ છે, જ્યાં દરેક નોડ એક કમ્પોનન્ટનું પ્રતિનિધિત્વ કરે છે. કમ્પોનન્ટ્સ પુનઃઉપયોગી બિલ્ડિંગ બ્લોક્સ છે જે તર્ક અને પ્રસ્તુતિને સમાવે છે. કમ્પોનન્ટ ટ્રીની રચના એપ્લિકેશનના પર્ફોર્મન્સને સીધી અસર કરે છે, ખાસ કરીને રેન્ડરિંગ અને અપડેટ્સ દરમિયાન.

રેન્ડરિંગ અને વર્ચ્યુઅલ DOM

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

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

પર્ફોર્મન્સ અવરોધોને ઓળખવા

ઓપ્ટિમાઇઝેશન તકનીકોમાં ઊંડા ઉતરતા પહેલાં, તમારા કમ્પોનન્ટ ટ્રીમાં સંભવિત પર્ફોર્મન્સ અવરોધોને ઓળખવા જરૂરી છે. પર્ફોર્મન્સ સમસ્યાઓના સામાન્ય કારણોમાં શામેલ છે:

• બિનજરૂરી રી-રેન્ડર્સ: જ્યારે કમ્પોનન્ટ્સના props અથવા state બદલાયા ન હોય ત્યારે પણ તે ફરીથી રેન્ડર થાય છે.
• મોટા કમ્પોનન્ટ ટ્રી: ઊંડાણપૂર્વક નેસ્ટેડ કમ્પોનન્ટ હાયરાર્કી રેન્ડરિંગને ધીમું કરી શકે છે.
• ખર્ચાળ ગણતરીઓ: રેન્ડરિંગ દરમિયાન કમ્પોનન્ટ્સમાં જટિલ ગણતરીઓ અથવા ડેટા ટ્રાન્સફોર્મેશન.
• બિનકાર્યક્ષમ ડેટા સ્ટ્રક્ચર્સ: એવા ડેટા સ્ટ્રક્ચર્સનો ઉપયોગ કરવો જે વારંવારના લુકઅપ અથવા અપડેટ્સ માટે ઓપ્ટિમાઇઝ નથી.
• DOM મેનીપ્યુલેશન: ફ્રેમવર્કના અપડેટ મિકેનિઝમ પર આધાર રાખવાને બદલે સીધું DOM મેનીપ્યુલેટ કરવું.

પ્રોફાઇલિંગ ટૂલ્સ આ અવરોધોને ઓળખવામાં મદદ કરી શકે છે. લોકપ્રિય વિકલ્પોમાં React Profiler, Angular DevTools, અને Vue.js Devtools નો સમાવેશ થાય છે. આ ટૂલ્સ તમને દરેક કમ્પોનન્ટને રેન્ડર કરવામાં લાગતા સમયને માપવા, બિનજરૂરી રી-રેન્ડર્સને ઓળખવા અને ખર્ચાળ ગણતરીઓને નિર્દેશિત કરવાની મંજૂરી આપે છે.

પ્રોફાઇલિંગ ઉદાહરણ (રીએક્ટ)

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

રીએક્ટ પ્રોફાઇલરનો ઉપયોગ કરવા માટે:

1. તમારા બ્રાઉઝરમાં રીએક્ટ ડેવટૂલ્સ ખોલો.
2. "Profiler" ટેબ પસંદ કરો.
3. "Record" બટન પર ક્લિક કરો.
4. તમારી એપ્લિકેશન સાથે ઇન્ટરેક્ટ કરો.
5. "Stop" બટન પર ક્લિક કરો.
6. પરિણામોનું વિશ્લેષણ કરો.

પ્રોફાઇલર તમને એક ફ્લેમ ગ્રાફ બતાવશે, જે દરેક કમ્પોનન્ટને રેન્ડર કરવામાં લાગતા સમયનું પ્રતિનિધિત્વ કરે છે. જે કમ્પોનન્ટ્સ રેન્ડર થવામાં લાંબો સમય લે છે તે સંભવિત અવરોધો છે. તમે રેન્ક્ડ ચાર્ટનો ઉપયોગ કરીને રેન્ડર થવામાં લીધેલા સમય પ્રમાણે સૉર્ટ કરેલા કમ્પોનન્ટ્સની સૂચિ પણ જોઈ શકો છો.

ઓપ્ટિમાઇઝેશન તકનીકો

એકવાર તમે અવરોધોને ઓળખી લો, પછી તમે તમારા કમ્પોનન્ટ ટ્રીના પર્ફોર્મન્સને સુધારવા માટે વિવિધ ઓપ્ટિમાઇઝેશન તકનીકો લાગુ કરી શકો છો.

૧. મેમોઇઝેશન (Memoization)

મેમોઇઝેશન એ એક એવી તકનીક છે જેમાં ખર્ચાળ ફંક્શન કોલ્સના પરિણામોને કેશ (cache) કરવામાં આવે છે અને જ્યારે ફરીથી સમાન ઇનપુટ્સ આવે ત્યારે કેશ કરેલું પરિણામ પરત કરવામાં આવે છે. કમ્પોનન્ટ ટ્રીના સંદર્ભમાં, મેમોઇઝેશન કમ્પોનન્ટ્સને તેમના props બદલાયા ન હોય તો ફરીથી રેન્ડર થતા અટકાવે છે.

રીએક્ટ.મેમો (React.memo)

રીએક્ટ ફંક્શનલ કમ્પોનન્ટ્સને મેમોઇઝ કરવા માટે React.memo હાયર-ઓર્ડર કમ્પોનન્ટ પ્રદાન કરે છે. React.memo કમ્પોનન્ટના props ની શેલો (shallow) સરખામણી કરે છે અને જો props બદલાયા હોય તો જ ફરીથી રેન્ડર કરે છે.

ઉદાહરણ:

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Render logic here
  return 
{props.data}
;
});

export default MyComponent;

જો શેલો સરખામણી પૂરતી ન હોય તો તમે React.memo ને કસ્ટમ સરખામણી ફંક્શન પણ પ્રદાન કરી શકો છો.

useMemo અને useCallback

useMemo અને useCallback એ રીએક્ટ હુક્સ છે જેનો ઉપયોગ અનુક્રમે વેલ્યુ અને ફંક્શન્સને મેમોઇઝ કરવા માટે થઈ શકે છે. આ હુક્સ મેમોઇઝ્ડ કમ્પોનન્ટ્સને props પાસ કરતી વખતે ખાસ કરીને ઉપયોગી છે.

useMemo એક વેલ્યુને મેમોઇઝ કરે છે:

import React, { useMemo } from 'react';

function MyComponent(props) {
  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(props.data);
  }, [props.data]);

  return 
{expensiveValue}
;
}

useCallback એક ફંક્શનને મેમોઇઝ કરે છે:

import React, { useCallback } from 'react';

function MyComponent(props) {
  const handleClick = useCallback(() => {
    // Handle click event
    props.onClick(props.data);
  }, [props.data, props.onClick]);

  return Click me;
}

useCallback વિના, દરેક રેન્ડર પર એક નવું ફંક્શન ઇન્સ્ટન્સ બનાવવામાં આવશે, જેના કારણે મેમોઇઝ્ડ ચાઇલ્ડ કમ્પોનન્ટ ફંક્શનનો તર્ક સમાન હોવા છતાં પણ ફરીથી રેન્ડર થશે.

એંગ્યુલર ચેન્જ ડિટેક્શન વ્યૂહરચનાઓ

એંગ્યુલર વિવિધ ચેન્જ ડિટેક્શન વ્યૂહરચનાઓ ઓફર કરે છે જે કમ્પોનન્ટ્સ કેવી રીતે અપડેટ થાય છે તેને અસર કરે છે. ડિફોલ્ટ વ્યૂહરચના, ChangeDetectionStrategy.Default, દરેક ચેન્જ ડિટેક્શન સાયકલમાં દરેક કમ્પોનન્ટમાં ફેરફારો માટે તપાસ કરે છે.

પર્ફોર્મન્સ સુધારવા માટે, તમે ChangeDetectionStrategy.OnPush નો ઉપયોગ કરી શકો છો. આ વ્યૂહરચના સાથે, એંગ્યુલર ફક્ત ત્યારે જ કમ્પોનન્ટમાં ફેરફારો માટે તપાસ કરે છે જો:

• કમ્પોનન્ટના ઇનપુટ પ્રોપર્ટીઝ (સંદર્ભ દ્વારા) બદલાયા હોય.
• કોઈ ઇવેન્ટ કમ્પોનન્ટ અથવા તેના કોઈ ચિલ્ડ્રનમાંથી ઉદ્ભવે.
• ચેન્જ ડિટેક્શનને સ્પષ્ટપણે ટ્રિગર કરવામાં આવે.

ChangeDetectionStrategy.OnPush નો ઉપયોગ કરવા માટે, કમ્પોનન્ટ ડેકોરેટરમાં changeDetection પ્રોપર્ટી સેટ કરો:

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponentComponent {
  @Input() data: any;
}

વ્યુ.જેએસ કમ્પ્યુટેડ પ્રોપર્ટીઝ અને મેમોઇઝેશન

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

ઉદાહરણ:

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

૨. કોડ સ્પ્લિટિંગ અને લેઝી લોડિંગ

કોડ સ્પ્લિટિંગ એ તમારી એપ્લિકેશનના કોડને નાના બંડલ્સમાં વિભાજીત કરવાની પ્રક્રિયા છે જેને માંગ પર લોડ કરી શકાય છે. આ તમારી એપ્લિકેશનનો પ્રારંભિક લોડ સમય ઘટાડે છે અને વપરાશકર્તા અનુભવને સુધારે છે.

લેઝી લોડિંગ એ એક એવી તકનીક છે જેમાં સંસાધનોને ફક્ત ત્યારે જ લોડ કરવામાં આવે છે જ્યારે તેમની જરૂર હોય. આ કમ્પોનન્ટ્સ, મોડ્યુલ્સ અથવા વ્યક્તિગત ફંક્શન્સ પર પણ લાગુ કરી શકાય છે.

રીએક્ટ.લેઝી (React.lazy) અને સસ્પેન્સ (Suspense)

રીએક્ટ કમ્પોનન્ટ્સને લેઝી લોડ કરવા માટે React.lazy ફંક્શન પ્રદાન કરે છે. React.lazy એક ફંક્શન લે છે જેણે ડાયનેમિક import() ને કોલ કરવો જ જોઇએ. આ એક Promise પરત કરે છે જે એક મોડ્યુલમાં રિઝોલ્વ થાય છે જેમાં રીએક્ટ કમ્પોનન્ટ ધરાવતું ડિફોલ્ટ એક્સપોર્ટ હોય છે.

તમારે પછી લેઝી-લોડેડ કમ્પોનન્ટની ઉપર Suspense કમ્પોનન્ટ રેન્ડર કરવો જ જોઇએ. આ લેઝી કમ્પોનન્ટ લોડ થતી વખતે પ્રદર્શિત કરવા માટે ફોલબેક UI સ્પષ્ટ કરે છે.

ઉદાહરણ:

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // કમ્પોનન્ટની વ્યાખ્યાને રિઝોલ્વ કોલબેકમાં પાસ કરો
    resolve({
      template: '
I am async!
'
    })
  }, 1000)
})

Vue.component('async-webpack-example', () => import('./my-async-component'))