Code Splitting & Lazy Loading in React.js (Bengali Full Guide)

React অ্যাপ বড় হতে থাকলে bundle size ক্রমশ বেড়ে যায়, যার ফলে page load হতে দেরি হয় এবং পারফরম্যান্স কমে যায়। এই সমস্যার সমাধানই হলো Code Splitting এবং Lazy Loading।

Code Splitting এর মাধ্যমে আমরা কোডকে ছোট ছোট অংশে ভাগ করি এবং Lazy Loading ব্যবহার করে যে অংশটি প্রয়োজন সেই অংশটি তখনই লোড করি। এর ফলে অ্যাপের লোড টাইম অনেক দ্রুত হয়।

🔶 Code Splitting কী?

Code Splitting হলো কোডকে ছোট ছোট chunk এ ভাগ করে রাখা। যাতে যেই component বা page ব্যবহার করা হবে, শুধুমাত্র তখনই তার কোড লোড হবে।

এটি performance improve করে কারণ:

• প্রথমবার পেজ লোডের bundle ছোট হয়
• Loading time কমে
• অপ্রয়োজনীয় কোড পরে লোড হয়

🔶 Lazy Loading কী?

Lazy Loading মানে হলো: যখন প্রয়োজন তখনই component লোড করা। React এ lazy loading করতে আমরা ব্যবহার করি:

• React.lazy()
• Suspense

Lazy Loading ব্যবহার করলে বড় অ্যাপের লোড টাইম অনেক দ্রুত হয়।

🔶 React.lazy() দিয়ে Lazy Loading (Basic Example)

📌 Step 1: Lazy Component তৈরি

import React, { Suspense } from "react";

const About = React.lazy(() => import("./About"));

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<p>Loading...</p>} >
        <About />
      </Suspense>
      
    </div>
  );
}

export default App;

এখানে About component শুধুমাত্র তখনই লোড হবে যখন এটি UI তে render হবে।

🔶 Suspense কী?

Suspense Lazy loaded component লোড হওয়া পর্যন্ত একটি fallback UI দেখায়। যেমন:

<Suspense fallback={<p>Loading...</p>}>
    <About />
</Suspense>

এটি না থাকলে Lazy Component লোড হওয়ার আগের সময় error দিত।

🔶 Route Level Lazy Loading (React Router)

React Router এ Lazy Loading ব্যবহার করা সবচেয়ে জনপ্রিয়।

import { Suspense, lazy } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

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

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense fallback={<h2>Loading Page...</h2>}>
        <Home />
      </Suspense>
    ),
  },
  {
    path: "/contact",
    element: (
      <Suspense fallback={<h2>Loading Page...</h2>}>
        <Contact />
      </Suspense>
    ),
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

একটি বড় অ্যাপের জন্য এটি performance অনেক উন্নত করে।

🔶 Component Level Lazy Loading

যখন কোনো বড় component কম ব্যবহৃত হয়, তখন Lazy Load করা উচিত।

const BigChart = React.lazy(() => import("./components/BigChart"));

function Dashboard() {
  return (
    <Suspense fallback={<p>Loading Chart...</p>}>
        <BigChart />
    </Suspense>
  );
}

🔶 Network Optimization Tips (Bonus)

Lazy Loading এর সাথে নিচের টেকনিকগুলো ব্যবহার করলে অ্যাপ আরও দ্রুত হবে:

• Preloading – আগে থেকেই chunk লোড করে রাখা
• Prefetching – future route or component আগেই লোড করা
• Dynamic imports

🔶 Dynamic Import (Manual Lazy Load)

import("./utils/calculation").then((module) => {
   const result = module.doCalculation();
});

এটি বড় utility function গুলো lazy load করতে কাজে লাগে।

🔶 Code Splitting কোথায় ব্যবহার করবেন?

• বড় pages (dashboard, analytics)
• কম ব্যবহৃত pages (about, contact)
• বড়-heavy components (charts, maps, graphs)
• Third-party libraries (moment.js, lodash, recharts)
• Admin panel vs user panel

✨ উপসংহার

React অ্যাপ অপটিমাইজেশন এর সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলোর মধ্যে একটি হলো Code Splitting এবং Lazy Loading।

এগুলো ব্যবহার করলে:

• অ্যাপ দ্রুত লোড হয়
• Bundle size ছোট থাকে
• User experience অনেক ভালো হয়

স্কেলেবল এবং পারফরম্যান্স-অপ্টিমাইজড React অ্যাপ তৈরির জন্য Lazy Loading অবশ্যই ব্যবহার করা উচিত।