Use Autohand Code with performance skill guidance to inspect bundle output, imports, lazy loading, and route-level code splitting.
Find and remove avoidable client-side weight
Performance Quality and review Verification Performance
autohand -p "Find the biggest avoidable frontend bundle costs and make one safe reduction"
A measured bundle reduction with preserved behavior and build evidence.
Reduce frontend bundle size with Autohand Code is a frontend performance workflow that identifies avoidable bundle weight, expensive imports, missing lazy boundaries, and route-level code splitting opportunities. ### At a glance | Question | Answer | | --- | --- | | Best for | large JavaScript chunks, slow route loads, repeated heavy imports, and build warnings about bundle size | | Primary inputs | Build output, bundle analyzer data, or chunk warning; Affected routes and user flow; Performance budget and validation command | | Autohand Code returns | A measured bundle reduction with preserved behavior and build evidence. | | Avoid when | there is no measurement baseline or the performance issue is server-side latency | ### How Autohand Code handles this workflow 1. Reads build output and maps heavy chunks to imports or route boundaries. 2. Chooses one low-risk reduction with measurable impact. 3. Preserves behavior and loading states while changing imports or lazy boundaries. 4. Runs the build and records before-and-after evidence. ### Best inputs - Build output, bundle analyzer data, or chunk warning - Affected routes and user flow - Performance budget and validation command ### Strong prompt autohand -p "Find the biggest avoidable frontend bundle costs and make one safe reduction" ### Autohand Code CLI options - Use `/skills use performance-optimization` for profiling and reduction patterns. - Run `autohand -p "Find the biggest avoidable frontend bundle costs and make one safe reduction"` with build output. - Use `/review` after the patch to catch loading, SSR, or hydration regressions. ### Review before accepting Review chunk sizes, changed imports, route behavior, and a passing build or analyzer result. ### Source and validation signals Autohand AI maintains this workflow as first-party product guidance for Autohand Code. Use the [Autohand CLI Playbook](https://github.com/autohandai/code-cli/blob/main/docs/AUTOHAND_PLAYBOOK.md), [CLI reference](/docs/working-with-autohand-code/cli-reference.html), and [configuration reference](https://github.com/autohandai/code-cli/blob/main/docs/config-reference.md) when choosing between interactive mode, command mode, auto-mode, feature-enabled /goal, /settings, skills, MCP, and permission settings. The related resources below link to product docs and tutorials for the workflow, and the final answer should name repository-specific files, commands, outputs, or docs that a reviewer can verify. ### Frequently asked questions ### What is Reduce frontend bundle size with Autohand Code? Reduce frontend bundle size with Autohand Code is a frontend performance workflow that identifies avoidable bundle weight, expensive imports, missing lazy boundaries, and route-level code splitting opportunities. ### When should a team use Reduce frontend bundle size? Use it when frontend performance is limited by code shipped to the browser. ### What evidence should reviewers check for Reduce frontend bundle size? Review chunk sizes, changed imports, route behavior, and a passing build or analyzer result.
Skill Skilled: Performance Optimization Use frontend and application performance patterns. https://skilled.autohand.ai/skill/performance-optimization Guide Cost Optimization Tie expensive work to measurable savings. /docs/guides/cost-optimization.html Reference Plan Mode Plan risk before changing shared runtime behavior. /docs/working-with-autohand-code/plan-mode.html