Chia bundle bằng `lazy` + `Suspense` nên đặt ranh giới ở đâu? Đặt sai gây vấn đề gì?

lazy biến một import tĩnh thành import() động, tạo chunk riêng chỉ tải khi component được render lần đầu.

const Editor = lazy(() => import('./Editor'))

<Suspense fallback={<EditorSkeleton />}>
  {isEditing && <Editor />}
</Suspense>

Ranh giới nên chọn:
- Theo route — mặc định hợp lý nhất, người dùng chỉ tải code trang đang xem.
- Component nặng, ít dùng — rich text editor, chart library, map, modal phức tạp, code viewer.
- Nhánh theo điều kiện — giao diện admin, tab hiếm khi mở.

Đặt sai thì:
- Chia quá nhỏ — hàng chục chunk vài KB, tăng số request và overhead, tổng thời gian tải xấu hơn.
- lazy cho component luôn hiển thị ngay — chỉ đổi từ tải một lần thành tải hai chặng (waterfall), màn hình nhấp nháy skeleton vô ích.
- Khai báo lazy bên trong component — mỗi lần render tạo một kiểu component mới → React unmount/mount lại, mất state và tải lại. Luôn khai báo ở top-level module.
- Không có Suspense bao ngoài hoặc fallback khác chiều cao nội dung thật → layout shift.

Kèm theo: preload khi người dùng hover/focus vào nút mở, để chunk có sẵn lúc thực sự cần.