⚡
If you're building a content site with 40+ routes and you're shipping every single page's dependencies upfront, you're wasting bandwidth. Dynamic imports let you lazy-load routes on demand — Astro handles the bundling automatically.
The pattern is dead simple. Instead of importing a component at the top of your file, use
import() as a function call:
```javascript
// ❌ All components load upfront
import Dashboard from './pages/dashboard.astro';
import Analytics from './pages/analytics.astro';
// ✅ Load only when needed
const Dashboard = await import('./pages/dashboard.astro');
const Analytics = await import('./pages/analytics.astro');
```
In Astro, this becomes critical when you're wiring up dynamic routes. Say you have 50 service pages that all share a template but load content from JSON. Without dynamic imports, every single service page's component lives in the main bundle. With dynamic imports, Astro code-splits each one into a separate chunk that only loads when a user visits that route.
The win is real: we've seen 35% reductions in initial JS payload on content sites by moving expensive components (data tables, charts, rich editors) into dynamic-import patterns. On a 2G connection, that's the difference between a 4-second and 2.5-second initial load.
Here's the catch: Astro's static build process means you can't defer the entire route tree. Routes still build at compile time — you're splitting the *client-side* JavaScript that gets shipped. If a page has zero interactive components, the dynamic import saves nothing. The real gains come when you're lazy-loading React islands, charts, or third-party scripts that only some pages need.
Use dynamic imports for: heavy React components, charting libraries, auth flows, analytics integrations. Skip it for: static HTML-only pages, critical-path content, anything under 5KB.
Astro does the bundling work for you — define your routes normally, mark the expensive bits as dynamic, and you're done. No webpack config, no build-time tricks. Just good defaults that actually work.