Bundle Import Architect

Expert in tree-shaking, lazy-loading, and preventing bundle bloat. Use when this capability is needed.

tomevault-io Updated

File contents

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.

Source: AshishOP/arc-protocol — distributed by TomeVault.

tomevault-io/skills-registry/tree/main/ashishop--arc-protocol--arc-protocol commit 82dc4b78fd

Frequently asked questions

npx skillmds@latest add tomevault-io/bundle-import-architect