Trung BìnhReact iconReact

Lazy loading & code splitting trong React. Khi nào cần? Cách implement?

Lazy loading là kỹ thuật chỉ tải component khi thực sự cần thiết, giúp giảm kích thước bundle ban đầu và tăng tốc trang.

  • Cách implement: dùng React.lazy() kết hợp Suspense, ví dụ const Dashboard = lazy(() => import('./Dashboard')) rồi bọc trong <Suspense fallback={<Loading />}>.
  • Thường áp dụng cho route component, modal nặng, hoặc tab ít được xem.
  • Đánh đổi là người dùng sẽ thấy loading delay khi truy cập lần đầu, nhưng bù lại initial load nhanh hơn đáng kể.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React