𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
แอป React ขนาดใหญ่จะสร้าง JavaScript bundle ที่มีขนาดใหญ่ bundle ที่มีขนาดใหญ่จะทำให้เว็บไซต์ของคุณช้าลง ผู้ใช้ต้องรอนานขึ้นกว่าจะสามารถโต้ตอบกับแอปของคุณได้ ซึ่งสิ่งนี้จะส่งผลเสียต่อประสบการณ์ของผู้ใช้ (user experience)
Lazy loading ช่วยแก้ปัญหานี้ได้ มันจะโหลดคอมโพเนนต์เฉพาะเมื่อผู้ใช้ต้องการใช้งานเท่านั้น คุณไม่จำเป็นต้องโหลดทุกอย่างพร้อมกันในคราวเดียว
ประโยชน์ของ lazy loading:
- ขนาด initial bundle เล็กลง
- โหลดหน้าเว็บได้เร็วขึ้น
- ประสบการณ์ผู้ใช้ดีขึ้น
- ใช้แบนด์วิดท์น้อยลง
- ค่า Core Web Vitals ดีขึ้น
วิธีการใช้งาน React.lazy()
React มีฟังก์ชันที่ชื่อว่า lazy() เพื่อใช้ในการ import คอมโพเนนต์แบบ dynamic
React จะดาวน์โหลดโค้ดก็ต่อเมื่อมีการ render คอมโพเนนต์นั้นๆ เท่านั้น
ตัวอย่างโค้ด: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
คุณต้องใช้ Suspense ร่วมกับ lazy components
Suspense จะแสดง fallback UI ในระหว่างที่คอมโพเนนต์กำลังโหลด
ตัวอย่างโค้ด: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
กฎ 2 ข้อเพื่อความสำเร็จ:
- คอมโพเนนต์ของคุณต้องใช้ default exports
- ประกาศ lazy imports ไว้นอกฟังก์ชันคอมโพเนนต์
คุณได้ใช้ lazy loading ในโปรเจกต์ของคุณบ้างไหม? คอมเมนต์บอกกันได้ที่ด้านล่างนี้ แล้วผมจะเข้าไปตอบครับ