జావాస్క్రిప్ట్ పనితీరు ఆప్టిమైజేషన్: కోడ్ స్ప్లిటింగ్ వర్సెస్ లేజీ ఎవాల్యుయేషన్

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

ఈ ఉదాహరణలో, `OtherComponent` రెండర్ అయినప్పుడు మాత్రమే లోడ్ చేయబడుతుంది. అది లోడ్ అవుతున్నప్పుడు, వినియోగదారు "లోడ్ అవుతోంది..." సందేశాన్ని చూస్తారు.

కోడ్ స్ప్లిటింగ్ కోసం సాధనాలు

• Webpack: వివిధ కోడ్ స్ప్లిటింగ్ టెక్నిక్‌లకు మద్దతు ఇచ్చే ఒక ప్రముఖ మాడ్యూల్ బండ్లర్.
• Rollup: చిన్న, సమర్థవంతమైన బండిల్స్‌ను సృష్టించడంపై దృష్టి సారించే మరో మాడ్యూల్ బండ్లర్.
• Parcel: కోడ్ స్ప్లిటింగ్‌ను స్వయంచాలకంగా నిర్వహించే జీరో-కాన్ఫిగరేషన్ బండ్లర్.
• Vite: వేగవంతమైన అభివృద్ధి మరియు ఆప్టిమైజ్ చేయబడిన ప్రొడక్షన్ బిల్డ్‌ల కోసం స్థానిక ES మాడ్యూల్స్‌ను ఉపయోగించుకునే ఒక బిల్డ్ టూల్.

లేజీ ఎవాల్యుయేషన్: కంప్యూటేషన్‌ను వాయిదా వేయడం

లేజీ ఎవాల్యుయేషన్ అంటే ఏమిటి?

లేజీ ఎవాల్యుయేషన్, దీనిని వాయిదా వేయబడిన మూల్యాంకనం అని కూడా అంటారు, ఇది ఒక ప్రోగ్రామింగ్ టెక్నిక్, దీనిలో ఒక ఎక్స్‌ప్రెషన్ యొక్క మూల్యాంకనం దాని విలువ వాస్తవంగా అవసరమయ్యే వరకు ఆలస్యం చేయబడుతుంది. మరో మాటలో చెప్పాలంటే, గణనలు వాటి ఫలితాలు అవసరమైనప్పుడు మాత్రమే నిర్వహించబడతాయి, వాటిని ముందుగానే ఆత్రుతగా గణించడం కంటే.

మీరు బహుళ వంటకాల భోజనం సిద్ధం చేస్తున్నారని ఊహించుకోండి. మీరు అన్ని వంటకాలను ఒకేసారి వండరు. బదులుగా, మీరు ప్రతి వంటకాన్ని వడ్డించే సమయం వచ్చినప్పుడు మాత్రమే సిద్ధం చేస్తారు. లేజీ ఎవాల్యుయేషన్ కూడా అదే విధంగా పనిచేస్తుంది, గణనలు వాటి ఫలితాలు అవసరమైనప్పుడు మాత్రమే నిర్వహిస్తుంది.

లేజీ ఎవాల్యుయేషన్ ఎలా పనిచేస్తుంది

జావాస్క్రిప్ట్‌లో, లేజీ ఎవాల్యుయేషన్‌ను వివిధ టెక్నిక్‌లను ఉపయోగించి అమలు చేయవచ్చు:

• ఫంక్షన్‌లు: ఒక ఎక్స్‌ప్రెషన్‌ను ఫంక్షన్‌లో చుట్టడం ద్వారా, ఫంక్షన్ పిలిచే వరకు దాని మూల్యాంకనాన్ని వాయిదా వేయవచ్చు.
• జనరేటర్లు: జనరేటర్లు డిమాండ్‌పై విలువలను ఉత్పత్తి చేసే ఇటరేటర్‌లను సృష్టించడానికి ఒక మార్గాన్ని అందిస్తాయి.
• మెమోయిజేషన్: మెమోయిజేషన్ అంటే ఖరీదైన ఫంక్షన్ కాల్స్ ఫలితాలను కాష్ చేయడం మరియు అవే ఇన్‌పుట్‌లు మళ్లీ వచ్చినప్పుడు కాష్ చేసిన ఫలితాన్ని తిరిగి ఇవ్వడం.
• ప్రాక్సీలు: ప్రాపర్టీ యాక్సెస్‌ను అడ్డగించడానికి మరియు ప్రాపర్టీ విలువలు వాస్తవంగా యాక్సెస్ చేయబడే వరకు వాటి గణనను వాయిదా వేయడానికి ప్రాక్సీలను ఉపయోగించవచ్చు.

లేజీ ఎవాల్యుయేషన్ ప్రయోజనాలు

• మెరుగైన పనితీరు: అనవసరమైన గణనలను వాయిదా వేయడం ద్వారా, లేజీ ఎవాల్యుయేషన్ పనితీరును గణనీయంగా మెరుగుపరుస్తుంది, ముఖ్యంగా పెద్ద డేటాసెట్‌లు లేదా సంక్లిష్ట గణనలతో వ్యవహరించేటప్పుడు.
• తగ్గిన మెమరీ వినియోగం: వెంటనే అవసరం లేని మధ్యంతర విలువలను సృష్టించకుండా ఉండటం ద్వారా లేజీ ఎవాల్యుయేషన్ మెమరీ వినియోగాన్ని తగ్గిస్తుంది.
• పెరిగిన ప్రతిస్పందన: ప్రారంభ లోడ్ సమయంలో అనవసరమైన గణనలను నివారించడం ద్వారా, లేజీ ఎవాల్యుయేషన్ అప్లికేషన్ యొక్క ప్రతిస్పందనను పెంచుతుంది.
• అనంతమైన డేటా స్ట్రక్చర్‌లు: లేజీ ఎవాల్యుయేషన్ అనంతమైన జాబితాలు లేదా స్ట్రీమ్‌ల వంటి అనంతమైన డేటా స్ట్రక్చర్‌లతో పనిచేయడానికి మిమ్మల్ని అనుమతిస్తుంది, అవసరమైన మూలకాలను డిమాండ్‌పై మాత్రమే గణించడం ద్వారా.

ఉదాహరణ: చిత్రాలను లేజీ లోడింగ్ చేయడం

లేజీ ఎవాల్యుయేషన్ యొక్క ఒక సాధారణ వినియోగ సందర్భం చిత్రాలను లేజీ లోడింగ్ చేయడం. ఒక పేజీలోని అన్ని చిత్రాలను ముందుగానే లోడ్ చేయడానికి బదులుగా, ప్రారంభంలో వ్యూపోర్ట్‌లో కనిపించని చిత్రాల లోడింగ్‌ను మీరు వాయిదా వేయవచ్చు. ఇది ప్రారంభ పేజీ లోడ్ సమయాన్ని గణనీయంగా మెరుగుపరుస్తుంది మరియు నెట్‌వర్క్ బ్యాండ్‌విడ్త్ వినియోగాన్ని తగ్గిస్తుంది.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

ఈ ఉదాహరణ `IntersectionObserver` APIని ఉపయోగించి ఒక చిత్రం వ్యూపోర్ట్‌లోకి ప్రవేశించినప్పుడు గుర్తించడానికి ఉపయోగిస్తుంది. ఒక చిత్రం కనిపించినప్పుడు, దాని `src` అట్రిబ్యూట్ దాని `data-src` అట్రిబ్యూట్ విలువకు సెట్ చేయబడుతుంది, ఇది చిత్రాన్ని లోడ్ చేయడానికి ట్రిగ్గర్ చేస్తుంది. అప్పుడు అబ్జర్వర్ చిత్రాన్ని మళ్లీ లోడ్ చేయకుండా నిరోధించడానికి దానిని అన్‌అబ్జర్వ్ చేస్తుంది.

ఉదాహరణ: మెమోయిజేషన్

ఖరీదైన ఫంక్షన్ కాల్స్‌ను ఆప్టిమైజ్ చేయడానికి మెమోయిజేషన్‌ను ఉపయోగించవచ్చు. ఇక్కడ ఒక ఉదాహరణ ఉంది:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

ఈ ఉదాహరణలో, `memoize` ఫంక్షన్ ఇన్‌పుట్‌గా ఒక ఫంక్షన్‌ను తీసుకుంటుంది మరియు ఆ ఫంక్షన్ యొక్క మెమోయిజ్డ్ వెర్షన్‌ను తిరిగి ఇస్తుంది. మెమోయిజ్డ్ ఫంక్షన్ మునుపటి కాల్స్ యొక్క ఫలితాలను కాష్ చేస్తుంది, తద్వారా అదే ఆర్గ్యుమెంట్‌లతో తదుపరి కాల్స్ అసలు ఫంక్షన్‌ను మళ్లీ ఎగ్జిక్యూట్ చేయకుండా కాష్ చేసిన ఫలితాన్ని తిరిగి ఇవ్వగలవు.

కోడ్ స్ప్లిటింగ్ వర్సెస్ లేజీ ఎవాల్యుయేషన్: ముఖ్య తేడాలు

కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్ రెండూ శక్తివంతమైన ఆప్టిమైజేషన్ టెక్నిక్‌లు అయినప్పటికీ, అవి పనితీరు యొక్క విభిన్న అంశాలను పరిష్కరిస్తాయి:

• కోడ్ స్ప్లిటింగ్: కోడ్‌ను చిన్న భాగాలుగా విభజించి, వాటిని డిమాండ్‌పై లోడ్ చేయడం ద్వారా ప్రారంభ బండిల్ సైజ్‌ను తగ్గించడంపై దృష్టి పెడుతుంది. ఇది ప్రధానంగా ప్రారంభ పేజీ లోడ్ సమయాన్ని మెరుగుపరచడానికి ఉపయోగించబడుతుంది.
• లేజీ ఎవాల్యుయేషన్: విలువల గణనను అవి వాస్తవంగా అవసరమయ్యే వరకు వాయిదా వేయడంపై దృష్టి పెడుతుంది. ఇది ప్రధానంగా ఖరీదైన గణనలు లేదా పెద్ద డేటాసెట్‌లతో వ్యవహరించేటప్పుడు పనితీరును మెరుగుపరచడానికి ఉపయోగించబడుతుంది.

సారూప్యంగా, కోడ్ స్ప్లిటింగ్ ముందుగానే డౌన్‌లోడ్ చేయవలసిన కోడ్ మొత్తాన్ని తగ్గిస్తుంది, అయితే లేజీ ఎవాల్యుయేషన్ ముందుగానే నిర్వహించవలసిన గణన మొత్తాన్ని తగ్గిస్తుంది.

కోడ్ స్ప్లిటింగ్ వర్సెస్ లేజీ ఎవాల్యుయేషన్‌ను ఎప్పుడు ఉపయోగించాలి

కోడ్ స్ప్లిటింగ్

• పెద్ద అప్లికేషన్‌లు: పెద్ద మొత్తంలో జావాస్క్రిప్ట్ కోడ్ ఉన్న అప్లికేషన్‌ల కోసం కోడ్ స్ప్లిటింగ్‌ను ఉపయోగించండి, ముఖ్యంగా బహుళ రూట్‌లు లేదా ఫీచర్‌లు ఉన్న వాటి కోసం.
• ప్రారంభ లోడ్ సమయాన్ని మెరుగుపరచడం: ప్రారంభ పేజీ లోడ్ సమయాన్ని మెరుగుపరచడానికి మరియు ఇంటరాక్టివ్ సమయాన్ని తగ్గించడానికి కోడ్ స్ప్లిటింగ్‌ను ఉపయోగించండి.
• నెట్‌వర్క్ బ్యాండ్‌విడ్త్‌ను తగ్గించడం: నెట్‌వర్క్‌పై బదిలీ చేయాల్సిన డేటా మొత్తాన్ని తగ్గించడానికి కోడ్ స్ప్లిటింగ్‌ను ఉపయోగించండి.

లేజీ ఎవాల్యుయేషన్

• ఖరీదైన గణనలు: ఖరీదైన గణనలు చేసే లేదా పెద్ద డేటాసెట్‌లను యాక్సెస్ చేసే ఫంక్షన్‌ల కోసం లేజీ ఎవాల్యుయేషన్‌ను ఉపయోగించండి.
• ప్రతిస్పందనను మెరుగుపరచడం: ప్రారంభ లోడ్ సమయంలో అనవసరమైన గణనలను వాయిదా వేయడం ద్వారా అప్లికేషన్ యొక్క ప్రతిస్పందనను మెరుగుపరచడానికి లేజీ ఎవాల్యుయేషన్‌ను ఉపయోగించండి.
• అనంతమైన డేటా స్ట్రక్చర్‌లు: అనంతమైన జాబితాలు లేదా స్ట్రీమ్‌ల వంటి అనంతమైన డేటా స్ట్రక్చర్‌లతో పనిచేసేటప్పుడు లేజీ ఎవాల్యుయేషన్‌ను ఉపయోగించండి.
• మీడియాను లేజీ లోడింగ్ చేయడం: పేజీ లోడ్ సమయాలను మెరుగుపరచడానికి చిత్రాలు, వీడియోలు మరియు ఇతర మీడియా ఆస్తుల కోసం లేజీ లోడింగ్‌ను అమలు చేయండి.

కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్‌ను కలపడం

చాలా సందర్భాలలో, కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్‌ను కలిపి మరింత ఎక్కువ పనితీరు లాభాలను సాధించవచ్చు. ఉదాహరణకు, మీరు మీ అప్లికేషన్‌ను చిన్న భాగాలుగా విభజించడానికి కోడ్ స్ప్లిటింగ్‌ను ఉపయోగించి, ఆపై ఆ భాగాలలో విలువల గణనను వాయిదా వేయడానికి లేజీ ఎవాల్యుయేషన్‌ను ఉపయోగించవచ్చు.

ఒక ఇ-కామర్స్ అప్లికేషన్‌ను పరిగణించండి. మీరు అప్లికేషన్‌ను ఉత్పత్తి జాబితా పేజీ, ఉత్పత్తి వివరాల పేజీ మరియు చెక్అవుట్ పేజీ కోసం ప్రత్యేక బండిల్స్‌గా విభజించడానికి కోడ్ స్ప్లిటింగ్‌ను ఉపయోగించవచ్చు. అప్పుడు, ఉత్పత్తి వివరాల పేజీలో, చిత్రాల లోడింగ్ లేదా ఉత్పత్తి సిఫార్సుల గణనను అవి వాస్తవంగా అవసరమయ్యే వరకు వాయిదా వేయడానికి లేజీ ఎవాల్యుయేషన్‌ను ఉపయోగించవచ్చు.

కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్‌కు మించి: అదనపు ఆప్టిమైజేషన్ టెక్నిక్‌లు

కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్ శక్తివంతమైన టెక్నిక్‌లు అయినప్పటికీ, జావాస్క్రిప్ట్ పనితీరు ఆప్టిమైజేషన్ విషయానికి వస్తే అవి పజిల్‌లోని రెండు ముక్కలు మాత్రమే. పనితీరును మరింత మెరుగుపరచడానికి మీరు ఉపయోగించగల కొన్ని అదనపు టెక్నిక్‌లు ఇక్కడ ఉన్నాయి:

• మినిఫికేషన్: మీ కోడ్ సైజ్‌ను తగ్గించడానికి అనవసరమైన అక్షరాలను (ఉదా., వైట్‌స్పేస్, కామెంట్లు) తొలగించండి.
• కంప్రెషన్: మీ కోడ్ సైజ్‌ను మరింత తగ్గించడానికి Gzip లేదా Brotli వంటి సాధనాలను ఉపయోగించి మీ కోడ్‌ను కంప్రెస్ చేయండి.
• కాషింగ్: మీ సర్వర్‌కు అభ్యర్థనల సంఖ్యను తగ్గించడానికి బ్రౌజర్ కాషింగ్ మరియు CDN కాషింగ్‌ను ఉపయోగించుకోండి.
• ట్రీ షేకింగ్: మీ బండిల్స్ సైజ్‌ను తగ్గించడానికి ఉపయోగించని కోడ్‌ను తొలగించండి.
• ఇమేజ్ ఆప్టిమైజేషన్: చిత్రాలను కంప్రెస్ చేయడం, వాటిని సరైన కొలతలకు రీసైజ్ చేయడం మరియు WebP వంటి ఆధునిక ఇమేజ్ ఫార్మాట్‌లను ఉపయోగించడం ద్వారా ఆప్టిమైజ్ చేయండి.
• డిబౌన్సింగ్ మరియు థ్రాట్లింగ్: పనితీరు సమస్యలను నివారించడానికి ఈవెంట్ హ్యాండ్లర్‌లు అమలు చేయబడే రేటును నియంత్రించండి.
• సమర్థవంతమైన DOM మానిప్యులేషన్: DOM మానిప్యులేషన్‌లను తగ్గించండి మరియు సమర్థవంతమైన DOM మానిప్యులేషన్ టెక్నిక్‌లను ఉపయోగించండి.
• వెబ్ వర్కర్లు: గణనపరంగా తీవ్రమైన పనులను ప్రధాన థ్రెడ్‌ను బ్లాక్ చేయకుండా నిరోధించడానికి వెబ్ వర్కర్లకు ఆఫ్‌లోడ్ చేయండి.

ముగింపు

జావాస్క్రిప్ట్ పనితీరు ఆప్టిమైజేషన్ సానుకూల వినియోగదారు అనుభవాన్ని అందించడానికి మరియు వ్యాపార లక్ష్యాలను సాధించడానికి ఒక కీలకమైన అంశం. కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్ అనేవి రెండు శక్తివంతమైన టెక్నిక్‌లు, ఇవి ప్రారంభ లోడ్ సమయాలను తగ్గించడం, నెట్‌వర్క్ బ్యాండ్‌విడ్త్ వినియోగాన్ని తగ్గించడం మరియు అనవసరమైన గణనలను వాయిదా వేయడం ద్వారా పనితీరును గణనీయంగా మెరుగుపరుస్తాయి. ఈ టెక్నిక్‌లు ఎలా పనిచేస్తాయో మరియు వాటిని ఎప్పుడు ఉపయోగించాలో అర్థం చేసుకోవడం ద్వారా, మీరు వేగవంతమైన, మరింత ప్రతిస్పందించే మరియు మరింత ఆనందదాయకమైన వెబ్ అప్లికేషన్‌లను సృష్టించవచ్చు.

మీ నిర్దిష్ట అప్లికేషన్ అవసరాలను పరిగణనలోకి తీసుకోవాలని గుర్తుంచుకోండి మరియు మీ అవసరాలకు అత్యంత అనువైన టెక్నిక్‌లను ఉపయోగించండి. మీ అప్లికేషన్ యొక్క పనితీరును నిరంతరం పర్యవేక్షించండి మరియు మీరు సాధ్యమైనంత ఉత్తమమైన వినియోగదారు అనుభవాన్ని అందిస్తున్నారని నిర్ధారించుకోవడానికి మీ ఆప్టిమైజేషన్ వ్యూహాలను పునరావృతం చేయండి. ఫీచర్-రిచ్ మాత్రమే కాకుండా, ప్రపంచవ్యాప్తంగా పనితీరు గల మరియు ఉపయోగించడానికి ఆనందదాయకంగా ఉండే వెబ్ అప్లికేషన్‌లను సృష్టించడానికి కోడ్ స్ప్లిటింగ్ మరియు లేజీ ఎవాల్యుయేషన్ యొక్క శక్తిని స్వీకరించండి.

మరింత నేర్చుకోవడానికి వనరులు

• Webpack Documentation: https://webpack.js.org/
• Rollup Documentation: https://rollupjs.org/guide/en/
• Vite Documentation: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/