c86c93582e
- Add 8 new skills (62 total, up from 58) - Official Anthropic skills: docx, pdf, pptx, xlsx, brand-guidelines, internal-comms - Vercel Labs skills: react-best-practices, web-design-guidelines - Implement dual-versioning: -official/-anthropic and -community suffixes - Update README with new skill registry and credits - Regenerate skills_index.json (62 skills validated) - Add comprehensive walkthrough.md BREAKING CHANGE: Document skills (docx/pdf/pptx/xlsx) renamed with version suffixes
32 lines
866 B
Markdown
32 lines
866 B
Markdown
---
|
|
title: Conditional Module Loading
|
|
impact: HIGH
|
|
impactDescription: loads large data only when needed
|
|
tags: bundle, conditional-loading, lazy-loading
|
|
---
|
|
|
|
## Conditional Module Loading
|
|
|
|
Load large data or modules only when a feature is activated.
|
|
|
|
**Example (lazy-load animation frames):**
|
|
|
|
```tsx
|
|
function AnimationPlayer({ enabled }: { enabled: boolean }) {
|
|
const [frames, setFrames] = useState<Frame[] | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (enabled && !frames && typeof window !== 'undefined') {
|
|
import('./animation-frames.js')
|
|
.then(mod => setFrames(mod.frames))
|
|
.catch(() => setEnabled(false))
|
|
}
|
|
}, [enabled, frames])
|
|
|
|
if (!frames) return <Skeleton />
|
|
return <Canvas frames={frames} />
|
|
}
|
|
```
|
|
|
|
The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.
|