Lazy Loading এবং Guards (গার্ডস) Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং নিরাপত্তা বাড়ানোর জন্য খুবই গুরুত্বপূর্ণ ফিচার। Lazy Loading ব্যবহার করে আপনি কেবলমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করেন, যা অ্যাপ্লিকেশনের প্রথম লোডিং টাইম কমায়। অপরদিকে, Guards ব্যবহার করে রাউটগুলির অ্যাক্সেস নিয়ন্ত্রণ করা যায়—যেমন, যদি কোন রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূর্ণ না হয় তবে সেটি রোধ করা।
এখানে আমরা দেখব কীভাবে Lazy Loading এবং Guards একসাথে কাজ করে এবং অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়ায়।
Lazy Loading হল একটি কৌশল যার মাধ্যমে আপনি অ্যাপ্লিকেশনের মডিউলগুলোকে ডাইনামিকভাবে লোড করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের প্রথম লোডিং সময় কমানো যায় এবং অবশিষ্ট মডিউলগুলো প্রয়োজনের সময় লোড হয়। এটি Angular অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং দ্রুত কার্যকর করে।
Lazy loading বাস্তবায়ন করতে, আপনি Angular রাউটিং কনফিগারেশনে মডিউলগুলোর জন্য loadChildren
ব্যবহার করেন। এটি নির্দিষ্ট মডিউলকে লোড করার জন্য ওয়েবপেজের প্রথম লোডের সময় অপেক্ষা না করে, শুধুমাত্র যখন ব্যবহারকারী সেই রাউটে নেভিগেট করে তখন মডিউলটি লোড করবে।
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
এখানে feature
রাউটে গিয়েই FeatureModule
লোড হবে।
Guards হল Angular-এর এমন ফিচার যা রাউট এর আগে কিছু শর্ত চেক করে। Guards তিন ধরনের হয়ে থাকে:
Guards দিয়ে আপনি নিশ্চিত করতে পারেন যে ইউজার কোনো রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূরণ করেছে, যেমন লগইন বা বিশেষ অনুমতির শর্ত।
Lazy Loading এর সাথে Guards ব্যবহার করলে আপনি অ্যাপ্লিকেশনের বিভিন্ন রাউটের জন্য নিরাপত্তা এবং অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি CanActivate গার্ড ব্যবহার করতে পারেন যা শুধুমাত্র তখনই একটি লেজি লোডেড মডিউল লোড হতে দিবে যখন ব্যবহারকারী লগইন করেছে।
প্রথমে Angular CLI দিয়ে গার্ড তৈরি করুন:
ng generate guard auth
এটি একটি auth.guard.ts
ফাইল তৈরি করবে, যেখানে আপনি গার্ডের লজিক লিখবেন।
এখানে একটি CanActivate
গার্ডের উদাহরণ দেওয়া হচ্ছে, যা চেক করবে যে ব্যবহারকারী লগইন করেছে কিনা। যদি না করে, তাহলে তাকে লগইন পেজে রিডাইরেক্ট করা হবে।
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service'; // আপনার AuthService যেখানে লগইন স্টেট চেক করা হয়
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
এখানে, AuthGuard
চেক করবে যে ইউজার লগইন করেছেন কিনা। যদি না করেন, তাহলে ইউজারকে /login
পেজে রিডাইরেক্ট করবে।
এখন, Lazy Loaded মডিউলের রাউট কনফিগারেশনে এই গার্ডটি যুক্ত করুন।
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
canActivate: [AuthGuard] // গার্ড যুক্ত করা হলো
}
];
এখানে:
canActivate
প্রপার্টি ব্যবহার করা হয়েছে যাতে ইউজার শুধুমাত্র তখনই FeatureModule
অ্যাক্সেস করতে পারে যখন গার্ডের শর্ত পূর্ণ হবে।এটি নিশ্চিত করতে হবে যে গার্ডটি শুধুমাত্র প্রয়োজনীয় সময়ই রাউট লোড করবে। উদাহরণস্বরূপ, feature.module.ts
মডিউলে শুধুমাত্র যখন ইউজার অনুমতি পাবে তখনই এটি লোড হবে।
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: FeatureComponent }
])
],
declarations: [FeatureComponent]
})
export class FeatureModule {}
এভাবে Lazy Loading এবং Guards আপনার Angular অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়াতে গুরুত্বপূর্ণ ভূমিকা রাখে।
Read more