Dynamic import() và code splitting: cách implement hiệu quả?

Dynamic import() tạo chunk riêng — route-based splitting với React.lazy() là chiến lược đầu tiên; dùng / webpackPrefetch: true / để load trong idle time; chunks nên ít nhất 20-30KB gzipped để tránh HTTP overhead.

Dynamic import() là foundation của code splitting — trả về Promise, bundler tự tạo chunk file riêng. Route-based splitting (phổ biến nhất): React Router với React.lazy: const Dashboard = React.lazy(() => import('./pages/Dashboard')) wrapped trong <Suspense fallback={<Spinner/>}>. Next.js App Router tự động code split theo route — không cần config thêm. Component-based splitting — heavy components: const RichEditor = lazy(() => import('@/components/RichEditor')) cho TipTap, Quill editor (~500KB). Library splitting — chart libraries: const ChartComponent = dynamic(() => import('./ChartWrapper'), { ssr: false }) trong Next.js với ssr: false cho browser-only libraries. Prefetching để reduce latency: Webpack magic comments: import(/ webpackPrefetch: true / './HeavyPage') — browser load trong idle time khi user hovering link; / webpackPreload: true / cho resources cần ngay. Named chunks để caching: import(/ webpackChunkName: 'admin' / './AdminDashboard') → admin.abc123.js — caching tốt hơn 1.abc123.js. Granular imports: import('@sentry/browser').then(sentry => sentry.init(...)) — load Sentry sau khi app render xong (không block LCP). Pitfall: quá nhiều chunks nhỏ tăng HTTP round-trips; HTTP/2 multiplexing giảm nhưng không eliminate overhead — chunks nên ít nhất 20-30KB gzipped.