Lazy loading হলো একটি প্রযুক্তি যা Angular অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। Lazy loading-এর মাধ্যমে Angular শুধুমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করে যখন সেগুলো ব্যবহার করা হয়। এর ফলে অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময় কম সময় নেয় এবং পেজের মধ্যে unnecessary কোড লোড না হয়ে শুধু প্রয়োজনীয় কোডই লোড হয়।

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

Lazy Loading রাউটিং কনফিগারেশন

Lazy loading কনফিগার করার জন্য Angular-এ কিছু নির্দিষ্ট পদক্ষেপ অনুসরণ করতে হয়। এখানে পুরো প্রক্রিয়াটি ব্যাখ্যা করা হয়েছে:

1. মডিউল তৈরি করা

প্রথমে আপনাকে একটি নতুন মডিউল তৈরি করতে হবে যেটি Lazy Loading এর মাধ্যমে লোড হবে। CLI ব্যবহার করে মডিউল তৈরি করতে পারেন:

ng generate module feature --route feature --module app-routing

এটি একটি feature মডিউল তৈরি করবে এবং সেই মডিউলটি app-routing.module.ts-এ রাউটিং কনফিগারেশনে যুক্ত হবে।

2. রাউটিং কনফিগারেশন

Lazy loading কাজ করার জন্য আপনার AppRoutingModule এ মডিউলটি loadChildren দিয়ে লোড করতে হবে।

উদাহরণ:

ধরা যাক, আপনার অ্যাপ্লিকেশন দুটি রাউট রয়েছে, একটি হোম পেজ এবং একটি ফিচার পেজ। ফিচার পেজটিকে lazy load করা হবে।

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

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

এখানে, loadChildren প্যারামিটারটি একটি ফাংশন নেয়, যা ডাইনামিকভাবে FeatureModule মডিউলটি লোড করবে। import() সিঙ্ক্রোনাস ভাবে মডিউল লোড করতে সহায়তা করে।

3. Feature Module এ Routing কনফিগারেশন

ফিচার মডিউলের নিজস্ব রাউটিং কনফিগারেশন থাকতে হবে যাতে feature পেজের জন্য প্রয়োজনীয় কম্পোনেন্ট লোড করা যায়।

// feature-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';

const routes: Routes = [
  { path: '', component: FeatureComponent }
];

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

এখানে, RouterModule.forChild(routes) ব্যবহার করা হয়েছে, কারণ এটি একটি child route কনফিগারেশন। মূল রাউট মডিউলটি AppRoutingModule এবং FeatureModule এর জন্য পৃথকভাবে রাউটিং কনফিগার করা হয়েছে।

4. Feature Module তৈরির পর FeatureModule লোড করা

এখন আপনার ফিচার মডিউলটি AppRoutingModule তে Lazy Load হতে প্রস্তুত। ফিচার মডিউলটি সাধারণত কম্পোনেন্ট এবং পরিষেবা দিয়ে গঠিত হবে:

// feature.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature/feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})
export class FeatureModule { }

এখানে, FeatureRoutingModule এ feature-routing.module.ts এর রাউটিং কনফিগারেশন ইনক্লুড করা হয়েছে, এবং FeatureComponent কম্পোনেন্ট যুক্ত করা হয়েছে।

Lazy Loading এর সুবিধা

1. প্লাগ অ্যান্ড প্লে: আপনি নতুন ফিচার বা মডিউল অ্যাড করার সময় পূর্ববর্তী কোডে কোনো পরিবর্তন ছাড়াই তা আলাদাভাবে লোড করতে পারেন।
2. পারফরম্যান্স উন্নয়ন: অ্যাপ্লিকেশনটি প্রথমে দ্রুত লোড হয় কারণ শুধু প্রয়োজনীয় কোড লোড হয়। অন্যান্য মডিউলগুলো পরে ইউজারের চাহিদা অনুযায়ী লোড হয়।
3. বড় অ্যাপ্লিকেশন ম্যানেজমেন্ট: বড় Angular অ্যাপ্লিকেশনগুলোর জন্য Lazy loading ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও বেশি স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য হয়।

Lazy Loading এর জন্য কিছু পরামর্শ

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

Lazy loading, Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং স্কেলেবিলিটি বাড়াতে অত্যন্ত কার্যকর একটি কৌশল।