אסטרטגיות של מסלול לטעינה מראש ב-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
})
// …

עכשיו מציגים את האפליקציה ובודקים את החלונית Network בכלי הפיתוח ל-Chrome:

1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה רשתות.

אמורים לראות שהנתב הוריד את nyan-nyan-module.js ואת about-about-module.js ברקע כשפתחת את האפליקציה:

הנתב גם רשם את הצהרות הנתיב של המודולים, כך שכאשר עוברים לכתובת URL שמשויכת לאחד מהמודולים שנטענו מראש, המעבר מתבצע באופן מיידי.

שימוש באסטרטגיה של טעינה מראש של Quicklink

השיטה PreloadAllModules מועילה במקרים רבים. עם זאת, כשמשתמשים בעשרות מודולים, הטעינה מראש האגרסיבית יכולה להגדיל מאוד את השימוש ברשת. כמו כן, מאחר שהנתב צריך לרשום את המסלולים בכל המודולים שנטענו מראש, הדבר עלול לגרום לחישובים אינטנסיביים ב-thread של ממשק המשתמש, וחוויית המשתמש תהיה איטית.

ספריית quicklink מספקת אסטרטגיה טובה יותר לאפליקציות גדולות יותר. היא משתמשת ב-API 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 Analytics או מספק אחר של ניתוח נתונים, Guess.js יכול לחזות את מסלול הניווט של המשתמש ולטעון מראש רק את קטעי ה-JavaScript שעשויים להיות נחוצים בשלב הבא.

בדף הזה באתר של Guess.js תוכלו ללמוד איך להשתמש ב-Guess.js עם Angular.

סיכום

כדי לזרז את הניווט כשמשתמשים בפיצול קוד ברמת המסלול:

1. בוחרים את האסטרטגיה המתאימה לטעינה מראש בהתאם לגודל האפליקציה:
   • באפליקציות עם מעט מודולים, אפשר להשתמש באסטרטגיה PreloadAllModules המובנית של Angular.
   • באפליקציות עם מודולים רבים, צריך להשתמש באסטרטגיה מותאמת אישית לטעינה מראש, כמו הקישור המהיר של Angular או טעינה מראש חזויה, כפי שמוטמע ב-Guess.js.
2. כדי להגדיר את אסטרטגיית הטעינה מראש, מגדירים את המאפיין preloadStrategy של הנתב ב-Angular.