ไทย

ปลดล็อกความเร็วในการโหลดเริ่มต้นและเพิ่มประสิทธิภาพแอปพลิเคชัน React ของคุณด้วย lazy loading และการแบ่งโค้ดคอมโพเนนต์ เรียนรู้เทคนิคและแนวปฏิบัติที่ดีที่สุด

React Lazy Loading: การแบ่งโค้ดคอมโพเนนต์เพื่อเพิ่มประสิทธิภาพสูงสุด

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

Lazy Loading และ Code Splitting คืออะไร?

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

Code splitting คือกระบวนการแบ่งโค้ดของแอปพลิเคชันของคุณออกเป็นส่วนเล็กๆ ที่จัดการได้ง่ายขึ้น (หรือที่เรียกว่า bundles) ซึ่งช่วยให้เบราว์เซอร์สามารถดาวน์โหลดเฉพาะโค้ดที่จำเป็นสำหรับมุมมองเริ่มต้น และเลื่อนการโหลดโค้ดอื่นๆ ออกไปจนกว่าจะมีความต้องการใช้งานจริง Lazy loading ใช้ประโยชน์จาก code splitting เพื่อโหลดคอมโพเนนต์เฉพาะเมื่อกำลังจะถูกเรนเดอร์เท่านั้น

ทำไมจึงควรใช้ Lazy Loading และ Code Splitting ใน React?

นี่คือเหตุผลที่คุณควรพิจารณาการนำ lazy loading และ code splitting มาใช้ในโปรเจกต์ React ของคุณ:

วิธีการนำ Lazy Loading ไปใช้ใน React

React มีการรองรับ lazy loading ในตัวโดยใช้คอมโพเนนต์ React.lazy และ Suspense นี่คือคำแนะนำทีละขั้นตอน:

1. การใช้ React.lazy()

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


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

ในตัวอย่างนี้ MyComponent จะถูกโหลดเมื่อกำลังจะถูกเรนเดอร์เท่านั้น

2. การห่อหุ้มด้วย <Suspense>

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


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 {alt};
};

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. การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย

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

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

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

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