توجيه استراتيجيات التحميل المُسبق في Angular

تحميل المسارات مسبقًا لتسريع نشاط المستخدمين التنقل.

Minko Gechev

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

على الرغم من أن هذا الأسلوب رائع للتحميل الأولي للصفحة، إلا أنه يمكن أن يبطئ التنقل، استنادًا إلى وقت استجابة الشبكة ومعدل نقل البيانات. تتمثل إحدى طرق حل هذه المشكلة في توجيه التحميل المُسبق. باستخدام التحميل المُسبق، عندما يكون المستخدم في مسار معيّن، يمكنك تنزيل وتخزين ملفات JavaScript المرتبطة بالمسارات التي يُرجّح أن تكون مطلوبة بعد ذلك. يوفر موجه Angular هذه الوظيفة بطريقة مبتكرة.

ستتعلم في هذه المشاركة كيفية تسريع التنقل عند استخدام تقسيم الرموز على مستوى المسار من خلال الاستفادة من تحميل JavaScript مسبقًا في Angular.

توجيه استراتيجيات التحميل المسبق في Angular

يوفّر جهاز التوجيه Angular خاصية ضبط تُسمى preloadingStrategy، وهي تحدّد منطق التحميل المُسبق لوحدات Angular ذات التحميل الكسول ومعالجتها. سنتناول استراتيجيتين محتملتين:

• PreloadAllModules، الذي يحمّل جميع المسارات ذات التحميل الكسول مسبقًا، كما يوحي الاسم
• QuicklinkStrategy، الذي يُحمِّل مسبقًا المسارات المرتبطة بالروابط في الصفحة الحالية فقط.

تشير بقية هذه المشاركة إلى نموذج من تطبيق Angular. يمكنك العثور على رمز المصدر على GitHub.

استخدام استراتيجية PreloadAllModules

يحتوي نموذج التطبيق على العديد من مسارات التحميل الكسول. لتحميل جميع العناصر مسبقًا باستخدام استراتيجية PreloadAllModules المضمَّنة في Angular، يمكنك تحديدها كقيمة للسمة preloadingStrategy في إعدادات جهاز التوجيه:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

اعرض التطبيق الآن وألقِ نظرة على لوحة الشبكة في "أدوات مطوري البرامج في Chrome":

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
2. انقر على علامة التبويب الشبكة.

من المفترض أن يكون جهاز التوجيه قد نزّل nyan-nyan-module.js وabout-about-module.js في الخلفية عند فتح التطبيق:

قام الموجه أيضًا بتسجيل وحدات البيانات بيانات المسارات، وبالتالي عندما تنتقل إلى عنوان URL مرتبط بأي من الوحدات التي تم تحميلها مسبقًا، يصبح النقل فوريًا.

استخدام استراتيجية التحميل المسبق للربط السريع

يمكن الاستفادة من السمة PreloadAllModules في الكثير من الحالات. ومع ذلك، فعندما يكون لديك عشرات الوحدات، يمكن أن يزيد تحميلها مُسبقًا القوي من استخدام الشبكة. ونظرًا لأن الموجه بحاجة إلى تسجيل المسارات في جميع الوحدات المحملة مسبقًا، فقد يؤدي ذلك إلى عمليات حسابية مكثفة في مؤشر ترابط واجهة المستخدم وترك انطباع لدى المستخدم.

توفِّر مكتبة الروابط السريعة استراتيجية أفضل للتطبيقات الأكبر حجمًا. وهو يستخدم واجهة برمجة تطبيقات IntersectionObserver لتحميل الوحدات مسبقًا فقط المرتبطة بالروابط التي تظهر حاليًا على الصفحة.

يمكنك إضافة رابط سريع إلى تطبيق Angular باستخدام حزمة ngx-quicklink. البدء بتثبيت الحزمة من npm:

npm install --save ngx-quicklink

وبعد توفُّر الميزة في مشروعك، يمكنك استخدام QuicklinkStrategy من خلال تحديد preloadingStrategy لجهاز التوجيه واستيراد QuicklinkModule:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

عندما تفتح التطبيق مرة أخرى، ستلاحظ أنّ جهاز التوجيه يحمّل nyan-nyan-module.js مسبقًا فقط لأنّ الزرّ في وسط الصفحة يتضمّن رابطًا يؤدّي إليه. وعندما تفتح شريط التنقل الجانبي، ستلاحظ أنّ الموجه يحمّل مسبقًا زر "نبذة عني" المسار:

استخدام استراتيجية التحميل المسبق للربط السريع عبر وحدات متعددة التحميل الكسول

يتوافق المثال أعلاه مع تطبيق أساسي، ولكن إذا كان تطبيقك يحتوي على عدة وحدات ذات تحميل كسول، سيكون عليك استيراد QuicklinkModule إلى وحدة مشترَكة وتصديرها ثم استيراد الوحدة المشتركة إلى الوحدات ذات التحميل الكسول.

عليك أولاً استيراد QuicklinkModule من ngx-quicklink إلى الوحدة المشتركة وتصديرها:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

بعد ذلك، يمكنك استيراد SharedModule إلى جميع الوحدات ذات التحميل الكسول:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

ستتوفّر "Quicklinks" الآن في الوحدات ذات التحميل الكسول.

تجاوز التحميل المُسبق الأساسي

في حين أن التحميل المسبق الانتقائي عبر الرابط السريع يمكن أن يؤدي إلى تسريع عملية التنقل بشكل كبير، يمكنك زيادة كفاءة استراتيجية التحميل المسبق في الشبكة باستخدام التحميل المسبق التنبؤي، والذي يتم تنفيذه بواسطة Guess.js. ومن خلال تحليل تقرير من "إحصاءات Google" أو موفّر آخر للتحليلات، يستطيع Guess.js التنبؤ برحلة تنقل المستخدم وتحميل مقاطع JavaScript مسبقًا فقط والتي يُحتمل أن تكون مطلوبة بعد ذلك.

يمكنك معرفة كيفية استخدام Guess.js مع Angular في هذه الصفحة من موقع Guess.js الإلكتروني.

الخاتمة

لتسريع عملية التنقّل عند استخدام تقسيم الرموز على مستوى المسار:

1. اختَر استراتيجية التحميل المُسبق المناسبة حسب حجم تطبيقك:
   • يمكن للتطبيقات التي تتضمّن عددًا قليلاً من الوحدات استخدام استراتيجية PreloadAllModules المدمجة في Angular.
   • يجب أن تستخدم التطبيقات التي تحتوي على العديد من الوحدات استراتيجية مخصصة للتحميل المُسبق، مثل الرابط السريع في Angular أو التحميل المُسبق التنبؤي، كما هو مُطبق في Guess.js.
2. يمكنك ضبط استراتيجية التحميل المُسبق من خلال ضبط السمة preloadStrategy في جهاز توجيه Angular.