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

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

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

مينكو غيتشيف

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