1---
2title: Dynamic Imports for Heavy Components
3impact: CRITICAL
4impactDescription: directly affects TTI and LCP
5tags: bundle, dynamic-import, code-splitting, next-dynamic
6---
7 
8## Dynamic Imports for Heavy Components
9 
10Use `next/dynamic` to lazy-load large components not needed on initial render.
11 
12**Incorrect (Monaco bundles with main chunk ~300KB):**
13 
14```tsx
15import { MonacoEditor } from './monaco-editor'
16 
17function CodePanel({ code }: { code: string }) {
18  return <MonacoEditor value={code} />
19}
20```
21 
22**Correct (Monaco loads on demand):**
23 
24```tsx
25import dynamic from 'next/dynamic'
26 
27const MonacoEditor = dynamic(
28  () => import('./monaco-editor').then(m => m.MonacoEditor),
29  { ssr: false }
30)
31 
32function CodePanel({ code }: { code: string }) {
33  return <MonacoEditor value={code} />
34}
35```
36