Suspense และ React.lazy ทำงานอย่างไรสำหรับการแบ่งโค้ด

Question

Accepted Answer

**`React.lazy`** โหลดบันเดิล JavaScript ของส่วนประกอบ **on demand** (เฉพาะเมื่อแสดงผลครั้งแรก) **`Suspense`** แสดง UI สำรองในขณะที่ส่วนประกอบ lazy (หรือ data-suspending) ใดๆ ยังคงกำลังโหลด ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## เหตุใดจึงสำคัญ: โหลดเริ่มต้นน้อยลง หากไม่มีการแบ่งโค้ด เบราว์เซอร์จะดาวน์โหลดแอปของคุณ **ทั้งหมด** (รวมถึงไลบรารีการสร้างแผนภูมิหนัก) ก่อนแสดงสิ่งใดๆ ด้วย `lazy` โค้ด `Chart` จะถูกแบ่งออกเป็นไฟล์ของตัวเองและเพียงดึงมาเมื่อผู้ใช้เข้าถึงจริงๆ — ปรับปรุงเวลาโหลดเริ่มต้นและ Core Web Vitals ## Suspense ประสานงานอย่างไร เมื่อ `Chart` หยุดชั่วคราว (บันเดิลของมันไม่พร้อม) React "หยุด" ส่วนนั้นของต้นไม้และแสดง fallback `Suspense` ที่ใกล้ที่สุดแทน จากนั้นเปลี่ยนส่วนประกอบจริงเมื่อโหลด ขอบเขตเดียวสามารถตัดส่วนประกอบ lazy หลายรายการและแสดง fallback หนึ่งรายการ: ```jsx }>

``` ## นอกเหนือจากการแบ่งโค้ด Suspense ยังประสานงาน **การโหลดข้อมูล** กับเฟรมเวิร์ก/ไลบรารีที่ "หยุดชั่วคราว" บน fetch ที่รอดำเนิน และจับคู่กับ **streaming SSR** (Next.js App Router) เพื่อส่งเชลล์ที่รวดเร็วและสตรีมส่วนที่ช้า วางขอบเขตอย่างชาญฉลาดเพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ที่ใหญ่และสั่นเมื่อเนื้อหาปรากฏขึ้น