อื๊มมสำหรับคนไม่รู้ต้องทำความเข้าใจเรื่อง Lazy-loading กับ Eager-loading ก่อน
Eager-loading และ Lazy-loading
เป็นวิธีการโหลด Component ใน React ที่แตกต่างกันอย่างมากEager-loading คือ
การโหลด Component ทั้งหมดขณะที่แอพพลิเคชั่นเริ่มต้นโหลดหรือถูกโหลดมาก่อนแล้ว โดยไม่คำนึงถึงการเรียกใช้งานจริง ๆ ของ Component นั้นๆ โดยการทำงานนี้ทำให้การโหลดของแอพพลิเคชั่นเสร็จสมบูรณ์เร็วขึ้น แต่ก็อาจจะมีการโหลดของ Component ที่ไม่จำเป็นเกินไปทำให้ใช้ทรัพยากรไม่เป็นธรรมชาติ
ตัวอย่างโค๊ด
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
);
}
Lazy-loading คือ
การโหลด Component เมื่อมีการเรียกใช้งานจริง ๆ ของ Component นั้นๆ โดยการทำงานนี้ทำให้แอพพลิเคชั่นโหลดเร็วขึ้น เนื่องจาก Component ที่ไม่จำเป็นไม่ต้องโหลดทันทีและใช้ทรัพยากรเฉพาะเมื่อจำเป็น วิธีการ Lazy-loading ทำได้โดยใช้ React.lazy() และ Suspense ดังนั้น การเลือกใช้ Eager-loading หรือ Lazy-loading ขึ้นอยู่กับวัตถุประสงค์และการออกแบบของแอพพลิเคชั่น ถ้าแอพพลิเคชั่นมีขนาดใหญ่และมี Component จำนวนมาก และต้องการโหลดเร็ว ก็ควรพิจารณาใช้ Eager-loading แต่ถ้าต้องการโหลด Component เฉพาะเมื่อจำเป็น ให้ใช้ Lazy-loading ด้วย React.lazy() และ Suspense
ตัวอย่างโค๊ด
พอเข้าใจตรงนี้แล้วคุณ lazy ทำให้โหลดไวขึ้นหรือป่าว ?
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
);
}
เมื่อเราใช้ React.lazy() ในการโหลด Component นั้น ๆ จะต้องระบุฟังก์ชันที่ใช้สำหรับโหลด Component นั้นๆ และเมื่อ Component นั้นๆ ถูกเรียกใช้งานจริง ๆ React.lazy() จะโหลด Component นั้นๆ โดยอัตโนมัติ และคืนค่าเป็น Promise ซึ่งจะ resolve เป็น default export ของ Component นั้นๆ เพราะแนวคิดพื้นฐานของ React คือการแบ่ง Component ของแอพพลิเคชั่นเป็นชิ้นย่อยๆ ที่สามารถสร้างขึ้นมาและใช้งานได้อย่างอิสระ และเพื่อเพิ่มประสิทธิภาพในการโหลดและใช้งาน Component หลายคนจึงเลือกใช้การโหลด Component แบบ Lazy-loading แทนการโหลดทุก Component ที่ต้องการใช้งานไว้ตั้งแต่ต้นของแอพพลิเคชั่น โดยการโหลดแบบ Lazy-loading จะช่วยลดเวลาโหลดและเพิ่มประสิทธิภาพของแอพพลิเคชั่น
0 Comments