React-এ Lazy Loading

বড় React অ্যাপগুলো বড় JavaScript বান্ডেল তৈরি করে। বড় বান্ডেল আপনার সাইটের গতি কমিয়ে দেয়। ব্যবহারকারীরা আপনার অ্যাপের সাথে ইন্টারঅ্যাক্ট করার জন্য দীর্ঘক্ষণ অপেক্ষা করে। এটি আপনার ইউজার এক্সপেরিয়েন্সকে ক্ষতিগ্রস্ত করে।

Lazy loading এই সমস্যার সমাধান করে। এটি শুধুমাত্র তখনই কম্পোনেন্ট লোড করে যখন ব্যবহারকারীদের সেগুলোর প্রয়োজন হয়। আপনি সবকিছু একসাথে লোড করা বন্ধ করতে পারেন।

Lazy loading-এর সুবিধাসমূহ:

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={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

সফল হওয়ার জন্য দুটি নিয়ম:

আপনি কি আপনার প্রজেক্টে lazy loading ব্যবহার করেন? নিচে একটি কমেন্ট করুন। আমি আপনাকে উত্তর দেব।

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