Lazy Loading trong React: Cải thiện hiệu suất với import động

Tải chậm (lazy loading) trong React cho phép bạn tối ưu hiệu suất của ứng dụng bằng cách chia nhỏ mã nguồn (code splitting). Thay vì tải toàn bộ ứng dụng ngay từ đầu, kỹ thuật này chỉ tải những phần mã cần thiết khi người dùng thực sự cần đến. Điều này có thể cải thiện đáng kể thời gian tải ban đầu của ứng dụng.

React cung cấp hai tính năng chính để thực hiện lazy loading: React.lazy() để import động và React.Suspense để xử lý trạng thái đang tải.

Lazy Loading trong React là gì?

Lazy loading giúp chia nhỏ ứng dụng của bạn thành các phần nhỏ hơn (chunks) để chỉ tải mã nguồn khi cần thiết. React cho phép bạn import component một cách động — chỉ khi nó sắp được render.

Tại sao Lazy Loading lại quan trọng?

• Cải thiện thời gian tải ban đầu: Bằng cách chỉ tải mã cần thiết, bạn giảm thiểu dung lượng phải tải lúc đầu.
• Trải nghiệm người dùng tốt hơn: Giúp thời gian hiển thị ban đầu nhanh hơn và mượt mà hơn, đặc biệt là với ứng dụng lớn.

Lazy Loading hoạt động như thế nào trong React?

React sử dụng React.lazy() để import các component một cách động. Tuy nhiên, React không tự xử lý trạng thái "đang tải" — đó là nhiệm vụ của React.Suspense, cho phép bạn chỉ định một giao diện chờ (fallback UI) khi component đang được tải.

Ví dụ từng bước

1. Tạo một component để tải chậm

// Products.js
import React from 'react';

const Products = () => {
  return <div>This is a lazy-loaded component!</div>;
};

export default Products;

2. Sử dụng React.lazy() để import động

const Products = React.lazy(() => import("./components/products/Products"));

3. Bao bọc component bằng Suspense

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import PageNotFound from "./components/PagenotFound/PageNotFound";
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
import Home from "./components/Home/Home";

const Products = React.lazy(() => import("./components/products/Products"));

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="/" element={<Home />} />
      <Route
        path="products"
        element={
          <React.Suspense fallback={<div>Loading...</div>}>
            <Products />
          </React.Suspense>
        }
      />
      <Route path="*" element={<PageNotFound />} />
    </Route>
  )
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={router} />);

Giải thích:

• Component Products được import động với React.lazy().
• React.Suspense được sử dụng để hiển thị nội dung tạm thời (<div>Loading...</div>) trong khi Products đang tải.

4. Truy cập vào route để thấy Lazy Loading hoạt động

Khi người dùng truy cập route /products, component Products mới được tải về và render. Điều này giúp giảm tải dữ liệu ban đầu và tăng tốc độ load trang.

Lưu ý quan trọng

Thuộc tính fallback trong Suspense: Đây là thuộc tính bắt buộc. Nó xác định giao diện hiển thị trong lúc component đang được tải. Bạn có thể tùy biến giao diện chờ này, như hiển thị spinner hoặc hiệu ứng skeleton.

Tải chậm nhiều component: Bạn có thể sử dụng React.lazy() và Suspense cho nhiều phần khác nhau trong ứng dụng.

Kết luận

Lazy loading là một kỹ thuật đơn giản nhưng cực kỳ hiệu quả giúp cải thiện hiệu suất của ứng dụng React. Với React.lazy() và React.Suspense, bạn có thể kiểm soát việc tải component một cách tối ưu, giảm thời gian tải ban đầu và nâng cao trải nghiệm người dùng.

Hãy áp dụng lazy loading vào ứng dụng của bạn ngay hôm nay để cảm nhận sự khác biệt về hiệu suất!