توجيه استراتيجيات التحميل المُسبق في 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. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
2. انقر على علامة التبويب الشبكة.

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

سجّل جهاز التوجيه أيضًا بيانات مسار الوحدات، بحيث يكون الانتقال فوريًا عند الانتقال إلى عنوان URL مرتبط بأي من الوحدات المحمَّلة مسبقًا.

استخدام استراتيجية التحميل المُسبَق لرابط Quicklink

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 فقط لأنّ الزر في وسط الصفحة يحتوي على رابط لجهاز التوجيه. عند فتح شريط التنقّل الجانبي، ستلاحظ أنّ جهاز التوجيه يحمِّل مسبقًا مسار "لمحة":

استخدام استراتيجية التحميل المُسبَق لرابط Quicklink في وحدات متعدّدة يتم تحميلها بشكلٍ بطيء

سيعمل المثال أعلاه مع تطبيق أساسي، ولكن إذا كان تطبيقك يحتوي على وحدات مُحمَّلة بشكلٍ بطيء متعددة، عليك استيراد 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.