אסטרטגיות של מסלול לטעינה מראש ב-Angular

אפשר לטעון מראש מסלולים כדי להאיץ את הניווט של המשתמשים.

Minko Gechev

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

השיטה הזו נהדרת לטעינה הראשונית של הדף, אבל היא עלולה להאט את הניווט, בהתאם לזמן האחזור ברשת ולרוחב הפס של המשתמשים. אחת מהדרכים להתמודד עם הבעיה הזו היא טעינה מראש של מסלולים. באמצעות טעינת נתונים מראש, כשהמשתמש נמצא במסלול נתון, אפשר להוריד ולשמור במטמון קוד JavaScript שמשויך למסלולים שסביר להניח שיהיה צורך בהם בשלב הבא. הנתב Angular מספק את הפונקציונליות הזו מראש.

בפוסט הזה תלמדו איך לזרז את הניווט כשמשתמשים בפיצול קוד ברמת המסלול, על ידי ניצול הטעינה מראש של JavaScript ב-Agular.

אסטרטגיות של טעינה מראש של מסלולים ב-Angular

הנתב של Angular מספק מאפיין תצורה שנקרא preloadingStrategy, שמגדיר את הלוגיקה של טעינת מודולים של Angular בטעינה מראש ועיבוד שלהם בטעינה איטית. נסביר על שתי אסטרטגיות אפשריות:

• PreloadAllModules, שמטען מראש את כל המסלולים שמופעלת בהם טעינת נתונים בזמן אמת (lazy-load), כפי שרומז השם
• QuicklinkStrategy, שמטען מראש רק את המסלולים שמשויכים לקישורים בדף הנוכחי.

המשך הפוסט הזה מתייחס לאפליקציה לדוגמה של Angular. אפשר למצוא את קוד המקור ב-GitHub.

שימוש בשיטה PreloadAllModules

באפליקציית הדוגמה יש כמה מסלולים טעונים באיטרציה. כדי לטעון את כולם מראש באמצעות האסטרטגיה PreloadAllModules שמובנית ב-Agular, צריך לציין אותה כערך של המאפיין preloadingStrategy בהגדרות של הנתב:

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

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

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

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

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

האסטרטגיה של PreloadAllModules בפעולה.

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

שימוש בשיטת טעינה מראש של קישורי Quicklink

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

ספריית 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, כי ללחצן במרכז הדף יש קישור לנתב. כשתפתחו את סרגל הניווט הצדדי, תבחינו שהנתב טוען מראש את המסלול 'מידע על':

הדגמה של האסטרטגיה של קישור מהיר לטעינה מראש.

שימוש באסטרטגיית הטעינה מראש של קישור מהיר בכמה מודולים בטעינה מדורגת

הדוגמה שלמעלה תפעל באפליקציה בסיסית, אבל אם האפליקציה מכילה כמה מודולים טעונים באיטרציה, תצטרכו לייבא את 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.