Suspense, React.lazy và code-splitting dùng thế nào?

const Chart = lazy(() => import("./Chart")); // Chart phải export default

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <Chart />
    </Suspense>
  );
}

• Bundler (Vite/Webpack) tách import() thành chunk riêng, tải khi component được render.
• Suspense bắt “promise đang chờ” của các con bên dưới (lazy, và data fetching tương thích như React Query suspense, use).
• Có thể đặt nhiều Suspense lồng nhau để mỗi vùng có fallback riêng, tránh cả trang trắng.
• Prefetch: gọi import("./Chart") khi hover vào link để chunk có sẵn trước khi click.