𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

React ਵਿੱਚ Lazy Loading

ਵੱਡੀਆਂ React ਐਪਸ ਵੱਡੇ JavaScript bundles ਬਣਾਉਂਦੀਆਂ ਹਨ। ਵੱਡੇ bundles ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦੇ ਹਨ। ਯੂਜ਼ਰਸ ਨੂੰ ਤੁਹਾਡੀ ਐਪ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਲਈ ਜ਼ਿਆਦਾ ਇੰਤਜ਼ਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ।

Lazy loading ਇਸਦਾ ਹੱਲ ਕਰਦੀ ਹੈ। ਇਹ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਉਦੋਂ ਹੀ ਲੋਡ ਕਰਦੀ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰਸ ਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਸਭ ਕੁਝ ਇੱਕੋ ਵਾਰ ਲੋਡ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹੋ।

Lazy loading ਦੇ ਫਾਇਦੇ:

• ਸ਼ੁਰੂਆਤੀ bundle ਦਾ ਛੋਟਾ ਸਾਈਜ਼
• ਤੇਜ਼ ਪੇਜ ਲੋਡਿੰਗ
• ਬਿਹਤਰ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ
• ਘੱਟ ਬੈਂਡਵਿਡਥ ਦੀ ਵਰਤੋਂ
• ਬਿਹਤਰ Core Web Vitals

React.lazy() ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ React ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਡਾਇਨਾਮਿਕਲੀ ਇੰਪੋਰਟ ਕਰਨ ਲਈ lazy() ਨਾਮ ਦਾ ਇੱਕ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। React ਕੋਡ ਨੂੰ ਉਦੋਂ ਹੀ ਡਾਊਨਲੋਡ ਕਰਦਾ ਹੈ ਜਦੋਂ ਇਹ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰੈਂਡਰ ਕਰਦਾ ਹੈ।

ਉਦਾਹਰਣ ਕੋਡ: import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

ਤੁਹਾਨੂੰ lazy ਕੰਪੋਨੈਂਟਸ ਦੇ ਨਾਲ Suspense ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। Suspense ਇੱਕ fallback UI ਦਿਖਾਉਂਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਕੰਪੋਨੈਂਟ ਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

ਉਦਾਹਰਣ ਕੋਡ: import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() { return ( <Suspense fallback={

}> ); }

ਸਫਲਤਾ ਲਈ ਦੋ ਨਿਯਮ:

• ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ default exports ਦੀ ਵਰਤੋਂ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।
• ਆਪਣੇ lazy imports ਨੂੰ ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਫੰਕਸ਼ਨਾਂ ਤੋਂ ਬਾਹਰ ਡਿਕਲੇਅਰ ਕਰੋ।

ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ lazy loading ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ? ਹੇਠਾਂ ਇੱਕ ਕੁਮੈਂਟ ਕਰੋ। ਮੈਂ ਤੁਹਾਨੂੰ ਜਵਾਬ ਦੇਵਾਂਗਾ।

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk