تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تقسيم الرمز على مستوى المسار بتنسيق Angular

يمكنك تحسين أداء تطبيقك باستخدام تقسيم الرموز على مستوى المسار.

Minko Gechev

تشرح هذه المشاركة كيفية إعداد تقسيم الرموز على مستوى المسار في تطبيق 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 لتوفير الدعم التلقائي لمسار يتم تحميله ديناميكيًا.
يمكنك إضافة مؤشر تحميل عندما ينتقل المستخدم إلى مسار كسول للإشارة إلى أنّ هناك إجراء جارٍ.