| name | performance-lazy-loading |
| description | null |
Lazy Loading
Category: performance · Status: 🟢 Active
When to use
Khi muốn giảm bundle ban đầu: hoãn tải route, component nặng, modal, ảnh dưới màn hình.
Steps
- Dùng
React.lazy + Suspense cho component nặng/ít dùng; bọc fallback hợp lý.
- Tách route bằng dynamic import (Next.js:
next/dynamic, React Router: lazy route).
- Lazy ảnh:
loading="lazy", next/image tự tối ưu; đặt width/height tránh CLS.
- Prefetch khi hover/visible cho phần khả năng dùng cao để tránh trễ.
- Tránh lazy phần ngay above-the-fold (gây nhấp nháy/chậm cảm nhận).
Template
const Chart = lazy(() => import('./Chart'));
<Suspense fallback={<Spinner />}><Chart data={data} /></Suspense>
const Map = dynamic(() => import('./Map'), { ssr: false, loading: () => <Skeleton /> });
Example
Good: lazy modal/editor, ảnh loading="lazy" có kích thước cố định.
Avoid: lazy hero above-the-fold, Suspense không fallback.
Checklist