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

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

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

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

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

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