Nicholai/dashore-incubator
1
0
Fork 0
mirror of https://github.com/NicholaiVogel/dashore-incubator.git synced 2026-03-30 22:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
dashore-incubator/.agents/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
Nicholai 827f13a2db feat(skills): add agent skills for claude code 
add web-perf and vercel-react-best-practices skills from skills.sh
to improve ai assistance for this next.js + cloudflare workers project.

- web-perf: core web vitals analysis and performance auditing
- vercel-react-best-practices: react/next.js optimization patterns
- wrangler: cloudflare workers cli guidance (already existed)
2026-01-22 11:40:05 -07:00

791 B
Raw Blame History

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} />
}