Description

You always want to reduce bandwidth, to do this, you should code split to avoid sending unused code.
?

Reach for when

You have routes, feature flags, or deeply nested code that does not always get reached.

Code

Lazy load

const Dashboard = React.lazy(() => import('./Dashboard'));
<Suspense fallback={<PageSkeleton />}>
  <Route path="/dashboard" component ={Dashboard} />
</Suspense>

Prefetch

onMouseEnter={() => import('./Dashboard')}