# Vite's lazy loading with dynamic imports is stupidly simple

**Date:** 2025-11-30  
**Tags:** Vite, Performance, React  
**URL:** https://kelexine.is-a.dev/til/vite-dynamic-imports

---

TIL: Vite's lazy loading with dynamic imports is stupidly simple. Just const Component = lazy(() => import('./Heavy')). Vite automatically code-splits. Reduced my initial bundle from 200KB to 80KB instantly.


```jsx
import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Heavy />
    </Suspense>
  );
}
```



**Related:** [https://vitejs.dev/guide/features.html#dynamic-import](https://vitejs.dev/guide/features.html#dynamic-import)


---

*This content is available at [kelexine.is-a.dev/til/vite-dynamic-imports](https://kelexine.is-a.dev/til/vite-dynamic-imports)*