Code Lazy Loading

React.lazy for components
import React, { lazy, Suspense } from react;

const HeavyComponent = lazy(() => 
  import(./HeavyComponent)
);

function App() {
  return (
     fallback={
Loading...
}>
      
    
  );
}

React Router lazy routes
const Home = lazy(() => import(./pages/Home));
const About = lazy(() => import(./pages/About));
const Dashboard = lazy(() => import(./pages/Dashboard));


   path="/" element={} 
   path="/about" element={} 

Import on demand
async function loadChart() {
  const module = await import(chart.js);
  const chart = new module.default();
  chart.render();
}

Load on user interaction
button.addEventListener(click, async () => {
  const { heavyFunction } = await import(./heavy);
  heavyFunction();
});

Preload on hover
button.addEventListener(mouseenter, () => {
  import(./heavy-module);
});

Webpack magic comments
import(
  /* webpackChunkName: "my-chunk" */
  /* webpackPrefetch: true */
  ./module
);