bundle-optimization_skill

Overview

This skill is a Bundle & Import Architect focused on minimizing initial bundle size by enforcing import discipline and applying strategic lazy-loading. It guides developers to remove hidden costs from the critical path and provides concrete tactics to prevent bundle bloat. The goal is predictable, fast initial loads within a defined budget.

How this skill works

The skill inspects code imports and component usage to find barrel-file (index.ts) anti-patterns, large third-party libraries loaded on the critical path, and components that are good candidates for dynamic import. It recommends concrete fixes: direct file imports, next/dynamic or React.lazy for interaction-driven UI, and deferring non-critical libraries until after hydration. It also suggests preload and prefetch actions like import() on hover or focus.

When to use it

• When initial page load exceeds performance budget or Lighthouse score is low
• During code reviews to prevent new bundle bloat from PRs
• When adding third-party libraries (analytics, charts, machine learning)
• While refactoring UI into modular components or feature routes
• Before release to ensure first-byte and interactive times meet targets

Best practices

• Never import from barrel/index files that export the whole module; import specific files directly
• Wrap UI behind tabs, modals, and optional flows with next/dynamic or React.lazy
• Defer analytics, logging, and heavy calculators until after page interactive (use dynamic import or load on idle)
• Preload user-intent resources on hover/focus with import() to keep critical path small but responsive
• Measure with bundle analyzers and set strict budgets in CI to catch regressions early

Example use cases

• Convert a shared UI library import from '@/components/ui' to per-component imports to drop KBs from initial load
• Lazy-load a large chart component inside a dashboard tab using next/dynamic so charts load only when viewed
• Delay loading an analytics SDK until after first interaction to improve TTI
• Audit a repository to flag barrel imports and heavy direct imports in entry points
• Implement hover-triggered preload for a modal-heavy checkout flow to preserve snappy UX