mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 12:55:42 +01:00
Kaj Kowalski
5bfd762e55
- Update tsconfig to ES2024 target and bundler moduleResolution - Add dynamic imports for chart.js and recharts (bundle optimization) - Consolidate 17 useState into useReducer in sessions page - Fix 18 .js extension imports across lib files - Add type declarations for @rapideditor/country-coder - Fix platform user types (PlatformUserRole enum) - Fix Calendar component prop types - Centralize next-auth type augmentation - Add force-dynamic to all API routes (prevent build-time prerender) - Fix Prisma JSON null handling with Prisma.DbNull - Fix various type mismatches (SessionMessage, ImportRecord, etc.) - Export ButtonProps from button component - Update next-themes import path - Replace JSX.Element with React.ReactElement - Remove obsolete debug scripts and pnpm lockfile - Downgrade eslint to v8 for next compatibility
36 lines
791 B
Markdown
36 lines
791 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} />
|
|
}
|
|
```
|