Bundle Optimization

What it does

This skill documents concrete techniques to reduce frontend bundle size and keep builds within a performance budget. It covers a proven icon-manifest approach to avoid wildcard icon imports, tree-shaking strategies (named imports), dynamic imports for heavy components, route/code splitting, size-limit enforcement, and CI integration for automated checks. The guide includes code snippets, build hooks, and a recommended optimization workflow.

When to use it

Use this skill when auditing or reducing a web app's client-side bundle size — for instance before production deploys, when adding a large dependency, or when investigating unexpectedly large chunks in bundle analysis. It also serves as a checklist for CI gating and pre-merge reviews.

What's included

• Scripts: references to build-time scripts (icon manifest generator, build hooks) though the discovered path had no explicit scripts folder (has_scripts=false).
• References: practical examples, config locations (next.config.ts, package.json size limits), and analyzer commands for local and CI use.
• Instructions: stepwise workflow including enabling bundle analyzer, running size checks, identifying large chunks, and applying fixes (named imports, dynamic imports, removing dev deps, deduplicating packages).

Compatible agents

Front-end focused agents or developer tools that can inspect code and suggest changes (Claude Code, Copilot-style tools, local CI automation).