M
MLOG
React Lazy Loading: เพิ่มประสิทธิภาพด้วยการแบ่งโค้ดคอมโพเนนต์ (Component Code Splitting) | MLOG | MLOG}> ); } export default App;

ในตัวอย่างนี้ คอมโพเนนต์ Home, About และ Contact ถูกทำ lazy load เมื่อผู้ใช้ไปยัง route ที่ระบุ คอมโพเนนต์ที่เกี่ยวข้องจะถูกโหลดแบบอะซิงโครนัส คอมโพเนนต์ Suspense จะช่วยให้แน่ใจว่ามีการแสดงตัวบ่งชี้การโหลดในขณะที่กำลังดึงคอมโพเนนต์

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

Error Boundaries

Error boundaries คือ React component ที่ดักจับข้อผิดพลาด JavaScript ที่เกิดขึ้นที่ใดก็ได้ใน component tree ของมัน, บันทึกข้อผิดพลาดเหล่านั้น, และแสดง UI สำรองแทนที่ component tree ที่พังไป คุณสามารถใช้มันเพื่อจัดการข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการโหลดคอมโพเนนต์ที่ทำ lazy load อย่างนุ่มนวล


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

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

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

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

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

    return this.props.children; 
  }
}

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

function App() {
  return (
    
      Loading...}>
        
      
    
  );
}

export default App;

ในตัวอย่างนี้ คอมโพเนนต์ ErrorBoundary จะห่อหุ้มคอมโพเนนต์ Suspense หากมีข้อผิดพลาดเกิดขึ้นระหว่างการโหลดหรือการ render ของ MyComponent ตัว ErrorBoundary จะดักจับข้อผิดพลาดและแสดง UI สำรอง

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Lazy Loading

ตัวอย่างการใช้งานในอุตสาหกรรมต่างๆ

ประโยชน์ของ React lazy loading และ code splitting ครอบคลุมอุตสาหกรรมต่างๆ นี่คือตัวอย่างบางส่วน:

นอกเหนือจาก React.lazy และ Suspense

แม้ว่า React.lazy และ Suspense จะเป็นวิธีที่ตรงไปตรงมาในการทำ lazy loading แต่ก็มีไลบรารีและเทคนิคอื่นๆ ที่สามารถให้ฟีเจอร์และการควบคุมที่สูงขึ้น:

สรุป

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

ยอมรับพลังของ lazy loading และปลดล็อกศักยภาพของเว็บแอปพลิเคชันที่เร็วขึ้น มีประสิทธิภาพมากขึ้น และเป็นมิตรกับผู้ใช้มากขึ้น