Angular-এ আপনি কীভাবে রুট/ফিচার লেজি-লোড করেন?

Question

Accepted Answer

**লেজি লোডিং** একটি ফিচারের কোড ডাউনলোড করা বিলম্বিত করে যতক্ষণ না ব্যবহারকারী এটিতে নেভিগেট করে, সবকিছুকে প্রাথমিক ডাউনলোডে বান্ডেল করার পরিবর্তে। এটি প্রাথমিক বান্ডেল সংকুচিত করে এবং অ্যাপের প্রথম লোডকে ত্বরান্বিত করে।

## স্ট্যান্ডঅ্যালোন কম্পোনেন্ট লেজি-লোড করা (আধুনিক)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

ডায়নামিক `import()` বিল্ড টুলকে বলে `AdminComponent` কে তার নিজস্ব চাঙ্ক-এ বিভক্ত করতে, যা শুধুমাত্র তখনই ডাউনলোড হয় যখন ব্যবহারকারী `/admin` পরিদর্শন করে।

## রুটের একটি গ্রুপ লেজি-লোড করা

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` একটি সম্পূর্ণ ফিচার এরিয়া (এর সমস্ত রুট/কম্পোনেন্ট) একটি চাঙ্ক হিসাবে লেজি-লোড করে — একটি বড় অ্যাপ্লিকেশন ফিচার দ্বারা বিভক্ত করার স্ট্যান্ডার্ড উপায়।

## NgModule-ভিত্তিক ফর্ম (পুরানো কোডবেস)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## এটি পারফরম্যান্স কেন উন্নত করে

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

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

## প্রিলোডিং কৌশল (উভয়ের সেরা)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

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

## এটি কেন গুরুত্বপূর্ণ

লেজি লোডিং Angular-এর প্রাথমিক বান্ডেল ছোট রাখার জন্য প্রাথমিক কৌশল যেহেতু অ্যাপ বৃদ্ধি পায় — বড়, মাল্টি-ফিচার এন্টারপ্রাইজ অ্যাপের জন্য অপরিহার্য যা Angular লক্ষ্য করে।

রুট/ফিচার দ্বারা বিভাজন (`loadComponent`/`loadChildren`) মানে দ্রুত প্রথম লোড, এবং প্রিলোডিং কৌশলের সাথে যুক্ত করা দ্রুত শুরু এবং নির্বিঘ্ন নেভিগেশন উভয়ই দেয়।

এটি যেকোনো উল্লেখযোগ্য আকারের Angular অ্যাপ্লিকেশনে একটি স্ট্যান্ডার্ড, উচ্চ-প্রভাব পারফরম্যান্স অনুশীলন।