คุณจะทำการ lazy-load เส้นทาง/ฟีเจอร์ใน Angular ได้อย่างไร

Question

Accepted Answer

**Lazy loading** เลื่อนการดาวน์โหลดโค้ดของฟีเจอร์ จนกว่าผู้ใช้จะนำทางไปยังมัน แทนที่จะรวมทุกอย่างไว้ในการดาวน์โหลดครั้งแรก ซึ่งจะลดขนาด bundle เริ่มต้นและเพิ่มความเร็วของการโหลดครั้งแรก

## Lazy-load คอมโพเนนต์แบบ standalone (สมัยใหม่)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

คำสั่ง `import()` แบบไดนามิกจะบอกให้เครื่องมือ build แบ่ง `AdminComponent` เป็น chunk ของตัวเอง ซึ่งจะดาวน์โหลดเฉพาะเมื่อผู้ใช้เยี่ยมชม `/admin`

## Lazy-load กลุ่มของเส้นทาง

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` จะ lazy-load พื้นที่ฟีเจอร์ทั้งหมด (เส้นทาง/คอมโพเนนต์ทั้งหมด) เป็น chunk เดียว ซึ่งเป็นวิธีมาตรฐานในการแบ่งแอปขนาดใหญ่ตามฟีเจอร์

## รูปแบบที่ใช้ NgModule (codebase เก่า)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## ทำไมจึงช่วยปรับปรุงประสิทธิภาพ

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

ผู้ใช้จะดาวน์โหลดเฉพาะสิ่งที่พวกเขาเข้าไปจริง ๆ — สำคัญมากสำหรับแอปองค์กรขนาดใหญ่ที่มีพื้นที่ฟีเจอร์จำนวนมาก และผู้ใช้ส่วนใหญ่ไม่เคยเปิดใช้งาน

## กลยุทธ์การสอบเบื้องต้น (ดีที่สุดของทั้งสองวิธี)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

การสอบเบื้องต้นจะดึง lazy chunks ในพื้นหลังหลังจากแอปโหลด ดังนั้น bundle เริ่มต้นจึงเล็ก *และ* การนำทางในภายหลังรู้สึกว่าทันที คุณยังสามารถเขียนกลยุทธ์ที่กำหนดเองได้ด้วย (เช่น เพียงแค่สอบเบื้องต้นเส้นทางที่อาจเป็นไปได้ถัดไป)

## ทำไมถึงสำคัญ

Lazy loading เป็นเทคนิคหลักในการรักษา bundle เริ่มต้นของ Angular ให้เล็ก เมื่อแอปมีขนาดใหญ่ขึ้น — จำเป็นสำหรับแอปองค์กรขนาดใหญ่ที่มีหลายฟีเจอร์ซึ่ง Angular ใช้เป็นเป้าหมาย

การแบ่งตามเส้นทาง/ฟีเจอร์ (`loadComponent`/`loadChildren`) หมายถึงการโหลดครั้งแรกที่เร็วขึ้น และเมื่อรวมกับกลยุทธ์การสอบเบื้องต้น จะให้ทั้งการเริ่มต้นที่รวดเร็วและการนำทางที่ราบรื่น

เป็นแนวทางประสิทธิภาพมาตรฐานที่มีผลกระทบสูงในแอปพลิเคชัน Angular ที่มีขนาดค่อนข้างใหญ่