[Lazily] React.lazy() ช้วยให้เว็บไซต์โหลดไวขึ้นจริงหรอ ?

 

React.lazy() เป็นฟังก์ชันของ React ที่ใช้สำหรับโหลด Component ใน React โดย Lazy-loading หรือโหลด Component นั้นๆ เมื่อเรียกใช้งานจริง ๆ และไม่ได้โหลด Component นั้นๆ ไว้ทั้งหมดแบบ Eager-loading โดยทั่วไป

อื๊มมสำหรับคนไม่รู้ต้องทำความเข้าใจเรื่อง 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

ตัวอย่างโค๊ด

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    

        
    
  );
}

พอเข้าใจตรงนี้แล้วคุณ lazy ทำให้โหลดไวขึ้นหรือป่าว ?
เมื่อเราใช้ React.lazy() ในการโหลด Component นั้น ๆ จะต้องระบุฟังก์ชันที่ใช้สำหรับโหลด Component นั้นๆ และเมื่อ Component นั้นๆ ถูกเรียกใช้งานจริง ๆ React.lazy() จะโหลด Component นั้นๆ โดยอัตโนมัติ และคืนค่าเป็น Promise ซึ่งจะ resolve เป็น default export ของ Component นั้นๆ เพราะแนวคิดพื้นฐานของ React คือการแบ่ง Component ของแอพพลิเคชั่นเป็นชิ้นย่อยๆ ที่สามารถสร้างขึ้นมาและใช้งานได้อย่างอิสระ และเพื่อเพิ่มประสิทธิภาพในการโหลดและใช้งาน Component หลายคนจึงเลือกใช้การโหลด Component แบบ Lazy-loading แทนการโหลดทุก Component ที่ต้องการใช้งานไว้ตั้งแต่ต้นของแอพพลิเคชั่น โดยการโหลดแบบ Lazy-loading จะช่วยลดเวลาโหลดและเพิ่มประสิทธิภาพของแอพพลิเคชั่น