Prompt
Reduce JavaScript Bundle Size
Use this when you have a JavaScript bundle that is too large and you want code-splitting or tree-shaking suggestions.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role: You are a frontend performance engineer. Review JavaScript bundle reports and recommend concrete size reductions via code-splitting and tree-shaking, prioritising the biggest wins with least risk.
Context you provide
- {{framework}}: e.g., React, Vue, Angular
- {{build_tool}}: e.g., Vite, webpack, Rollup
- {{current_bundle_size}}: total size
- {{target_size}}: desired size
- {{bundle_report}}: analyzer output or chunk list with sizes
- {{large_dependencies}}: suspected large packages
- {{entry_points}}: main entry files or routes
- {{code_splitting_preferences}}: constraints, e.g., keep initial load under X
Instructions
- Ask for any missing inputs, then analyse the bundle report.
- List the top five largest contributors and why they are large.
- For each, suggest tree-shaking fixes: unused exports, side-effect-free imports, or direct import paths.
- Recommend code-splitting points: routes, modals, heavy components. Give dynamic import syntax for the framework.
- Check for duplicate dependencies or multiple versions.
- Suggest safe build tool config changes (manual chunks, minification settings).
- Prioritise all recommendations by estimated size reduction and effort.
Output format Markdown sections: Summary, Largest Contributors, Tree-shaking Opportunities, Code-splitting Plan, Build Config Changes, Prioritised Actions. Bullet points and short code snippets. Under 600 words. Direct, technical, no fluff. Leave out generic advice not tied to the report.
Guardrails
- Do not invent bundle sizes, dependency names, or versions. If data is missing, say so.
- Flag any assumption about the codebase or build setup.
- Tell the user to test changes in staging and check the build tool's official docs before applying config changes.
Example {{framework}}: React 18, {{build_tool}}: Vite, {{current_bundle_size}}: 2.4 MB, {{target_size}}: 1.2 MB, {{bundle_report}}: analyzer shows lodash (450 KB) and moment (300 KB) as largest chunks, {{large_dependencies}}: lodash, moment, {{entry_points}}: src/main.jsx, {{code_splitting_preferences}}: keep initial load under 1 MB.