ரியாக்ட் லேசி லோடிங்: உகந்த செயல்திறனுக்கான காம்போனென்ட் கோட் ஸ்ப்ளிட்டிங்

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

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

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

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

ரியாக்ட்டில் லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கை ஏன் பயன்படுத்த வேண்டும்?

உங்கள் ரியாக்ட் திட்டங்களில் லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கை இணைப்பதை நீங்கள் ஏன் கருத்தில் கொள்ள வேண்டும் என்பது இங்கே:

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

ரியாக்ட்டில் லேசி லோடிங்கை எவ்வாறு செயல்படுத்துவது

ரியாக்ட், React.lazy மற்றும் Suspense காம்போனென்ட்களைப் பயன்படுத்தி லேசி லோடிங்கிற்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது. இதோ ஒரு படிப்படியான வழிகாட்டி:

1. React.lazy() ஐப் பயன்படுத்துதல்

React.lazy() காம்போனென்ட்களை டைனமிக்காக இறக்குமதி செய்ய உங்களை அனுமதிக்கிறது, உங்கள் கோடை தனித்தனி துண்டுகளாக திறம்படப் பிரிக்கிறது. இது import() ஐ அழைக்கும் ஒரு செயல்பாட்டை எடுக்கும், இது காம்போனென்டிற்கு தீர்க்கும் ஒரு ப்ராமிஸைத் திருப்பித் தரும்.

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

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

2. <Suspense> உடன் இணைத்தல்

React.lazy() டைனமிக் இறக்குமதிகளைப் பயன்படுத்துவதால், அவை ஒத்திசைவற்றவை, நீங்கள் லேசி-லோடட் காம்போனென்டை ஒரு <Suspense> காம்போனென்டுடன் இணைக்க வேண்டும். <Suspense> காம்போனென்ட், காம்போனென்ட் ஏற்றப்படும்போது ஒரு ஃபால்பேக் UI (எ.கா., ஒரு லோடிங் ஸ்பின்னர்) ஐக் காட்ட உங்களை அனுமதிக்கிறது.

import React, { Suspense } from 'react';

function MyPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

இந்த எடுத்துக்காட்டில், MyComponent ஏற்றப்படும்போது Loading... செய்தி காட்டப்படும். காம்போனென்ட் ஏற்றப்பட்டவுடன், அது ஃபால்பேக் UI ஐ மாற்றும்.

3. நடைமுறை எடுத்துக்காட்டு: ஒரு பெரிய பட தொகுப்பை லேசி லோடிங் செய்தல்

நீங்கள் ஒரு பெரிய பட தொகுப்பைக் கொண்டிருக்கும் ஒரு சூழ்நிலையைக் கருத்தில் கொள்வோம். எல்லாப் படங்களையும் ஒரே நேரத்தில் ஏற்றுவது செயல்திறனை கணிசமாக பாதிக்கும். React.lazy() மற்றும் <Suspense> ஐப் பயன்படுத்தி படங்களை எப்படி லேசி லோட் செய்வது என்பது இங்கே:

import React, { Suspense } from 'react';

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

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... மேலும் படங்கள்
  ];

  return (
    <div>
      {images.map(image => (
        <Suspense key={image.id} fallback={<div>Loading image...</div>}>
          <LazyImage src={image.src} alt={image.alt} />
        </Suspense>
      ))}
    </div>
  );
}

export default ImageGallery;

மற்றும் Image.js காம்போனென்ட்:

import React from 'react';

const Image = ({ src, alt }) => {
  return <img src={src} alt={alt} />;
};

export default Image;

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

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

1. பிழை எல்லைகள் (Error Boundaries)

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

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // நிலையை புதுப்பிக்கவும், அடுத்த ரெண்டர் ஃபால்பேக் UI ஐக் காட்டும்.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // நீங்கள் பிழையை ஒரு பிழை அறிக்கையிடல் சேவைக்கும் பதிவு செய்யலாம்
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்த தனிப்பயன் ஃபால்பேக் UI ஐயும் ரெண்டர் செய்யலாம்
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

பின்னர் <Suspense> காம்போனென்டை <ErrorBoundary> உடன் இணைக்கவும்:

<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
</ErrorBoundary>

MyComponent ஐ ஏற்றும்போது பிழை ஏற்பட்டால், <ErrorBoundary> அதைப் பிடித்து ஃபால்பேக் UI ஐக் காட்டும்.

2. சர்வர்-சைட் ரெண்டரிங் (SSR) மற்றும் லேசி லோடிங்

லேசி லோடிங்கை சர்வர்-சைட் ரெண்டரிங் (SSR) உடன் இணைத்தும் உங்கள் செயலியின் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்தலாம். இருப்பினும், இதற்கு சில கூடுதல் உள்ளமைவு தேவை. சர்வர் டைனமிக் இறக்குமதிகளை சரியாகக் கையாள முடியும் என்பதையும், லேசி-லோடட் காம்போனென்ட்கள் கிளையன்ட் பக்கத்தில் சரியாக ஹைட்ரேட் செய்யப்படுகின்றன என்பதையும் நீங்கள் உறுதி செய்ய வேண்டும்.

Next.js மற்றும் Gatsby.js போன்ற கருவிகள் SSR சூழல்களில் லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கிற்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகின்றன, இது செயல்முறையை மிகவும் எளிதாக்குகிறது.

3. லேசி-லோடட் காம்போனென்ட்களை முன்கூட்டியே ஏற்றுதல்

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

import('./MyComponent'); // MyComponent ஐ முன்கூட்டியே ஏற்றவும்

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

4. வெப்பேக் மேஜிக் கமென்ட்ஸ் உடன் டைனமிக் இறக்குமதிகள்

வெப்பேக்கின் 'மேஜிக் கமென்ட்ஸ்' உருவாக்கப்பட்ட கோட் துண்டுகளின் பெயர்களைத் தனிப்பயனாக்க ஒரு வழியை வழங்குகிறது. இது உங்கள் செயலியின் பண்டில் கட்டமைப்பை பிழைத்திருத்தம் செய்வதற்கும் பகுப்பாய்வு செய்வதற்கும் உதவியாக இருக்கும். எடுத்துக்காட்டாக:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

இது ஒரு பொதுவான பெயருக்குப் பதிலாக 'my-component.js' (அல்லது அதுபோன்ற) பெயரிடப்பட்ட ஒரு கோட் துண்டை உருவாக்கும்.

5. பொதுவான தவறுகளைத் தவிர்த்தல்

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

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

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

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

எடுத்துக்காட்டு: சர்வதேச இ-காமர்ஸ் வலைத்தளம்

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

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // பயனரின் நாட்டைக் கண்டறியும் செயல்பாடு

  return (
    <Suspense fallback={<div>Loading content for your region...</div>}>
      <CurrencyFormatter />
      <ProductCatalog />
    </Suspense>
  );
}

முடிவுரை

லேசி லோடிங் மற்றும் காம்போனென்ட் கோட் ஸ்ப்ளிட்டிங் ஆகியவை ரியாக்ட் செயலிகளின் செயல்திறனை மேம்படுத்துவதற்கான சக்திவாய்ந்த நுட்பங்களாகும். காம்போனென்ட்கள் தேவைப்படும்போது மட்டும் அவற்றை ஏற்றுவதன் மூலம், நீங்கள் ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாகக் குறைக்கலாம், பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் உங்கள் எஸ்சிஓவை மேம்படுத்தலாம். ரியாக்ட்டின் உள்ளமைக்கப்பட்ட React.lazy() மற்றும் <Suspense> காம்போனென்ட்கள் உங்கள் திட்டங்களில் லேசி லோடிங்கை செயல்படுத்துவதை எளிதாக்குகின்றன. உலகளாவிய பார்வையாளர்களுக்காக வேகமான, அதிக பதிலளிக்கக்கூடிய மற்றும் ஈர்க்கக்கூடிய வலைச் செயலிகளை உருவாக்க இந்த நுட்பங்களைப் பின்பற்றுங்கள்.

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