تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

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

Minko Gechev

توضّح هذه المشاركة كيفية إعداد تقسيم الرموز البرمجية على مستوى المسار في تطبيق Angular، ما يقلّل من حجم حزمة JavaScript ويحسّن بشكل كبير سرعة الاستعداد للتفاعل.

يمكنك العثور على عيّنات التعليمات البرمجية من هذه المقالة على GitHub. يتوفّر مثال التوجيه السريع في الفرع السريع. يتوفّر مثال تقسيم الرمز على مستوى المسار في الفرع lazy.

أهمية تقسيم الرموز البرمجية

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