Image లు మరియు component లను ఎలా lazy-load చేస్తారు, మరియు ఎందుకు?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** ఏదైనా నిజంగా అవసరమయ్యే వరకు — సాధారణంగా అది view లోకి scroll అవబోతున్నప్పుడు — దాన్ని download చేయడాన్ని వాయిదా వేస్తుంది. ఇది initial payload ను తగ్గిస్తుంది కాబట్టి page లోని కనిపించే భాగం వేగంగా load అవుతుంది. ## Image లను lazy-load చేయడం Browser దీన్ని ఒక attribute తో natively చేస్తుంది: ```html

``` Browser space ను reserve చేసేలా (layout shift ను నివారించడానికి) ఎల్లప్పుడూ `width`/`height` ను ఉంచండి. మీ LCP image ను ఎప్పుడూ lazy-load చేయవద్దు — అది కొలవబడుతున్న అసలు విషయాన్నే ఆలస్యం చేస్తుంది. ## Component లను (code) lazy-load చేయడం భారీ లేదా అరుదుగా వాడే UI (modal లు, chart లు) ను demand మేరకు load అయ్యే వేరే chunk గా విభజించండి: ```js // Instead of a static import that ships in the main bundle: const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered }> ``` Dynamic `import()` bundler కు `` మొదటిసారి render అయినప్పుడు మాత్రమే download అయ్యే వేరే file ను సృష్టించమని చెబుతుంది. ## ఇది ఎందుకు ముఖ్యం Lazy-loading అనేది భారీ page కు అత్యంత సరళమైన, అత్యధిక-leverage విజయం: ముందుగా download చేయడానికి తక్కువ అంటే వేగవంతమైన LCP మరియు parse చేయడానికి తక్కువ JS. మీరు hero image ను lazy-load *చేయకపోవడం* చూడాలని interviewer లు కోరుకుంటారు — మీరు సహాయం చేయాలనుకునే metric కు హాని చేసే ఒక classic పొరపాటు.

Image లను lazy-load చేయడం

Component లను (code) lazy-load చేయడం

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు