fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
795 B
795 B
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Dynamic Imports for Heavy Components | CRITICAL | directly affects TTI and LCP | 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):
import { MonacoEditor } from './monaco-editor';
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />;
}
Correct (Monaco loads on demand):
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} />;
}