คอมโพเนนต์แบบอะซิงก์ช่วยให้การโหลดแบบเกียจคร่านได้อย่างไร

Question

Accepted Answer

**คอมโพเนนต์แบบอะซิงก์** ให้คุณสามารถโหลดโค้ดของคอมโพเนนต์ **เฉพาะเมื่อจำเป็นจริงๆ** โดยแบ่งมันออกเป็นชุดแยกต่างหาก (chunk) ที่จะดึงตามความต้องการ สิ่งนี้ช่วยลดขนาด JavaScript เริ่มต้นที่ผู้ใช้ดาวน์โหลด

## การกำหนดคอมโพเนนต์แบบอะซิงก์

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

`import()` แบบไดนามิกบอก bundler (Vite/webpack) ให้แยก `HeavyChart.vue` เป็นไฟล์ของตัวเอง โหลดแบบเกียจคร่านครั้งแรกที่คอมโพเนนต์ถูกใช้งาน — ไม่ใช่เป็นส่วนหนึ่งของชุดหลัก

## เหตุใดสิ่งนี้จึงสำคัญต่อประสิทธิภาพ

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

คอมโพเนนต์ที่ใหญ่และใช้บ่อยน้อย (ตัวแก้ไขข้อความทีค่า ชาร์ต โมดัล แผงผู้ดูแลระบบ) ไม่จำเป็นต้องอยู่ในการดาวน์โหลดเริ่มต้น การโหลดแบบเกียจคร่านของพวกมันช่วยปรับปรุงเวลาโหลดเริ่มต้นและ Core Web Vitals

## จัดการสถานะการโหลดและข้อผิดพลาด

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

แบบฟอร์มขั้นสูงนี้ให้คุณแสดงสปินเนอร์ระหว่างการดึงข้อมูลและระบบสำรองในกรณีที่ล้มเหลว — สำคัญเพราะการโหลดแบบเกียจคร่านนำเสนอการหน่วงเวลาของเครือข่าย (โดยปกติจะสั้น)

## การจับคู่ทั่วไป: การแยกโค้ดในระดับเส้นทาง

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

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

## เหตุใดจึงสำคัญ

คอมโพเนนต์แบบอะซิงก์เป็นกลไกของ Vue สำหรับ **การแยกโค้ด** — เทคนิคหลักสำหรับการรักษาชุดเริ่มต้นให้มีขนาดเล็กเมื่อแอปพลิเคชันเพิ่มขึ้น

โดยการโหลดแบบเกียจคร่านคอมโพเนนต์ที่หนักหรือเฉพาะเส้นทางตามความต้องการ (พร้อมกับ UI การโหลด/ข้อผิดพลาดที่เป็นทางเลือก) คุณจะลดจำนวน JavaScript ที่ผู้ใช้ดาวน์โหลดในตอนแรก ซึ่งช่วยเร่งการโหลดครั้งแรก

เป็นการปรับปรุงประสิทธิภาพที่มีมาตรฐาน มีผลกระทบสูง โดยเฉพาะอย่างยิ่งเมื่อนำไปใช้กับเส้นทาง