ขี้เกียจโหลดในเชิงมุม

ในเชิงมุม การโหลดแบบ Lazy Loading หมายถึงเทคนิคการโหลดโมดูลเมื่อจำเป็นเท่านั้น แทนที่จะโหลดโมดูลทั้งหมดเมื่อเริ่มต้นแอปพลิเคชัน

ซึ่งจะช่วยให้

• ปรับปรุงประสิทธิภาพของแอปพลิเคชันโดยลดภาระเริ่มต้น
• การลดจำนวนหน่วยความจำที่จำเป็นในการเรียกใช้แอปพลิเคชัน

การโหลดแบบ Lazy Loading สามารถทำได้โดยการใช้คุณสมบัติ loadChildren ในมัณฑนากร @NgModule เมื่อเราเตอร์นำทางไปยังเส้นทางที่มีคุณสมบัติ loadChildren Angular จะโหลดโมดูลที่ระบุตามความต้องการ แทนที่จะโหลดเมื่อเริ่มต้นแอปพลิเคชัน

ต่อไปนี้เป็นตัวอย่างของการโหลดโมดูลแบบ Lazy Load ใน @NgModule มัณฑนากร

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ในตัวอย่างนี้ โมดูล dashboard จะถูกโหลดเมื่อผู้ใช้นำทางไปยังเส้นทาง /dashboard เท่านั้น ซึ่งช่วยให้แอปพลิเคชันเริ่มทำงานเร็วขึ้นและใช้หน่วยความจำน้อยลง เนื่องจากโมดูล dashboard ไม่ได้ถูกโหลดจนกว่าจะจำเป็น

เป็นที่น่าสังเกตว่าการโหลดแบบ Lazy Loading จะทำให้เกิดความล่าช้าในการนำทางครั้งแรกไปยังฟีเจอร์ Lazy Loading แต่จะช่วยปรับปรุงประสิทธิภาพโดยรวมของแอปพลิเคชันในระยะยาว

นอกจากนี้ ยังเป็นที่น่าสังเกตว่าคุณต้องกำหนดค่าการโหลดแบบ Lazy Loading ในไฟล์กำหนดค่า webpack หรือ angular-cli ของคุณ

เรียนรู้ต่อไป