next/dynamic và phân tích bundle: giảm JavaScript gửi tới client thế nào?

"use client";
import dynamic from "next/dynamic";

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <p>Đang tải biểu đồ...</p>,
  ssr: false, // thư viện đụng window
});

Quy trình tối ưu:

1. Bật analyzer: withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" })(nextConfig), chạy ANALYZE=true next build. (Turbopack có analyzer riêng ở bản mới.)
2. Tìm chunk lớn, như moment, lodash toàn bộ, thư viện chart, editor.
3. Xử lý: import theo hàm (lodash/debounce hoặc lodash-es), thay thư viện nhẹ hơn, dynamic import phần dưới fold/modal.
4. Chuyển phần không tương tác sang Server Component, vì thư viện chỉ dùng ở server không vào bundle client.

• optimizePackageImports trong next.config giúp tree-shake thư viện barrel.
• React.lazy + Suspense cũng dùng được; next/dynamic bổ sung ssr: false.