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

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

Minko Gechev

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

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

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

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

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

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

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

באמצעות האסטרטגיה PreloadAllModules

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

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

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

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

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

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

סיכום

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

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