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

عليك تحميل المسارات مسبقًا لتسريع عملية تنقّل المستخدمين.

مينكو غيتشيف

يمكن أن يساعدك تقسيم رمز على مستوى المسار في تقليل وقت التحميل الأولي لأحد التطبيقات عن طريق تأخير 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.