แก้ไขแล้ว: ตอบสนองการโหลดขี้เกียจของเราเตอร์

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

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

1. นำเข้า React, { Suspense } จาก 'react';
// บรรทัดนี้นำเข้าไลบรารี React และคอมโพเนนต์ Suspense จากไลบรารี React

2. นำเข้า { BrowserRouter as Router, Route, Switch } จาก 'react-router-dom';
// บรรทัดนี้นำเข้าส่วนประกอบ BrowserRouter, Route และ Switch จากไลบรารี react-router-dom

3. const Home = React.lazy(() => import('./Home'));
// บรรทัดนี้สร้างค่าคงที่ที่เรียกว่า Home ซึ่งใช้ฟีเจอร์ Lazy Loading ของ React เพื่อนำเข้าส่วนประกอบที่เรียกว่า Home แบบไดนามิกจากไฟล์ในไดเร็กทอรีเดียวกันกับไฟล์นี้ (ส่วนประกอบของ App)

4. const About = React.lazy(() => import('./About'));
// บรรทัดนี้สร้างค่าคงที่ที่เรียกว่า About ซึ่งใช้การโหลดแบบสันหลังยาวเพื่อนำเข้าส่วนประกอบที่เรียกว่า About จากไฟล์ในไดเร็กทอรีเดียวกันกับไฟล์นี้ (ส่วนประกอบของ App) แบบไดนามิก
const ติดต่อ = React.lazy (() => นำเข้า ('./Contact')); // บรรทัดนี้สร้างค่าคงที่ที่เรียกว่า Contact ซึ่งใช้การโหลดแบบ Lazy Loading เพื่อนำเข้าส่วนประกอบที่เรียกว่า Contact จากไฟล์ในไดเร็กทอรีเดียวกันกับไฟล์นี้ (ส่วนประกอบของ App) แบบไดนามิก

5. แอพฟังก์ชั่น () { กลับ ( // นี่คือฟังก์ชันลูกศรที่ส่งคืนโค้ด JSX ที่ห่อด้วยแท็ก Router ซึ่งนำเข้าก่อนหน้านี้

6.กำลังโหลด ...

}> // แท็ก Suspense นี้ล้อมรอบเส้นทางทั้งหมดของเราด้วยทางเลือกในการโหลด... หากเส้นทางใดใช้เวลาในการโหลด

7. // แท็กสวิตช์จะทำให้แน่ใจว่ามีการแสดงเส้นทางเดียวเท่านั้นในครั้งเดียว

8. // เส้นทางนี้จะแสดงส่วนประกอบหน้าแรกเมื่อเส้นทางที่แน่นอน "/" ตรงกัน

9. // เส้นทางนี้จะแสดง About Component เมื่อเส้นทาง "/ about" ตรงกัน

10. // เส้นทางนี้จะแสดงส่วนประกอบผู้ติดต่อเมื่อเส้นทาง “/contact” ตรงกัน ) } ส่งออกแอปเริ่มต้น; // ในที่สุดเราก็ปิดแท็กทั้งหมดและส่งออกแอปของเรา

ปัญหาการโหลดขี้เกียจ

การโหลดแบบขี้เกียจเป็นเทคนิคที่ใช้เพื่อชะลอการโหลดส่วนประกอบบางอย่างจนกว่าจะจำเป็น สิ่งนี้สามารถช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันได้โดยการโหลดเฉพาะสิ่งที่จำเป็นในเวลาใดก็ตาม อย่างไรก็ตาม นี่อาจเป็นปัญหาเมื่อใช้ React Router เนื่องจากไม่รองรับการโหลดแบบขี้เกียจออกจากกล่อง เมื่อต้องการแก้ไขปัญหานี้ นักพัฒนาต้องกำหนดค่าเส้นทางด้วยตนเองเพื่อเปิดใช้งานการโหลดแบบสันหลังยาว ซึ่งอาจเกี่ยวข้องกับการตั้งค่าการนำเข้าแบบไดนามิกและการแยกโค้ด ซึ่งอาจเป็นงานที่ซับซ้อนและใช้เวลานาน นอกจากนี้ อาจจำเป็นต้องใช้บางไลบรารี เช่น React Loadable เพื่อปรับใช้การโหลดแบบ Lazy Loading กับ React Router ได้อย่างถูกต้อง

React lazy load คืออะไร

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

ฉันจะใช้ React lazy บนเราเตอร์ได้อย่างไร

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

ในการใช้ React lazy บนเราเตอร์ของคุณใน React Router คุณต้องรวมส่วนประกอบที่คุณต้องการโหลดแบบ lazy ในการเรียกนำเข้าแบบไดนามิก ตัวอย่างเช่น:

const MyComponent = React.lazy(() => นำเข้า('./MyComponent'));

จากนั้น เมื่อกำหนดเส้นทางของคุณ ให้ส่งส่วนประกอบ MyComponent ไปยังส่วนประกอบ Route ดังนี้:

สิ่งนี้จะทำให้ React Router โหลดส่วนประกอบ MyComponent แบบไดนามิกเมื่อนำทางไปยังเส้นทางนั้น

กระทู้ที่เกี่ยวข้อง:

แสดงความคิดเห็น