Lazy Loading

מה זה Lazy Loading?

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

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

טעינה כזאת גורמת לאתר להיות הרבה יותר מהיר.

יישום Lazy Loading

1. בחירת המודולים שיכנסו ל-Lazy Loading.
2. לכל מודל כזה נסיר את כל הצהרות import מכל מקום שהם מופיעים בו בפרוייקט. יותר קל ליישם את זה בתחילת הפרוייקט.
   אם נסתכל על הפרוייקט מהמאמר הקודם, ניישם את Lazy Loading על מודול Elements.
   נראה שיש לנו import בקובץ app.module.ts ונסיר אותו.
3. בקובץ app-routing.module.ts נגדיר מערך routes ונגדיר מתי אנחנו רוצים לטעון את ה-routes שבו. בכל פעם שמישהו ילך לקישור elements, תטען פונקציית loadChildren ואז אנגולר יבצע טעינה דינמית של המודול.
4. במודול שאותו הגדרנו כ-Lazy Loadin נערוך כל נתיב להיות יחסי לנתיב שהגדרנו בקובץ ה-routes של app.

קובץ app-routing.module.ts

const routes: Routes = [
  { 
    path: 'elements', 
    loadChildren: () => 
      import('./elements/elements.module').then((m) => m.ElementsModule)
  },
  { path: '', component: HomeComponent },
  { path: '**', component: NotFoundComponent }
];

קובץ elements-routing.module.ts

const routes: Routes = [
  { path: '', component: ElementsHomeComponent }
];

את אותם הצעדים אפשר ליישם על המודולים האחרים.