40. التحميل الكسول (Lazy Loading) لوحدات الميزات

بالنسبة للتطبيقات الكبيرة، يؤدي تحميل كل التعليمات البرمجية عند بدء التشغيل إلى أوقات تحميل بطيئة. التحميل الكسول هو تقنية تحسين (optimization technique) تقوم بتحميل وحدات الميزات فقط عندما يتنقل المستخدم إلى مساراتها.

المتطلبات الأساسية: وحدات الميزات

لإجراء التحميل الكسول، يجب تقسيم التطبيق إلى وحدات وظيفية (على سبيل المثال، AdminModule، UsersModule) لا يتم استيرادها بواسطة AppModule.

أمر CLI لإنشاء وحدة مع توجيه:

bash ng g module admin --route admin --module app

ينشئ هذا الأمر AdminModule ويقوم تلقائياً بتهيئة مسار التحميل الكسول في AppRoutingModule.

تهيئة مسار التحميل الكسول

بدلاً من توفير component، يستخدم مسار التحميل الكسول loadChildren وصيغة import() الديناميكية، والتي تستغل ميزات JavaScript الحديثة لإنشاء حزمة منفصلة (separate bundle).

app-routing.module.ts:

typescript const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' },

// مسار قياسي يتم تحميله بشكل فوري (Eagerly Loaded Route) { path: 'home', component: HomeComponent },

// مسار التحميل الكسول (Lazy Loaded Route) // عندما يتنقل المستخدم إلى /admin، يقوم Angular بتحميل ملف AdminModule ديناميكياً. { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } ];

التأثير على الأداء

عند تشغيل بناء للإنتاج (production build)، تفصل عملية بناء Angular التعليمات البرمجية إلى حزم متعددة (chunks). تظل الحزمة الجذر صغيرة، ويتم تحميل حزم وحدات الميزات بشكل غير متزامن عند الطلب. يؤدي هذا إلى تحسين وقت التحميل الأولي للتطبيق بشكل كبير.

ملاحظة: يمكن تطبيق الحراس على مسارات التحميل الكسول تماماً مثل المسارات العادية. يتم تنفيذ الحارس قبل تنزيل حزمة الوحدة.