Code splitting trong React thực hiện thế nào? Lazy loading routes?

Code splitting tách bundle thành nhiều chunks nhỏ, chỉ load khi cần — giảm đáng kể initial bundle size.

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
// Bọc trong Suspense:
<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

Cho routes: lazy load từng page component.

Webpack/Vite tự động tách chunk tại dynamic import boundaries.

React.lazy(() => import('./HeavyComponent')) combined with <Suspense fallback={<Loading/>}>.

• For routes: lazy-load each page component.
• This significantly reduces the initial bundle size.
• Works with Webpack/Vite which automatically split chunks at dynamic import boundaries.