Lazy Loading trong React

Lazy Loading trong React

Các ứng dụng React lớn tạo ra các bundle JavaScript khổng lồ. Các bundle lớn làm chậm trang web của bạn. Người dùng phải chờ đợi lâu hơn để tương tác với ứng dụng. Điều này gây ảnh hưởng xấu đến trải nghiệm người dùng.

Lazy loading giải quyết vấn đề này. Nó chỉ tải các component khi người dùng cần đến chúng. Bạn sẽ không còn phải tải mọi thứ cùng một lúc nữa.

Lợi ích của lazy loading:

• Kích thước bundle ban đầu nhỏ hơn
• Tốc độ tải trang nhanh hơn
• Trải nghiệm người dùng tốt hơn
• Sử dụng ít băng thông hơn
• Cải thiện các chỉ số Core Web Vitals

Cách sử dụng React.lazy() React cung cấp một hàm gọi là lazy() để import các component một cách linh hoạt (dynamically). React chỉ tải mã nguồn khi nó render component đó.

Ví dụ mã nguồn: import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

Bạn phải sử dụng Suspense cùng với các lazy component. Suspense sẽ hiển thị một giao diện dự phòng (fallback UI) trong khi component đang được tải.

Ví dụ mã nguồn: import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() { return ( <Suspense fallback={

}> ); }

Hai quy tắc để thành công:

• Các component của bạn phải sử dụng default exports.
• Khai báo các lazy import bên ngoài các hàm component.

Bạn có sử dụng lazy loading trong các dự án của mình không? Hãy để lại bình luận bên dưới. Tôi sẽ phản hồi bạn.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk