mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 13:55:42 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
35 lines
795 B
Markdown
35 lines
795 B
Markdown
---
|
|
title: Dynamic Imports for Heavy Components
|
|
impact: CRITICAL
|
|
impactDescription: directly affects TTI and LCP
|
|
tags: bundle, dynamic-import, code-splitting, next-dynamic
|
|
---
|
|
|
|
## Dynamic Imports for Heavy Components
|
|
|
|
Use `next/dynamic` to lazy-load large components not needed on initial render.
|
|
|
|
**Incorrect (Monaco bundles with main chunk ~300KB):**
|
|
|
|
```tsx
|
|
import { MonacoEditor } from "./monaco-editor";
|
|
|
|
function CodePanel({ code }: { code: string }) {
|
|
return <MonacoEditor value={code} />;
|
|
}
|
|
```
|
|
|
|
**Correct (Monaco loads on demand):**
|
|
|
|
```tsx
|
|
import dynamic from "next/dynamic";
|
|
|
|
const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), {
|
|
ssr: false,
|
|
});
|
|
|
|
function CodePanel({ code }: { code: string }) {
|
|
return <MonacoEditor value={code} />;
|
|
}
|
|
```
|