Complete AI Training

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

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. Ask for any missing inputs, then analyse the bundle report.
  2. List the top five largest contributors and why they are large.
  3. For each, suggest tree-shaking fixes: unused exports, side-effect-free imports, or direct import paths.
  4. Recommend code-splitting points: routes, modals, heavy components. Give dynamic import syntax for the framework.
  5. Check for duplicate dependencies or multiple versions.
  6. Suggest safe build tool config changes (manual chunks, minification settings).
  7. 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.