ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் கட்டமைப்பு: காம்பொனென்ட் ட்ரீ ஆப்டிமைசேஷனில் தேர்ச்சி பெறுதல்

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

காம்பொனென்ட் ட்ரீயைப் புரிந்துகொள்ளுதல்

காம்பொனென்ட் ட்ரீ என்பது UI-இன் ஒரு படிநிலை பிரதிநிதித்துவம் ஆகும், இதில் ஒவ்வொரு முனையும் ஒரு காம்பொனென்ட்டைக் குறிக்கிறது. காம்பொனென்ட்கள் தர்க்கம் மற்றும் উপস্থাপனையை உள்ளடக்கிய மறுபயன்பாட்டு கட்டுமானத் தொகுதிகள் ஆகும். காம்பொனென்ட் ட்ரீயின் அமைப்பு பயன்பாட்டின் செயல்திறனை நேரடியாக பாதிக்கிறது, குறிப்பாக ரெண்டரிங் மற்றும் புதுப்பிப்புகளின் போது.

ரெண்டரிங் மற்றும் விர்ச்சுவல் DOM

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

இருப்பினும், இந்த சமரச செயல்முறை கணக்கீட்டு ரீதியாக செலவு மிக்கதாக இருக்கலாம், குறிப்பாக பெரிய மற்றும் சிக்கலான காம்பொனென்ட் ட்ரீக்களுக்கு. சமரச செலவைக் குறைக்கவும் மற்றும் ஒட்டுமொத்த செயல்திறனை மேம்படுத்தவும் காம்பொனென்ட் ட்ரீயை மேம்படுத்துவது முக்கியம்.

செயல்திறன் தடைகளை அடையாளம் காணுதல்

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

• தேவையற்ற மறு-ரெண்டர்கள்: காம்பொனென்ட்கள் அவற்றின் props அல்லது state மாறாதபோதும் மறு-ரெண்டர் ஆவது.
• பெரிய காம்பொனென்ட் ட்ரீக்கள்: ஆழமாகப் பதிக்கப்பட்ட காம்பொனென்ட் படிநிலைகள் ரெண்டரிங்கை மெதுவாக்கலாம்.
• விலையுயர்ந்த கணக்கீடுகள்: ரெண்டரிங்கின் போது காம்பொனென்ட்டுகளுக்குள் சிக்கலான கணக்கீடுகள் அல்லது தரவு மாற்றங்கள்.
• திறமையற்ற தரவுக் கட்டமைப்புகள்: அடிக்கடி தேடல்கள் அல்லது புதுப்பிப்புகளுக்கு உகந்ததாக இல்லாத தரவுக் கட்டமைப்புகளைப் பயன்படுத்துதல்.
• DOM கையாளுதல்: ஃபிரேம்வொர்க்கின் புதுப்பிப்பு வழிமுறையை நம்பாமல் நேரடியாக DOM-ஐ கையாளுதல்.

சுயவிவரக் கருவிகள் (Profiling tools) இந்தத் தடைகளை அடையாளம் காண உதவும். ரியாக்ட் சுயவிவரம், ஆங்குலர் DevTools, மற்றும் வ்யூ.js Devtools ஆகியவை பிரபலமான விருப்பங்கள். இந்தக் கருவிகள் ஒவ்வொரு காம்பொனென்ட்டையும் ரெண்டர் செய்ய செலவழித்த நேரத்தை அளவிடவும், தேவையற்ற மறு-ரெண்டர்களை அடையாளம் காணவும், மற்றும் விலையுயர்ந்த கணக்கீடுகளைக் கண்டறியவும் உங்களை அனுமதிக்கின்றன.

சுயவிவர உதாரணம் (ரியாக்ட்)

ரியாக்ட் சுயவிவரம் (React Profiler) உங்கள் ரியாக்ட் பயன்பாடுகளின் செயல்திறனைப் பகுப்பாய்வு செய்வதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். நீங்கள் அதை ரியாக்ட் DevTools உலாவி நீட்டிப்பில் அணுகலாம். இது உங்கள் பயன்பாட்டுடனான தொடர்புகளைப் பதிவுசெய்து, அந்தத் தொடர்புகளின் போது ஒவ்வொரு காம்பொனென்ட்டின் செயல்திறனையும் பகுப்பாய்வு செய்ய உங்களை அனுமதிக்கிறது.

ரியாக்ட் சுயவிவரத்தைப் பயன்படுத்த:

1. உங்கள் உலாவியில் ரியாக்ட் DevTools-ஐத் திறக்கவும்.
2. "Profiler" தாவலைத் தேர்ந்தெடுக்கவும்.
3. "Record" பொத்தானைக் கிளிக் செய்யவும்.
4. உங்கள் பயன்பாட்டுடன் தொடர்பு கொள்ளவும்.
5. "Stop" பொத்தானைக் கிளிக் செய்யவும்.
6. முடிவுகளைப் பகுப்பாய்வு செய்யவும்.

சுயவிவரம் உங்களுக்கு ஒரு flame graph-ஐக் காண்பிக்கும், இது ஒவ்வொரு காம்பொனென்ட்டையும் ரெண்டர் செய்ய செலவழித்த நேரத்தைக் குறிக்கிறது. ரெண்டர் செய்ய அதிக நேரம் எடுக்கும் காம்பொனென்ட்கள் சாத்தியமான தடைகள் ஆகும். தரவரிசைப்படுத்தப்பட்ட விளக்கப்படத்தைப் (Ranked chart) பயன்படுத்தி, காம்பொனென்ட்கள் ரெண்டர் செய்ய எடுத்துக் கொண்ட நேரத்தின் அடிப்படையில் வரிசைப்படுத்தப்பட்ட பட்டியலையும் நீங்கள் காணலாம்.

மேம்படுத்தல் நுட்பங்கள்

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

1. மெமோயிசேஷன் (Memoization)

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

React.memo

ரியாக்ட், ஃபங்ஷனல் காம்பொனென்ட்களை மெமோயிஸ் செய்ய React.memo என்ற உயர்-வரிசைக் காம்பொனென்ட்டை வழங்குகிறது. React.memo காம்பொனென்ட்டின் props-களை மேலோட்டமாக ஒப்பிட்டு, 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;
}

வ்யூ.js கணக்கிடப்பட்ட பண்புகள் மற்றும் மெமோயிசேஷன்

வ்யூ.js தரவு மாறும்போது DOM-ஐ தானாகப் புதுப்பிக்க ஒரு வினைத்திறன் அமைப்பைப் பயன்படுத்துகிறது. கணக்கிடப்பட்ட பண்புகள் தானாகவே மெமோயிஸ் செய்யப்பட்டு, அவற்றின் சார்புகள் மாறும்போது மட்டுமே மீண்டும் மதிப்பீடு செய்யப்படுகின்றன.

உதாரணம்:

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

2. கோட் ஸ்ப்ளிட்டிங் மற்றும் லேசி லோடிங்

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

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

React.lazy மற்றும் Suspense

ரியாக்ட், காம்பொனென்ட்களை லேசியாக ஏற்றுவதற்கு React.lazy செயல்பாட்டை வழங்குகிறது. React.lazy ஒரு டைனமிக் import()-ஐ அழைக்க வேண்டிய ஒரு செயல்பாட்டை எடுக்கும். இது ஒரு Promise-ஐத் திருப்பியளிக்கிறது, இது ரியாக்ட் காம்பொனென்ட்டைக் கொண்ட ஒரு default export உடன் ஒரு மாட்யூலுக்குத் தீர்க்கிறது.

பின்னர் நீங்கள் லேசி-லோட் செய்யப்பட்ட காம்பொனென்ட்டிற்கு மேலே ஒரு 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 () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '
I am async!
'
    })
  }, 1000)
})

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