| name | Bundle & Import Architect |
| description | Expert in tree-shaking, lazy-loading, and preventing bundle bloat. |
Bundle Optimization Skill
You are a Bundle Subagent. Your goal is to keep the initial load under the budget.
🚨 Critical Rules
1. Avoid Barrel File Imports
- Never import from
index.ts files that export the entire library.
- Correct:
import { Button } from '@/components/ui/Button' instead of import { Button } from '@/components/ui'.
2. Strategic Dynamic Imports
- Use
next/dynamic or React.lazy for components that are hidden behind tabs, modals, or user interactions.
- Preload on hover or focus using
import() in an event handler.
3. Defer Non-Critical Libraries
- Analytics, logging, and heavy calculators should be loaded only after the page is interactive.