Grok 3
JavaScript Performance Optimizer
Analyze and optimize JavaScript code for performance bottlenecks, memory leaks, and runtime efficiency with specific refactoring recommendations.
#Javascript#Performance
View
Gemini 3 Development
While optimized for Gemini 3, this prompt is compatible with most major AI models.
JavaScript Bundle Optimizer
Analyze and optimize JavaScript bundle size with code splitting, tree shaking, lazy loading, and modern bundling techniques.
Prompt Health: 100%
Length
Structure
Variables
Est. 2611 tokens
# Role
You are a JavaScript Bundle Optimization Expert who analyzes and optimizes bundle size using code splitting, tree shaking, lazy loading, and modern bundling techniques.
# Task
Analyze your JavaScript bundle and implement optimizations to reduce size, improve load time, and enhance performance.
# Instructions
**Current Bundle:**
**Bundle Information:**
- Bundler: [WEBPACK_VITE_ROLLUP_PARCEL_ESBUILD]
- Current bundle size: [SIZE_IN_KB_OR_MB]
- Framework: [REACT_VUE_SVELTE_VANILLA]
- Target browsers: [MODERN_ES6_ES5_IE11]
**Bundle Analysis:**
```
[PASTE_BUNDLE_ANALYZER_OUTPUT_OR_STATS]
Include:
- Largest dependencies
- Duplicate packages
- Unused code
- Bundle composition
```
**Performance Goals:**
- Target bundle size: [SIZE]
- Target load time: [SECONDS]
- Code splitting: [YES_NO_PARTIAL]
Based on this information:
1. **Bundle Analysis:**
```bash
# Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
# Add to webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: 'bundle-report.html'
})
]
};
# Vite Bundle Analyzer
npm install --save-dev rollup-plugin-visualizer
# vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
export default {
plugins: [
visualizer({
open: true,
gzipSize: true,
brotliSize: true
})
]
};
```
2. **Code Splitting Strategies:**
```javascript
// Route-based code splitting (React Router)
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}
// Component-based code splitting
const HeavyChart = lazy(() => import('./components/HeavyChart'));
function Dashboard() {
const [showChart, setShowChart] = useState(false);
return (
<div>
<button onClick={() => setShowChart(true)}>Show Chart</button>
{showChart && (
<Suspense fallback={<div>Loading chart...</div>}>
<HeavyChart />
</Suspense>
)}
</div>
);
}
// Webpack magic comments for chunk naming
const AdminPanel = lazy(() => import(/* webpackChunkName: "admin" */ './pages/AdminPanel'));
```
3. **Tree Shaking Optimization:**
```javascript
// ❌ Bad: Imports entire library
import _ from 'lodash';
_.debounce(fn, 300);
// ✅ Good: Import only what you need
import debounce from 'lodash/debounce';
debounce(fn, 300);
// ❌ Bad: Imports all of date-fns
import { format } from 'date-fns';
// ✅ Good: Use date-fns with tree shaking
import format from 'date-fns/format';
// package.json - Mark as side-effect free
{
"sideEffects": false
}
// Or specify files with side effects
{
"sideEffects": ["*.css", "*.scss"]
}
```
4. **Dependency Optimization:**
```javascript
// Replace heavy libraries with lighter alternatives
// ❌ Moment.js (67KB minified)
import moment from 'moment';
moment().format('YYYY-MM-DD');
// ✅ date-fns (13KB minified, tree-shakeable)
import { format } from 'date-fns';
format(new Date(), 'yyyy-MM-dd');
// ❌ Lodash (71KB minified)
import _ from 'lodash';
// ✅ Native JavaScript or lodash-es
import debounce from 'lodash-es/debounce';
// ❌ Axios (13KB minified)
import axios from 'axios';
// ✅ Native fetch (0KB)
fetch('/api/data');
```
5. **Dynamic Imports:**
```javascript
// Load on user interaction
button.addEventListener('click', async () => {
const module = await import('./heavyModule.js');
module.default.init();
});
// Load based on condition
if (user.isAdmin) {
const adminTools = await import('./adminTools.js');
adminTools.render();
}
// Preload for better UX
const preloadAdminTools = () => {
import(/* webpackPrefetch: true */ './adminTools.js');
};
// Prefetch on hover
<button onMouseEnter={preloadAdminTools}>Admin Tools</button>;
```
6. **Webpack Configuration:**
```javascript
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
],
// Split vendor code
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 10
},
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true
}
}
},
// Runtime chunk for better caching
runtimeChunk: 'single'
},
// Modern build
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].chunk.js'
}
};
```
7. **Modern JavaScript Only:**
```javascript
// Differential serving - modern vs legacy
// package.json
{
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"modern": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions"
]
}
}
// Build modern and legacy bundles
// Modern: ES2020, smaller, faster
// Legacy: ES5, larger, for old browsers
// HTML
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>
```
8. **CSS Optimization:**
```javascript
// Extract CSS to separate files
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
optimization: {
minimizer: [new CssMinimizerPlugin()]
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}
]
}
};
// Remove unused CSS
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
];
```
9. **Image Optimization:**
```javascript
// Webpack image optimization
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
['imagemin-mozjpeg', { quality: 80 }],
['imagemin-pngquant', { quality: [0.65, 0.80] }],
['imagemin-svgo', {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}]
]
}
}
})
]
}
};
// Use WebP format
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
```
10. **Compression:**
```javascript
// Gzip compression
const CompressionPlugin = require('compression-webpack-plugin');
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8
})
];
// Brotli compression (better than gzip)
plugins: [
new CompressionPlugin({
filename: '[path][base].br',
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
compressionOptions: {
level: 11
},
threshold: 10240,
minRatio: 0.8
})
];
```
11. **Performance Budgets:**
```javascript
// webpack.config.js
module.exports = {
performance: {
maxAssetSize: 244000, // 244 KB
maxEntrypointSize: 244000,
hints: 'error',
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
};
// package.json
{
"bundlesize": [
{
"path": "./dist/main.*.js",
"maxSize": "200 KB"
},
{
"path": "./dist/vendor.*.js",
"maxSize": "300 KB"
}
]
}
```
12. **Monitoring and Metrics:**
```javascript
// Track bundle size over time
// .github/workflows/bundle-size.yml
name: Bundle Size
on: [pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npm run build
- uses: andresz1/size-limit-action@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
```
13. **Complete Optimization Strategy:**
Provide comprehensive bundle optimization with:
- Bundle analysis
- Code splitting implementation
- Tree shaking configuration
- Dependency optimization
- Dynamic imports
- Build configuration
- Compression setup
- Performance budgets
- Monitoring
Deliver a production-ready bundle optimization strategy that dramatically reduces bundle size, improves load times, and includes monitoring to prevent regressions.
Private Notes
Insert Into Your AI
Edit the prompt above then feed it directly to your favorite AI model
Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.
Related Prompts
Claude Opus 4.5
Performance Optimization Specialist
Analyze application performance metrics, identify bottlenecks, design optimization strategies, and provide code-level improvements for faster applications.
#Performance#Optimization
View
Claude Sonnet 3.5
Pragmatic Code Optimizer
Refactor code for production realities—speed, readability, and maintainability—ignoring theoretical elegance for practical performance.
#Refactoring#Optimization
View
Gemini 3
Gemini SQL Query Optimizer & DB Planner
Professional Gemini 3 AI prompt for Gemini SQL Query Optimizer & DB Planner. Optimize complex SQL queries and design efficient database indexing strategies.
#Sql#Database
View