كيف تقوم بتحميل المسارات/الميزات بطريقة بطيئة (Lazy Loading) في Angular؟

Question

Accepted Answer

**التحميل البطيء (Lazy Loading)** يؤجل تنزيل كود الميزة حتى يتنقل المستخدم إليها، بدلاً من دمج كل شيء في التنزيل الأولي. هذا يقلل حجم الحزمة الأولية ويسرع التحميل الأول للتطبيق.

## تحميل مكون مستقل بطريقة بطيئة (حديث)

```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 بحجم معقول.