Lazy loading & code splitting trong React. Khi nào cần? Cách implement?

Lazy loading là kỹ thuật chỉ tải component khi thực sự cần thiết, giúp giảm kích thước bundle ban đầu và tăng tốc trang.

• Cách implement: dùng React.lazy() kết hợp Suspense, ví dụ const Dashboard = lazy(() => import('./Dashboard')) rồi bọc trong <Suspense fallback={<Loading />}>.
• Thường áp dụng cho route component, modal nặng, hoặc tab ít được xem.
• Đánh đổi là người dùng sẽ thấy loading delay khi truy cập lần đầu, nhưng bù lại initial load nhanh hơn đáng kể.

Lazy loading only loads a component when it is actually needed, reducing the initial bundle size and speeding up the page.

• Implementation: use React.lazy() with Suspense — e.g., const Dashboard = lazy(() => import('./Dashboard')) wrapped in <Suspense fallback={<Loading />}>.
• Apply to route-level components, heavy modals, or rarely-viewed tabs.
• The tradeoff is a loading delay on first visit, but the initial page load is significantly faster.