Lazy-loading ਕਿਸੇ ਚੀਜ਼ ਨੂੰ download ਕਰਨ ਨੂੰ ਉਦੋਂ ਤੱਕ ਟਾਲ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਸਦੀ ਅਸਲ ਵਿੱਚ ਲੋੜ ਨਾ ਪਵੇ — ਆਮ ਤੌਰ 'ਤੇ ਜਦੋਂ ਇਹ view ਵਿੱਚ scroll ਹੋਣ ਵਾਲਾ ਹੋਵੇ। ਇਹ initial payload ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਤਾਂ ਜੋ page ਦਾ ਦਿਖਣਯੋਗ ਹਿੱਸਾ ਤੇਜ਼ੀ ਨਾਲ load ਹੋਵੇ।
Browser ਇਹ ਇੱਕ attribute ਨਾਲ natively ਕਰ ਦਿੰਦਾ ਹੈ:
width/height ਹਮੇਸ਼ਾ ਰੱਖੋ ਤਾਂ ਜੋ browser ਥਾਂ reserve ਕਰੇ (layout shift ਤੋਂ ਬਚਦਾ ਹੈ)। ਆਪਣੇ LCP image ਨੂੰ ਕਦੇ lazy-load ਨਾ ਕਰੋ — ਇਹ ਉਸੇ ਚੀਜ਼ ਨੂੰ ਦੇਰੀ ਕਰਦਾ ਹੈ ਜੋ ਮਾਪੀ ਜਾ ਰਹੀ ਹੈ।
ਭਾਰੀ ਜਾਂ ਘੱਟ ਵਰਤੇ ਜਾਣ ਵਾਲੇ UI (modals, charts) ਨੂੰ ਇੱਕ ਵੱਖਰੇ chunk ਵਿੱਚ ਵੰਡੋ ਜੋ ਮੰਗ 'ਤੇ load ਹੋਵੇ:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
dynamic import() bundler ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਇੱਕ ਵੱਖਰੀ file ਬਣਾਏ ਜੋ ਸਿਰਫ਼ ਉਦੋਂ download ਹੋਵੇ ਜਦੋਂ <Chart> ਪਹਿਲੀ ਵਾਰ render ਹੋਵੇ।
ਇੱਕ ਭਾਰੀ page ਲਈ Lazy-loading ਸਭ ਤੋਂ ਸਧਾਰਨ, ਸਭ ਤੋਂ ਵੱਧ-leverage ਵਾਲੀ ਜਿੱਤ ਹੈ: ਸ਼ੁਰੂ ਵਿੱਚ download ਕਰਨ ਲਈ ਘੱਟ ਦਾ ਮਤਲਬ ਹੈ ਤੇਜ਼ LCP ਅਤੇ parse ਕਰਨ ਲਈ ਘੱਟ JS। Interviewers ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹਨ ਕਿ ਤੁਸੀਂ hero image ਨੂੰ lazy-load ਨਾ ਕਰੋ — ਇੱਕ classic ਗ਼ਲਤੀ ਜੋ ਉਸੇ metric ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦੀ ਹੈ ਜਿਸ ਦੀ ਤੁਸੀਂ ਮਦਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ