טעינה מראש של מסלולים מראש כדי לזרז את השימוש של המשתמשים ניווט.
פיצול קוד ברמת המסלול יכול לעזור לכם לקצר את זמן הטעינה הראשונית של אפליקציה על ידי השהיית קוד ה-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:
- מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
אתה אמור לראות שהנתב הוריד את nyan-nyan-module.js
ואת about-about-module.js
ברקע בעת פתיחת האפליקציה:
הנתב רשם גם את המודולים לנתב את ההצהרות, כך שכשמנווטים לכתובת 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.
סיכום
כדי לזרז את הניווט כשמשתמשים בפיצול קוד ברמת המסלול:
- מומלץ לבחור את האסטרטגיה המתאימה לטעינה מראש, בהתאם לגודל האפליקציה:
- באפליקציות עם מספר מודולים אפשר להשתמש באסטרטגיה
PreloadAllModules
המובנית של Angular. - באפליקציות עם הרבה מודולים, צריך להגדיר אסטרטגיה מותאמת אישית לטעינה מראש, כמו קישור מהיר של Angular או טעינה מראש של חיזוי, כפי שמוטמע ב-Guess.js.
- באפליקציות עם מספר מודולים אפשר להשתמש באסטרטגיה
- מגדירים את אסטרטגיית הטעינה מראש על ידי הגדרת המאפיין
preloadStrategy
של הנתב Angular.