يمكنك تحسين أداء التطبيق باستخدام ميزة تقسيم الرموز على مستوى المسار.
توضّح هذه المشاركة كيفية إعداد تقسيم الرموز على مستوى المسار في أحد تطبيقات Angular، والذي يمكن أن يؤدي إلى تقليل حجم حزمة JavaScript وتحسين وقت التفاعل بشكل كبير.
يمكنك العثور على عيّنات التعليمات البرمجية من هذه المقالة على GitHub. مثال التوجيه السريع متاح في الفرع السريع. يظهر مثال تقسيم الرمز على مستوى المسار في التفرع الكسول.
أهمية تقسيم الرمز
أدى التعقيد المتزايد لتطبيقات الويب إلى زيادة كبيرة في كمية JavaScript التي يتم شحنها للمستخدمين. يمكن أن تؤدي ملفات JavaScript الكبيرة إلى تأخير التفاعل بشكل ملحوظ، لذا يمكن أن يكون ذلك موردًا مكلفًا، خاصة على الأجهزة الجوّالة.
والطريقة الأكثر فعالية لتقليص حِزم JavaScript بدون التضحية بالميزات المتوفّرة في تطبيقاتك هي استخدام طريقة أكثر صرامة لتقسيم الرموز.
تتيح لك ميزة تقسيم الرمز تقسيم JavaScript لتطبيقك إلى أجزاء متعدّدة مرتبطة بمسارات أو ميزات مختلفة. ولا ترسل هذه الطريقة إلى المستخدمين سوى ملفات JavaScript التي يحتاجون إليها أثناء التحميل الأوليّ للتطبيق، ما يؤدي إلى الحفاظ على انخفاض أوقات التحميل.
تقنيات تقسيم الرمز
يمكن تقسيم الرمز على مستويَين: مستوى المكوِّن ومستوى المسار.
- في تقسيم التعليمة البرمجية على مستوى المكون، يمكنك نقل المكونات إلى مقاطع JavaScript الخاصة بها وتحميلها ببطء عند الحاجة إليها.
- في تقسيم التعليمة البرمجية على مستوى المسار، يمكنك تغليف وظيفة كل مسار في مقطع منفصل. وعندما يتنقل المستخدمون في تطبيقك، يجلبون المقاطع المرتبطة بالمسارات الفردية ويحصلون على الوظائف ذات الصلة عندما يحتاجون إليها.
تركز هذه المشاركة على إعداد التقسيم على مستوى المسار في Angular.
نموذج تطبيق
قبل التعمّق في كيفية استخدام تقسيم الرمز على مستوى المسار في Angular، لنلقِ نظرة على نموذج تطبيق:
تحقق من تنفيذ وحدات التطبيق. داخل AppModule
تم تحديد مسارَين: المسار التلقائي المرتبط بـ HomeComponent
ومسار nyan
المرتبط بـ NyanComponent
:
@NgModule({
...
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'nyan',
component: NyanComponent
}
])
],
...
})
export class AppModule {}
تقسيم الرمز على مستوى المسار
لإعداد ميزة تقسيم الرموز، يجب إعادة هيكلية المسار nyan
السريع.
يمكن للإصدار 8.1.0 من Angular CLI تنفيذ كل شيء نيابةً عنك باستخدام الأمر التالي:
ng g module nyan --module app --route nyan
سينشئ هذا ما يلي:
- وحدة توجيه جديدة باسم NyanModule
- مسار في AppModule
يُسمى nyan
سيتم تحميل NyanModule
ديناميكيًا
- مسار تلقائي في NyanModule
- يتم عرض مكوّن يسمى NyanComponent
عندما يصل المستخدم إلى المسار التلقائي
لنستعرض هذه الخطوات يدويًا حتى نفهم بشكل أفضل عملية تقسيم الرمز باستخدام Angular.
عندما ينتقل المستخدم إلى مسار "nyan
"، سيعرض جهاز التوجيه NyanComponent
في مقبس جهاز التوجيه.
لاستخدام تقسيم الرمز على مستوى المسار في Angular، اضبط السمة loadChildren
لتعريف المسار وادمجها مع عملية استيراد ديناميكي:
{
path: 'nyan',
loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}
هناك اختلافان رئيسيان عن المسار السريع:
- يمكنك ضبط
loadChildren
بدلاً منcomponent
. عند استخدام ميزة تقسيم الرموز على مستوى المسار، يجب الإشارة إلى الوحدات المحمَّلة ديناميكيًا، بدلاً من المكونات. - في
loadChildren
، بعد حلّ الوعد، يمكنك إرجاعNyanModule
بدلاً من الإشارة إلىNyanComponent
.
يحدّد المقتطف أعلاه أنه عندما ينتقل المستخدم إلى nyan
، يجب على Angular تحميل nyan.module
ديناميكيًا من دليل nyan
وعرض المكوّن المرتبط بالمسار التلقائي المحدّد في الوحدة.
يمكنك ربط المسار التلقائي بمكوِّن باستخدام هذا التعريف:
import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [NyanComponent],
imports: [
RouterModule.forChild([{
path: '',
pathMatch: 'full',
component: NyanComponent
}])
]
})
export class NyanModule {}
ويعرض هذا الرمز NyanComponent
عندما ينتقل المستخدم إلى https://example.com/nyan
.
للتأكّد من أنّ جهاز التوجيه Angular يُنزِّل nyan.module
بطريقة بطيئة في بيئتك المحلية، عليك اتّباع الخطوات التالية:
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
انقر على علامة التبويب الشبكة.
انقر على NYAN في نموذج التطبيق.
يُرجى العلم أنّ ملف
nyan-nyan-module.js
يظهر في علامة التبويب "الشبكة".
يمكنك العثور على هذا المثال على GitHub.
عرض مؤشر سريان العمل
في الوقت الحالي، عندما ينقر المستخدِم على زر NYAN، لا يشير التطبيق إلى أنّه يُحمِّل JavaScript في الخلفية. لمنح المستخدم ملاحظات أثناء تحميل النص البرمجي، قد تحتاج إلى إضافة مؤشر سريان العمل.
لإجراء ذلك، ابدأ بإضافة ترميز للمؤشر داخل عنصر router-outlet
في app.component.html
:
<router-outlet>
<span class="loader" *ngIf="loading"></span>
</router-outlet>
بعد ذلك، أضِف فئة AppComponent
لمعالجة أحداث التوجيه. سيضبط هذا الصف علامة loading
على true
عند سماع حدث RouteConfigLoadStart
، كما سيضبط العلامة على false
عند سماع حدث RouteConfigLoadEnd
.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loading: boolean;
constructor(router: Router) {
this.loading = false;
router.events.subscribe(
(event: RouterEvent): void => {
if (event instanceof NavigationStart) {
this.loading = true;
} else if (event instanceof NavigationEnd) {
this.loading = false;
}
}
);
}
}
في المثال أدناه، قدّمنا وقت استجابة اصطناعيًا قدره 500 ملي ثانية لكي تتمكّن من رؤية مؤشر سريان العمل.
الخلاصة
يمكنك تقليص حجم الحزمة لتطبيقات Angular من خلال تطبيق تقسيم الرمز على مستوى المسار:
- استخدِم أداة إنشاء الوحدات المستندة إلى التحميل الكسول في Angular CLI لنقل المسار المحمَّل ديناميكيًا تلقائيًا.
- أضِف مؤشر تحميل عندما ينتقل المستخدم إلى مسار بطيء لإظهار أنّ هناك إجراء جارٍ.