import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Products = React.lazy(() => import('./Products'));

function App() {
  return (
    
      Loading...

এই উদাহরণে, Home, About, এবং Products কম্পোনেন্টগুলি লেজি লোড করা হয়। Suspense কম্পোনেন্টটি কম্পোনেন্টগুলি লোড হওয়ার সময় একটি ফলব্যাক UI (এই ক্ষেত্রে, "Loading...") প্রদান করে।

উদাহরণ পরিস্থিতি: একটি বিশ্বব্যাপী সোশ্যাল মিডিয়া প্ল্যাটফর্মের কথা ভাবুন। যখন একজন ব্যবহারকারী প্রথম লগ ইন করে, তখন তাদের নিউজ ফিডে (Home) পাঠানো হয়। ব্যবহারকারীর প্রোফাইল (About) বা মার্কেটপ্লেস (Products) এর মতো বৈশিষ্ট্যগুলির জন্য কোড শুধুমাত্র তখনই লোড হয় যখন ব্যবহারকারী সেই বিভাগগুলিতে নেভিগেট করে, যা প্রাথমিক লোড সময় উন্নত করে।

অ্যাঙ্গুলার

অ্যাঙ্গুলার তার রাউটার কনফিগারেশনের মাধ্যমে মডিউলগুলির লেজি লোডিং সমর্থন করে। আপনি loadChildren প্রপার্টি ব্যবহার করে একটি মডিউল নির্দিষ্ট করতে পারেন যা চাহিদা অনুযায়ী লোড করা উচিত।

            
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

            

              
                Copy
              
            
          

এই উদাহরণে, HomeModule, AboutModule, এবং ProductsModule ব্যবহারকারী তাদের নিজ নিজ রুটে নেভিগেট করার সময় লেজি লোড হয়।

উদাহরণ পরিস্থিতি: একটি বহুজাতিক কর্পোরেশনের অভ্যন্তরীণ ওয়েব পোর্টালের কথা ভাবুন। বিভিন্ন বিভাগের (যেমন, এইচআর, ফিনান্স, মার্কেটিং) তাদের নিজস্ব মডিউল রয়েছে। কোড স্প্লিটিং নিশ্চিত করে যে কর্মচারীরা শুধুমাত্র সেই বিভাগগুলির কোড ডাউনলোড করে যার সাথে তারা ইন্টারঅ্যাক্ট করে, যা লোডিং প্রক্রিয়াটিকে সুগম করে।

ভিউ.জেএস

ভিউ.জেএস আপনার রাউটার কনফিগারেশনে ডাইনামিক ইম্পোর্ট ব্যবহার করে কম্পোনেন্টগুলির লেজি লোডিং সমর্থন করে।

            
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

এখানে, Home.vue, About.vue, এবং Products.vue কম্পোনেন্টগুলি তাদের নিজ নিজ রুটে ভিজিট করার সময় লেজি লোড হয়। webpackChunkName মন্তব্যটি ওয়েবপ্যাককে প্রতিটি কম্পোনেন্টের জন্য আলাদা খণ্ড তৈরি করতে সাহায্য করে।

উদাহরণ পরিস্থিতি: একটি বিশ্বব্যাপী অনলাইন শিক্ষা প্ল্যাটফর্মের কল্পনা করুন। কোর্সের মডিউলগুলি (যেমন, গণিত, ইতিহাস, বিজ্ঞান) চাহিদা অনুযায়ী লোড করা যেতে পারে যখন শিক্ষার্থীরা সেগুলিতে নথিভুক্ত হয়। এই পদ্ধতিটি প্রাথমিক ডাউনলোডের আকার কমিয়ে দেয় এবং ব্যবহারকারীর অভিজ্ঞতা অপটিমাইজ করে।

রুট-ভিত্তিক কোড স্প্লিটিং এর সুবিধা

• সহজ বাস্তবায়ন: সেট আপ করা এবং বোঝা তুলনামূলকভাবে সহজ।
• Clear Separation of Concerns: অনেক ওয়েব অ্যাপ্লিকেশনের কাঠামোর সাথে ভালোভাবে মিলে যায়।
• উন্নত প্রাথমিক লোড সময়: আগে লোড করা কোডের পরিমাণে উল্লেখযোগ্য হ্রাস।

রুট-ভিত্তিক কোড স্প্লিটিং এর অসুবিধা

• ডুপ্লিকেশনের সম্ভাবনা: শেয়ার করা কম্পোনেন্ট বা ডিপেন্ডেন্সিগুলি একাধিক রুট খণ্ডে অন্তর্ভুক্ত হতে পারে, যা কোড ডুপ্লিকেশনের কারণ হতে পারে।
• গ্রানুলারিটি সীমাবদ্ধতা: একাধিক রুটে শেয়ার করা জটিল কম্পোনেন্ট সহ অ্যাপ্লিকেশনগুলির জন্য এটি আদর্শ নাও হতে পারে।

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিং

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিং বলতে আপনার অ্যাপ্লিকেশনের কোডকে সম্পূর্ণ রুটের পরিবর্তে পৃথক কম্পোনেন্টের উপর ভিত্তি করে বিভক্ত করা বোঝায়। এটি কোড লোড করার জন্য একটি আরও গ্রানুলার পদ্ধতি প্রদান করে, শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের জন্য প্রয়োজনীয় কোড লোড করে যখন তাদের প্রয়োজন হয়।

বাস্তবায়ন

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিং রুট-ভিত্তিক স্প্লিটিংয়ের চেয়ে বেশি জটিল, তবে এটি আরও বেশি নমনীয়তা এবং অপটিমাইজেশনের সম্ভাবনা প্রদান করে। আবারও, বাস্তবায়ন ফ্রেমওয়ার্কের উপর নির্ভর করে পরিবর্তিত হয়।

রিঅ্যাক্ট

রিঅ্যাক্টে, আপনি একটি রুট বা অন্য কম্পোনেন্টের মধ্যে পৃথক কম্পোনেন্ট লেজি লোড করতে React.lazy এবং Suspense ব্যবহার করতে পারেন।

            
import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>