คู่มือการโหลดแบบขี้เกียจด้วย React

บทนำ

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

เราสามารถหลีกเลี่ยงการโหลดเนื้อหาล่วงหน้าในขณะที่ยังมองไม่เห็น และเน้นทรัพยากรทั้งหมดไปที่เนื้อหาที่อยู่ในมุมมอง

ในคู่มือนี้เราจะมาดูวิธีการใช้งาน React.lazy() และ React.Suspense เพื่อใช้ฟังก์ชันการโหลดแบบ Lazy Loading และการแยกโค้ดที่ช่วยให้เราจัดการการแยกโค้ดโดยไม่จำเป็นต้องติดตั้งไลบรารี่เพิ่มเติม

Lazy Loading คืออะไร?

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

โหลดขี้เกียจ ช่วยให้เราโหลดส่วนประกอบเฉพาะเมื่อจำเป็นเท่านั้น โดยปกติเรายังดำเนินการ การแยกรหัส เป็นองค์ประกอบเชิงตรรกะที่สามารถโหลดเนื้อหาแบบสันหลังยาวได้เช่นกัน

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

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

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

หมายเหตุ แอปพลิเคชั่นหน้าเดียว (สปา) ได้รับการออกแบบให้มีหน้าและเนื้อหาทั้งหมดภายในเอกสาร/หน้าเดียว นั่นเป็นสาเหตุที่การโหลดแบบ Lazy Loading มีประโยชน์อย่างยิ่งเมื่อพัฒนา SPA

วิธีใช้งาน Lazy Loading ใน React

จนถึงตอนนี้ เราได้เห็นแล้วว่าการโหลดแบบ Lazy Loading คืออะไร และเหตุใดจึงสำคัญที่ต้องนำไปใช้ ตอนนี้ มาดูกันว่าเราจะใช้มันในแอปพลิเคชัน React ของเราได้อย่างไร โดยใช้คุณสมบัติ React สองคุณสมบัติที่ทำให้การแยกโค้ดและการโหลดแบบ Lazy Loading เป็นเรื่องง่าย – React.ขี้เกียจ() และ ปฏิกิริยาใจจดใจจ่อ.

React.lazy() เป็นฟังก์ชันที่ช่วยให้เราเรนเดอร์ได้ การนำเข้าแบบไดนามิก ในลักษณะเดียวกับส่วนประกอบปกติ การใช้การนำเข้าแบบไดนามิกควบคู่ไปกับ React.lazy() จะทำให้เราสามารถนำเข้าส่วนประกอบก่อนที่จะแสดงผลบนหน้าจอ สิ่งสำคัญที่ควรทราบคือ React.lazy() ยอมรับฟังก์ชันเป็นอาร์กิวเมนต์ – ฟังก์ชันนั้นต้องเรียกไดนามิก import() ในร่างกายของมัน

React.Suspense ทำให้เราสามารถระบุ fallback . ได้ ประคับประคอง ซึ่งใช้เนื้อหาตัวยึดตำแหน่งที่จะใช้เป็น ตัวบ่งชี้กำลังโหลด ในขณะที่ส่วนประกอบที่ขี้เกียจทั้งหมดถูกโหลด

มาเริ่มกันโดยดูว่าเราสามารถปรับใช้การโหลดแบบ Lazy Loading ในส่วนประกอบที่นำเข้าของเราได้อย่างไร และจากนั้นเราจะปรับใช้ได้อย่างไรในเส้นทางของเราเพื่อไม่ให้หน้าโหลดจนกว่าเราจะนำทางไปยังหน้าเหล่านั้น

เริ่มต้นใช้งาน

สมมติว่าเรามีแอปพลิเคชั่น React และเรานำเข้า About ส่วนประกอบใน Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

ตอนนี้เราสามารถโหลดแบบ Lazy Loading ได้โดยการใช้ React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

หมายเหตุ React.lazy() ใช้วิธีนี้ส่งคืน a Promise วัตถุ. คำมั่นสัญญานั้นแก้ไขเป็นโมดูลที่มีส่วนประกอบ React ที่เราต้องการโหลดแบบสันหลังยาวในนั้น default ส่งออก.

เราได้ใช้การโหลดแบบ Lazy Loading โดยใช้ React.lazy()แต่โค้ดด้านบนจะโยน an . เสมอ ความผิดพลาด บอกว่าเรา “React component suspended while rendering, but no fallback UI was specified”. ซึ่งสามารถแก้ไขได้โดยห่อส่วนประกอบด้วย React.Suspense's fallbackz และแนบอุปกรณ์สำรองตามที่เราอธิบายไว้ก่อนหน้านี้:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

หมายเหตุ อุปกรณ์สำรองสามารถใช้องค์ประกอบเพื่อแสดงก่อนที่เนื้อหาต้นฉบับจะโหลดขึ้น

นอกจากนี้ เรายังตัดสินใจได้ว่า การทำลายล้าง การนำเข้า React เพื่อทำให้โค้ดสะอาดขึ้นและอ่านง่ายขึ้น:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

จนถึงตอนนี้ เราได้เห็นวิธีการใช้การโหลดแบบ Lazy Loading ในส่วนประกอบที่นำเข้าของเราแล้ว ตอนนี้เรามาดูวิธีใช้งานในเส้นทางของเราขณะกำหนดเส้นทางด้วยเราเตอร์ React

วิธีการใช้ Lazy Loading ด้วย React Router

Lazy Routing เป็นแนวทางปฏิบัติที่ดีสำหรับเส้นทางที่มีเนื้อหาจำนวนมาก และอาจทำให้โหลดแอปพลิเคชันของคุณช้าลง การใช้การโหลดแบบ Lazy Loading สำหรับเส้นทาง React นั้นเกือบจะเหมือนกับสิ่งที่เราทำก่อนหน้านี้เมื่อ Lazy Loading นำเข้าส่วนประกอบแบบไดนามิก

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

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

สรุป

ในคู่มือนี้ เราได้เรียนรู้ว่าการโหลดแบบ Lazy Loading และการแยกโค้ดคืออะไร วิธีใช้งาน และการโหลดแบบ Lazy Loading ที่ดีที่สุดคือเส้นทาง วิธีนี้จะช่วยหลีกเลี่ยงการแสดงทั้งหน้าพร้อมกัน ซึ่งอาจส่งผลให้เวลาในการโหลดช้าลงเมื่อต้องจัดการกับหน้าที่มีเนื้อหาจำนวนมาก