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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...

ในตัวอย่างนี้ ข้อความ Loading... จะปรากฏขึ้นในขณะที่ MyComponent กำลังถูกโหลด เมื่อโหลดคอมโพเนนต์เสร็จแล้ว มันจะมาแทนที่ UI สำรอง

3. ตัวอย่างการใช้งานจริง: การทำ Lazy Loading แกลเลอรีรูปภาพขนาดใหญ่

ลองพิจารณาสถานการณ์ที่คุณมีแกลเลอรีรูปภาพขนาดใหญ่ การโหลดรูปภาพทั้งหมดในครั้งเดียวอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ นี่คือวิธีที่คุณสามารถทำ lazy load ให้กับรูปภาพโดยใช้ React.lazy() และ <Suspense>:

import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... รูปภาพเพิ่มเติม
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

และคอมโพเนนต์ Image.js:

import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

ในตัวอย่างนี้ รูปภาพแต่ละรูปจะถูกห่อด้วยคอมโพเนนต์ <Suspense> ดังนั้นข้อความแสดงการโหลดจะปรากฏขึ้นสำหรับแต่ละภาพในขณะที่กำลังโหลด ซึ่งจะช่วยป้องกันไม่ให้ทั้งหน้าเว็บถูกบล็อกในขณะที่กำลังดาวน์โหลดรูปภาพ

เทคนิคขั้นสูงและข้อควรพิจารณา

1. Error Boundaries

เมื่อใช้ lazy loading สิ่งสำคัญคือต้องจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการโหลด สามารถใช้ Error boundaries เพื่อดักจับข้อผิดพลาดเหล่านี้และแสดง UI สำรองได้ คุณสามารถสร้างคอมโพเนนต์ error boundary ได้ดังนี้:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // อัปเดต state เพื่อให้การเรนเดอร์ครั้งถัดไปแสดง UI สำรอง
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // คุณยังสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // คุณสามารถเรนเดอร์ UI สำรองที่คุณกำหนดเองได้
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

จากนั้นห่อหุ้มคอมโพเนนต์ <Suspense> ด้วย <ErrorBoundary>:

  Loading...}>
    
  

หากเกิดข้อผิดพลาดขณะโหลด MyComponent, <ErrorBoundary> จะดักจับและแสดง UI สำรอง

2. Server-Side Rendering (SSR) และ Lazy Loading

Lazy loading ยังสามารถใช้ร่วมกับ Server-Side Rendering (SSR) เพื่อปรับปรุงเวลาในการโหลดเริ่มต้นของแอปพลิเคชันของคุณได้ อย่างไรก็ตาม มันต้องการการกำหนดค่าเพิ่มเติมบางอย่าง คุณจะต้องแน่ใจว่าเซิร์ฟเวอร์สามารถจัดการกับการ import แบบไดนามิกได้อย่างถูกต้อง และคอมโพเนนต์ที่โหลดแบบ lazy ได้รับการ hydrate อย่างเหมาะสมบนฝั่งไคลเอ็นต์

เครื่องมืออย่าง Next.js และ Gatsby.js มีการรองรับ lazy loading และ code splitting ในสภาพแวดล้อม SSR ในตัว ทำให้กระบวนการง่ายขึ้นมาก

3. การโหลดคอมโพเนนต์แบบ Lazy-Loaded ล่วงหน้า

ในบางกรณี คุณอาจต้องการโหลดคอมโพเนนต์แบบ lazy-loaded ล่วงหน้าก่อนที่จะมีความจำเป็นต้องใช้งานจริง ซึ่งอาจมีประโยชน์สำหรับคอมโพเนนต์ที่มีแนวโน้มว่าจะถูกเรนเดอร์ในไม่ช้า เช่น คอมโพเนนต์ที่อยู่ด้านล่างของหน้าจอแต่มีแนวโน้มที่จะถูกเลื่อนเข้ามาในมุมมอง คุณสามารถโหลดคอมโพเนนต์ล่วงหน้าได้โดยการเรียกใช้ฟังก์ชัน import() ด้วยตนเอง:

import('./MyComponent'); // โหลด MyComponent ล่วงหน้า

ซึ่งจะเริ่มโหลดคอมโพเนนต์ในเบื้องหลัง เพื่อให้พร้อมใช้งานเร็วขึ้นเมื่อมีการเรนเดอร์จริง

4. การ Import แบบไดนามิกด้วย Webpack Magic Comments

"Magic comments" ของ Webpack เป็นวิธีที่ช่วยให้คุณสามารถกำหนดชื่อของ code chunks ที่สร้างขึ้นได้เอง ซึ่งมีประโยชน์สำหรับการดีบักและวิเคราะห์โครงสร้าง bundle ของแอปพลิเคชันของคุณ ตัวอย่างเช่น:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

ซึ่งจะสร้าง code chunk ที่ชื่อว่า "my-component.js" (หรือชื่อที่คล้ายกัน) แทนที่จะเป็นชื่อทั่วไป

5. การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย

• การแบ่งย่อยเกินไป (Over-splitting): การแบ่งโค้ดของคุณออกเป็นส่วนเล็กๆ มากเกินไปอาจทำให้ประสิทธิภาพลดลงได้ เนื่องจากค่าใช้จ่ายในการส่งคำขอเครือข่ายหลายครั้ง พยายามหาสมดุลที่เหมาะสมกับแอปพลิเคชันของคุณ
• การวางตำแหน่ง Suspense ที่ไม่ถูกต้อง: ตรวจสอบให้แน่ใจว่า <Suspense> ของคุณถูกวางไว้อย่างเหมาะสมเพื่อมอบประสบการณ์ที่ดีแก่ผู้ใช้ หลีกเลี่ยงการห่อหุ้มทั้งหน้าเว็บด้วย <Suspense> หากเป็นไปได้
• ลืมใช้ Error Boundaries: ใช้ error boundaries เสมอเพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการทำ lazy loading

ตัวอย่างและการใช้งานในโลกแห่งความเป็นจริง

Lazy loading สามารถนำไปประยุกต์ใช้กับสถานการณ์ที่หลากหลายเพื่อปรับปรุงประสิทธิภาพของแอปพลิเคชัน React นี่คือตัวอย่างบางส่วน:

• เว็บไซต์อีคอมเมิร์ซ: การทำ lazy loading รูปภาพสินค้า วิดีโอ และคำอธิบายสินค้ารายละเอียด สามารถปรับปรุงเวลาในการโหลดเริ่มต้นของหน้าสินค้าได้อย่างมาก
• บล็อกและเว็บไซต์ข่าว: การทำ lazy loading รูปภาพ วิดีโอที่ฝังไว้ และส่วนความคิดเห็น สามารถเพิ่มประสบการณ์การอ่านและลดอัตราการตีกลับ (bounce rates) ได้
• แดชบอร์ดและแผงควบคุมสำหรับผู้ดูแลระบบ: การทำ lazy loading แผนภูมิ กราฟ และตารางข้อมูลที่ซับซ้อน สามารถปรับปรุงการตอบสนองของแดชบอร์ดและแผงควบคุมได้
• Single-Page Applications (SPAs): การทำ lazy loading เส้นทาง (routes) และคอมโพเนนต์ สามารถลดเวลาในการโหลดเริ่มต้นของ SPAs และปรับปรุงประสบการณ์ผู้ใช้โดยรวมได้
• แอปพลิเคชันสำหรับนานาชาติ (Internationalized Applications): การโหลดทรัพยากรเฉพาะภาษา (ข้อความ รูปภาพ ฯลฯ) เมื่อจำเป็นสำหรับภาษาของผู้ใช้เท่านั้น ตัวอย่างเช่น การโหลดคำแปลภาษาเยอรมันสำหรับผู้ใช้ในเยอรมนี และคำแปลภาษาสเปนสำหรับผู้ใช้ในสเปน

ตัวอย่าง: เว็บไซต์อีคอมเมิร์ซระดับนานาชาติ

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

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // ฟังก์ชันสำหรับระบุประเทศของผู้ใช้

  return (
    Loading content for your region...}>
      
      
    
  );
}

สรุป

Lazy loading และ component code splitting เป็นเทคนิคที่มีประสิทธิภาพสำหรับการเพิ่มประสิทธิภาพของแอปพลิเคชัน React ด้วยการโหลดคอมโพเนนต์เมื่อจำเป็นเท่านั้น คุณสามารถลดเวลาในการโหลดเริ่มต้น ปรับปรุงประสบการณ์ผู้ใช้ และเสริมสร้าง SEO ของคุณได้อย่างมาก คอมโพเนนต์ React.lazy() และ <Suspense> ที่มาพร้อมกับ React ทำให้การนำ lazy loading ไปใช้ในโปรเจกต์ของคุณเป็นเรื่องง่าย โอบรับเทคนิคเหล่านี้เพื่อสร้างเว็บแอปพลิเคชันที่เร็วขึ้น ตอบสนองได้ดีขึ้น และน่าดึงดูดยิ่งขึ้นสำหรับผู้ชมทั่วโลก

จำไว้เสมอว่าต้องคำนึงถึงประสบการณ์ของผู้ใช้เมื่อใช้ lazy loading จัดเตรียม UI สำรองที่ให้ข้อมูล จัดการข้อผิดพลาดที่อาจเกิดขึ้นอย่างเหมาะสม และวิเคราะห์ประสิทธิภาพของแอปพลิเคชันของคุณอย่างรอบคอบเพื่อให้แน่ใจว่าคุณบรรลุผลลัพธ์ที่ต้องการ อย่ากลัวที่จะทดลองกับแนวทางต่างๆ และค้นหาโซลูชันที่ดีที่สุดสำหรับความต้องการเฉพาะของคุณ