angular lazy loading modules routing

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

אלו הפרויקטים שכדי לשקול מאוד ברצינות לעבוד עם תתי-מודולים ולסדר את הרכיבים בהתאמה לטעינה חלקית של המודולים.

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

לדוגמה:

מודול א' (בסיס – נטען מיד כשהאתר עולה), מודול ב' (נטען רק כאשר גולשים לדף ב') ומודול ג' (גם הוא נטען רק כאשר גולשים לדף ג').

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

כאשר אנחנו רוצים ליצור מודול חדש ולטעון אותו ב-lazy בפרויקט CLI זה מאוד פשוט וקל

נריץ את הפקודה הבאה מהספריה ששם אנחנו רוצים שהמודול והתיקיה שלו יהיו:

ng generate module customers --route customers --module app.module

כמובן שאת customers תחליפו לשם שמתאים לכם.

תוכלו לראות שבאופן אוטומטי נוצרה ספריה שמכילה בנוסף ל-TS, HTML, SCSS באותו שם , גם ROUTING באותו שם עבור המודול הזה.

במקביל app-routing.module.ts התעדכן ונראה כך:

const routes: Routes = [{ path: 'customers',
loadChildren: () => import('./customers/customers.module').then(
  m => m.CustomersModule) }];

שימו לב שקובץ app.module.ts לא התעדכן שיש קובץ חדש וזה כדי להפריד אותם לגמרי אחד מהשני לטובת lazy-loading.

כשמשתמש יגלוש לדף customers או customers/something הנתב הראשי יקבל את הבקשה ויבצע משיכה וטעינה של כל המודול customers, מאותו רגע לא תתבצע טעינה נוספת שלו. זאת אומרת, כאשר המשתמש ביקר פעם אחת בדף "לקוחות" והמודול נטען, גם אם הוא יעבור לדף אחר ויחזור לדף הזה לא תהיה טעינה חוזרת של המודול (שזה מאוד טוב לנו).

כל מודול שנבנה כך מקבל קובץ JS משלו אחרי הרצה של הפרויקט (נראה את זה בסוף)

כאשר נפתח טרמינל בתוך הספריה של customers ונריץ פקודה ליצירה של רכיב חדש, באופן אוטומטי הוא יתווסף למודול של אותה ספריה.

כך נראה הפרויקט לאחר build :

אפשר לראות ש-customers מודול קיבל קובץ JS משלו, קובץ זה יטען רק לאחר גלישה לניתוב הנכון.

הבעיה הכי גדולה כאן היא שרק כאשר גולשים לדף "לקוחות", המשתמש יאלץ להמתין בזמן שהקובץ נמשך ורץ בפעם הראשונה , כך שהחוויה לא חלקה לחלוטין…..

גם לזה יש פיתרון!

טעינה מקדימה של כל המודולים ב-lazy loading

imports: [
  RouterModule.forRoot(routes,
  { preloadingStrategy: PreloadAllModules })
],

עכשיו שנריץ את האתר, המודול הראשי יטען ולאחר שהדף יעלה, אנגולר ימשיך למשוך ולהריץ את כל שאר המודולים שנמצאים ב-lazy loading מאחורי הקלעים.

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

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

פוסטים קשורים:

ריבוי מודולים באנגולר הגדרה בסיסית לאנגולר ראוטינג צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types) angular input and output in the same variable