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

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

Prefetch

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