| استراتيجية التحميل (`Loading Strategy`) | آلية تحميل وتنزيل الملفات | التأثير المباشر على الأداء والإقلاع |
|---|---|---|
| التحميل المباشر (`Eager Loading`) | تحميل كافة المكونات وملفات التطبيق دفعة واحدة عند بداية التشغيل | حجم حزمة ابتدائي كبير وإقلاع أبطأ نسبياً |
| التحميل الكسول (`Lazy Loading`) | تحميل المكونات عند الطلب فقط عبر خاصية `loadComponent` | تقليل حجم حزمة البناء وتسريع الإقلاع الأولي بشكل مذهل |
في التطبيقات الكبيرة، تحميل كافة المكونات دفعة واحدة في حزمة البنية الأولية (Main Bundle) يتسبب في بطء شديد في الإقلاع الأولي. مع معمارية Angular 22.1، أصبح تطبيق التحميل الكسول (Lazy Loading) أمراً في غاية البساطة والسهولة بفضل خاصية loadComponent التي تتيح تحميل المكون المستهدف فقط عند قيام المستخدم بزيارة مساره المخصص.
يقوم مُجمّع الأكواد بتقسيم التطبيق إلى أجزاء مستقلة، بحيث يتم جلب ملفات الصفحة المطلوبة فقط عند زيارتها لأول مرة.
تستبدل هذه الخاصية الطريقة القديمة المعقدة القائمة على وحدات الـ loadChildren، مما يجعل كتابة المسارات الكسولة نظيفة ومباشرة.
| 1 | import { Routes } from '@angular/router'; |
| 2 | |
| 3 | export const routes: Routes = [ |
| 4 | { |
| 5 | path: '', |
| 6 | loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent) |
| 7 | }, |
| 8 | { |
| 9 | path: 'admin', |
| 10 | // تحميل مكون لوحة التحكم كسولاً فقط عند زيارة المسار |
| 11 | loadComponent: () => import('./pages/admin/admin.component').then(m => m.AdminComponent) |
| 12 | } |
| 13 | ]; |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-admin', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="admin-card"> |
| 10 | <h2>لوحة التحكم الإدارية المحملة بنظام الكسل</h2> |
| 11 | <p>تم جلب هذا المكون وحزمته البرمجية بنجاح عند طلب المسار فقط!</p> |
| 12 | </div> |
| 13 | `, |
| 14 | styles: [` |
| 15 | .admin-card { background: #0f172a; color: #fff; padding: 30px; border-radius: 12px; border: 1px solid #38bdf8; } |
| 16 | p { color: #94a3b8; } |
| 17 | `] |
| 18 | }) |
| 19 | export class AdminComponent {} |
⚠️ تحذير
تذكر أن المكونات المراد تحميلها كسولاً يجب أن تكون مستقلة (Standalone) بالكامل! لا يمكن تطبيق loadComponent على المكونات التابعة لنظام الموديولات القديم دون إعادة هيكلتها لتصبح مستقلة.