How do I use the "Optimize JavaScript Bundle Size" prompt?

Copy the prompt template, fill in the variables (FRAMEWORK, BUNDLE_TOOL, CURRENT_SIZE, TARGET_SIZE, DEPENDENCIES), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this coding prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Run bundle analyzer tools like webpack-bundle-analyzer before optimization to identify the biggest opportunities Focus on the largest dependencies first - replacing one heavy library often has more impact than multiple small optimizations Test bundle changes in staging with real user scenarios to ensure code splitting doesn't hurt user experience Set up automated bundle size monitoring in CI/CD to prevent regression Consider the trade-off between bundle size and number of HTTP requests when implementing code splitting

coding intermediate

Optimize JavaScript Bundle Size

AI prompt to analyze and reduce JavaScript bundle size. Get actionable recommendations for faster web performance and better UX.

Works with: chatgptclaudegemini

Prompt Template

You are an expert frontend performance engineer specializing in bundle optimization. I need you to analyze my JavaScript bundle configuration and provide specific recommendations to reduce bundle size. Here's my project information: - Framework: [FRAMEWORK] - Bundle tool: [BUNDLE_TOOL] - Current bundle size: [CURRENT_SIZE] - Target bundle size: [TARGET_SIZE] - Key dependencies: [DEPENDENCIES] Please analyze and provide: 1. **Immediate Quick Wins**: Identify 3-5 specific optimizations I can implement today to reduce bundle size, with estimated size savings for each. 2. **Dependency Analysis**: Review my key dependencies and suggest: - Lighter alternatives where applicable - Which dependencies might be bloating the bundle - Opportunities for tree-shaking improvements 3. **Code Splitting Strategy**: Provide a specific code splitting plan including: - Route-based splitting opportunities - Component-level splitting recommendations - Lazy loading implementation suggestions 4. **Build Configuration**: Suggest specific webpack/bundler configuration improvements for: - Tree-shaking optimization - Dead code elimination - Compression settings - Module federation opportunities (if applicable) 5. **Measurement Plan**: Provide specific tools and metrics to track bundle size improvements over time. Format your response with clear priorities, implementation difficulty levels, and expected impact. Include code examples where helpful.

Variables to Customize

[FRAMEWORK]

The JavaScript framework being used

Example: React 18 with TypeScript

[BUNDLE_TOOL]

The bundling tool and version

Example: Webpack 5.75

[CURRENT_SIZE]

Current bundle size

Example: 2.8MB (850KB gzipped)

[TARGET_SIZE]

Desired bundle size goal

Example: Under 1.5MB (500KB gzipped)

[DEPENDENCIES]

Major dependencies that might impact bundle size

Example: lodash, moment.js, material-ui, axios, recharts

Example Output

## Bundle Optimization Analysis ### Immediate Quick Wins (Est. 600KB savings) 1. **Replace moment.js with date-fns** (-280KB) - moment.js is adding significant weight - date-fns with selective imports will reduce size by ~80% 2. **Implement lodash tree-shaking** (-150KB) - Replace `import _ from 'lodash'` with specific imports - Use babel-plugin-lodash for automatic optimization 3. **Material-UI selective imports** (-170KB) - Import components individually: `import Button from '@mui/material/Button'` - Configure babel-plugin-import for automatic tree-shaking ### Code Splitting Strategy **Route-based splitting:** ```javascript const Dashboard = lazy(() => import('./Dashboard')); const Analytics = lazy(() => import('./Analytics')); ``` **Component-level splitting:** - Lazy load Recharts components (charts only load when needed) - Split heavy form components into separate chunks ### Build Configuration Updates ```javascript // webpack.config.js optimizations optimization: { usedExports: true, sideEffects: false, splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /node_modules/, chunks: 'all' } } } } ``` **Expected Result:** Bundle reduction from 2.8MB to ~1.4MB, meeting your target goal.

Pro Tips for Best Results

Run bundle analyzer tools like webpack-bundle-analyzer before optimization to identify the biggest opportunities
Focus on the largest dependencies first - replacing one heavy library often has more impact than multiple small optimizations
Test bundle changes in staging with real user scenarios to ensure code splitting doesn't hurt user experience
Set up automated bundle size monitoring in CI/CD to prevent regression
Consider the trade-off between bundle size and number of HTTP requests when implementing code splitting