Initial commit
This commit is contained in:
Zhongwei Li
476
commands/bundle-analyzer.md
Normal file
476
commands/bundle-analyzer.md
Normal file
@@ -0,0 +1,476 @@
|
||||
---
|
||||
allowed-tools: Bash, Read, Write, Edit, Grep, Glob
|
||||
description: ClaudeForge bundle size analysis and optimization specialist for webpack, rollup, and modern build tools.
|
||||
---
|
||||
|
||||
# ClaudeForge Bundle Analyzer
|
||||
|
||||
ClaudeForge intelligent bundle analysis system that identifies, analyzes, and optimizes JavaScript bundle sizes with comprehensive visualization, tree shaking recommendations, and automated code splitting strategies.
|
||||
|
||||
## Purpose
|
||||
|
||||
Transform bundle optimization from manual investigation to intelligent automation that ensures optimal application performance, minimal load times, and efficient code delivery across modern web applications.
|
||||
|
||||
## Features
|
||||
|
||||
- **Bundle Analysis**: Deep analysis of webpack, rollup, and vite bundles with visual dependency graphs
|
||||
- **Size Optimization**: Identify and eliminate bloated dependencies and unused code
|
||||
- **Tree Shaking**: Optimize tree shaking configuration for maximum dead code elimination
|
||||
- **Code Splitting**: Intelligent code splitting strategies for optimal chunk sizes
|
||||
- **Dependency Audit**: Analyze dependency tree and identify duplicate or redundant packages
|
||||
- **Performance Metrics**: Measure real-world performance impact with Web Vitals integration
|
||||
- **Report Generation**: Comprehensive reports with actionable optimization recommendations
|
||||
- **CI/CD Integration**: Automated bundle size monitoring in continuous integration pipelines
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
/bundle-analyzer [command] [options]
|
||||
```
|
||||
|
||||
Target: $ARGUMENTS (if specified, otherwise analyze current build output)
|
||||
|
||||
### Analysis Commands
|
||||
|
||||
**Full Bundle Analysis:**
|
||||
```bash
|
||||
/bundle-analyzer analyze --build-dir=dist --format=html
|
||||
```
|
||||
Generates comprehensive bundle analysis including:
|
||||
- Visual treemap of bundle composition
|
||||
- Module size breakdown by category
|
||||
- Duplicate dependency detection
|
||||
- Largest modules and optimization opportunities
|
||||
- Import cost analysis
|
||||
- Bundle size trends over time
|
||||
|
||||
**Webpack Bundle Analysis:**
|
||||
```bash
|
||||
/bundle-analyzer webpack --stats-file=stats.json --threshold=500kb
|
||||
```
|
||||
Analyzes webpack bundles with:
|
||||
- webpack-bundle-analyzer integration
|
||||
- Chunk size analysis and optimization
|
||||
- Module concatenation opportunities
|
||||
- Dynamic import boundary detection
|
||||
- Vendor bundle optimization
|
||||
- SplitChunks configuration recommendations
|
||||
|
||||
**Source Map Explorer:**
|
||||
```bash
|
||||
/bundle-analyzer source-map --bundle=main.js --output=report.html
|
||||
```
|
||||
Uses source-map-explorer for:
|
||||
- Visual representation of bundle content
|
||||
- Source file size attribution
|
||||
- Library version detection
|
||||
- Minification effectiveness analysis
|
||||
- Gzip/Brotli compression preview
|
||||
|
||||
### Optimization Commands
|
||||
|
||||
**Tree Shaking Optimization:**
|
||||
```bash
|
||||
/bundle-analyzer tree-shake --aggressive --side-effects-check
|
||||
```
|
||||
Optimizes tree shaking with:
|
||||
- Side effects analysis and package.json validation
|
||||
- ESM module format verification
|
||||
- Import statement optimization
|
||||
- Unused export detection
|
||||
- Babel configuration recommendations
|
||||
- Package.json sideEffects configuration
|
||||
|
||||
**Code Splitting Strategy:**
|
||||
```bash
|
||||
/bundle-analyzer code-split --strategy=route-based --max-chunk=250kb
|
||||
```
|
||||
Implements intelligent code splitting:
|
||||
- Route-based splitting for SPA applications
|
||||
- Component-level splitting with React.lazy/Vue async
|
||||
- Vendor bundle separation strategies
|
||||
- Common chunk extraction optimization
|
||||
- Dynamic import insertion points
|
||||
- Prefetch/preload directive generation
|
||||
|
||||
**Dependency Optimization:**
|
||||
```bash
|
||||
/bundle-analyzer dependencies --find-duplicates --suggest-alternatives
|
||||
```
|
||||
Optimizes dependency usage:
|
||||
- Duplicate dependency detection and resolution
|
||||
- Lighter alternative library suggestions
|
||||
- Peer dependency conflict resolution
|
||||
- Bundle phobia integration for size checking
|
||||
- Package.json dependency audit
|
||||
- Monorepo workspace optimization
|
||||
|
||||
### Advanced Features
|
||||
|
||||
**Performance Budget:**
|
||||
```bash
|
||||
/bundle-analyzer budget --max-initial=500kb --max-route=250kb --fail-on-breach
|
||||
```
|
||||
Enforces performance budgets with:
|
||||
- Initial bundle size limits
|
||||
- Per-route chunk size constraints
|
||||
- Asset size monitoring (images, fonts, etc.)
|
||||
- CI/CD integration for automated checks
|
||||
- Historical size tracking
|
||||
- Budget breach notifications
|
||||
|
||||
**Compression Analysis:**
|
||||
```bash
|
||||
/bundle-analyzer compress --algorithms=gzip,brotli,zstd --level=11
|
||||
```
|
||||
Analyzes compression effectiveness:
|
||||
- Multiple compression algorithm comparison
|
||||
- Compression ratio analysis
|
||||
- Pre-compression build plugin recommendations
|
||||
- CDN compression configuration
|
||||
- Content-encoding header validation
|
||||
|
||||
**Import Cost Analysis:**
|
||||
```bash
|
||||
/bundle-analyzer imports --annotate --threshold=50kb
|
||||
```
|
||||
Provides import-level insights:
|
||||
- Per-import size calculation
|
||||
- Named vs default import optimization
|
||||
- Import statement annotations in source
|
||||
- Barrel export detection and optimization
|
||||
- Module replacement recommendations
|
||||
|
||||
## Analysis Methodologies
|
||||
|
||||
### Bundle Size Metrics
|
||||
|
||||
**Core Web Vitals Impact:**
|
||||
- **First Contentful Paint (FCP)**: Initial bundle load time impact
|
||||
- **Largest Contentful Paint (LCP)**: Critical resource optimization
|
||||
- **Time to Interactive (TTI)**: JavaScript parse and execution cost
|
||||
- **Total Blocking Time (TBT)**: Main thread blocking analysis
|
||||
- **Cumulative Layout Shift (CLS)**: Dynamic import layout impact
|
||||
|
||||
**Size Categories:**
|
||||
- **Initial Bundle**: Critical path JavaScript for first render
|
||||
- **Route Chunks**: Lazy-loaded route-specific code
|
||||
- **Vendor Bundles**: Third-party library code
|
||||
- **Shared Chunks**: Common code across multiple routes
|
||||
- **Async Chunks**: Dynamically imported modules
|
||||
|
||||
### Optimization Strategies
|
||||
|
||||
**Tree Shaking Excellence:**
|
||||
```javascript
|
||||
// Bad: CommonJS imports prevent tree shaking
|
||||
const _ = require('lodash');
|
||||
const cloneDeep = _.cloneDeep;
|
||||
|
||||
// Good: ESM named imports enable tree shaking
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
// Best: Direct function imports minimize bundle size
|
||||
import cloneDeep from 'lodash-es/cloneDeep';
|
||||
```
|
||||
|
||||
**Code Splitting Patterns:**
|
||||
```javascript
|
||||
// Route-based splitting
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
||||
const Profile = lazy(() => import('./pages/Profile'));
|
||||
|
||||
// Component-based splitting with prefetch
|
||||
const HeavyChart = lazy(() => import(
|
||||
/* webpackChunkName: "chart" */
|
||||
/* webpackPrefetch: true */
|
||||
'./components/HeavyChart'
|
||||
));
|
||||
|
||||
// Dynamic import with error boundary
|
||||
const loadModule = () => import('./module').catch(err => {
|
||||
console.error('Module load failed:', err);
|
||||
return { default: FallbackComponent };
|
||||
});
|
||||
```
|
||||
|
||||
**Webpack Configuration Optimization:**
|
||||
```javascript
|
||||
// Optimal SplitChunks configuration
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name(module) {
|
||||
const packageName = module.context.match(
|
||||
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
|
||||
)[1];
|
||||
return `vendor.${packageName.replace('@', '')}`;
|
||||
},
|
||||
priority: 10
|
||||
},
|
||||
common: {
|
||||
minChunks: 2,
|
||||
priority: 5,
|
||||
reuseExistingChunk: true,
|
||||
enforce: true
|
||||
}
|
||||
}
|
||||
},
|
||||
runtimeChunk: 'single',
|
||||
moduleIds: 'deterministic'
|
||||
}
|
||||
```
|
||||
|
||||
## Tool Integration
|
||||
|
||||
### Webpack Bundle Analyzer
|
||||
|
||||
**Installation and Setup:**
|
||||
```bash
|
||||
npm install --save-dev webpack-bundle-analyzer
|
||||
```
|
||||
|
||||
**Configuration:**
|
||||
```javascript
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
reportFilename: 'bundle-report.html',
|
||||
openAnalyzer: false,
|
||||
generateStatsFile: true,
|
||||
statsFilename: 'bundle-stats.json'
|
||||
})
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### Source Map Explorer
|
||||
|
||||
**Analysis Workflow:**
|
||||
```bash
|
||||
# Generate source maps
|
||||
npm run build -- --source-map
|
||||
|
||||
# Analyze main bundle
|
||||
npx source-map-explorer dist/main.*.js --html dist/sme-report.html
|
||||
|
||||
# Compare bundles
|
||||
npx source-map-explorer dist/*.js --only-mapped
|
||||
```
|
||||
|
||||
### Bundle Phobia Integration
|
||||
|
||||
**Dependency Size Checking:**
|
||||
```bash
|
||||
# Check package size before installation
|
||||
npx bundle-phobia moment
|
||||
|
||||
# Compare alternatives
|
||||
npx bundle-phobia moment date-fns dayjs
|
||||
|
||||
# Size impact analysis
|
||||
npx bundle-phobia --interactive
|
||||
```
|
||||
|
||||
## Performance Optimization Techniques
|
||||
|
||||
### Dependency Management
|
||||
|
||||
**Library Alternatives:**
|
||||
- **moment.js (67KB)** → **date-fns (13KB)** or **dayjs (2KB)**
|
||||
- **lodash (71KB)** → **lodash-es (24KB)** with tree shaking
|
||||
- **axios (13KB)** → **native fetch** with polyfill (0KB modern browsers)
|
||||
- **jquery (87KB)** → **vanilla JS** or **cash (6KB)**
|
||||
- **core-js (90KB)** → **targeted polyfills** with browserslist
|
||||
|
||||
**Tree Shaking Optimization:**
|
||||
```json
|
||||
{
|
||||
"sideEffects": [
|
||||
"*.css",
|
||||
"*.scss",
|
||||
"./src/polyfills.js"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Build Tool Configuration
|
||||
|
||||
**Vite Optimization:**
|
||||
```javascript
|
||||
// vite.config.js
|
||||
export default {
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'react-vendor': ['react', 'react-dom'],
|
||||
'ui-vendor': ['@mui/material', '@mui/icons-material'],
|
||||
'utils': ['lodash-es', 'date-fns']
|
||||
}
|
||||
}
|
||||
},
|
||||
chunkSizeWarningLimit: 500,
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**Rollup Optimization:**
|
||||
```javascript
|
||||
// rollup.config.js
|
||||
export default {
|
||||
plugins: [
|
||||
terser({
|
||||
compress: {
|
||||
passes: 2,
|
||||
pure_getters: true,
|
||||
unsafe: true
|
||||
},
|
||||
mangle: {
|
||||
safari10: true
|
||||
}
|
||||
}),
|
||||
visualizer({
|
||||
filename: 'bundle-analysis.html',
|
||||
gzipSize: true,
|
||||
brotliSize: true
|
||||
})
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
## CI/CD Integration
|
||||
|
||||
### GitHub Actions Workflow
|
||||
|
||||
```yaml
|
||||
name: Bundle Size Check
|
||||
|
||||
on: [pull_request]
|
||||
|
||||
jobs:
|
||||
bundle-size:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build and analyze
|
||||
run: npm run build
|
||||
|
||||
- name: Analyze bundle size
|
||||
uses: andresz1/size-limit-action@v1
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
limit: "500 KB"
|
||||
|
||||
- name: Comment PR with bundle report
|
||||
uses: marocchino/sticky-pull-request-comment@v2
|
||||
with:
|
||||
path: bundle-report.md
|
||||
```
|
||||
|
||||
### Size Limit Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"size-limit": [
|
||||
{
|
||||
"name": "Initial Bundle",
|
||||
"path": "dist/main.*.js",
|
||||
"limit": "500 KB",
|
||||
"gzip": true
|
||||
},
|
||||
{
|
||||
"name": "Total App Size",
|
||||
"path": "dist/**/*.js",
|
||||
"limit": "1.5 MB",
|
||||
"gzip": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Reporting and Visualization
|
||||
|
||||
### HTML Report Generation
|
||||
|
||||
**Comprehensive Analysis Report:**
|
||||
- Bundle composition treemap visualization
|
||||
- Size breakdown by module category
|
||||
- Dependency graph with version information
|
||||
- Optimization recommendations ranked by impact
|
||||
- Historical size trend charts
|
||||
- Compression effectiveness analysis
|
||||
|
||||
### Command Line Output
|
||||
|
||||
**Summary Statistics:**
|
||||
```
|
||||
Bundle Analysis Summary
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Total Bundle Size: 1.2 MB (489 KB gzipped)
|
||||
Initial Load: 456 KB (189 KB gzipped)
|
||||
Lazy Chunks: 744 KB (300 KB gzipped)
|
||||
|
||||
Top 5 Largest Modules:
|
||||
1. node_modules/react-dom/cjs/react-dom.production.min.js - 120 KB
|
||||
2. node_modules/@mui/material/esm/index.js - 87 KB
|
||||
3. node_modules/recharts/es6/index.js - 65 KB
|
||||
4. src/pages/Dashboard/index.js - 43 KB
|
||||
5. node_modules/date-fns/esm/index.js - 38 KB
|
||||
|
||||
Optimization Opportunities:
|
||||
• Replace moment.js with date-fns (saves 54 KB)
|
||||
• Enable aggressive tree shaking (potential 120 KB reduction)
|
||||
• Split vendor bundle into smaller chunks
|
||||
• Consider dynamic imports for Dashboard (43 KB)
|
||||
|
||||
Performance Budget Status: ⚠️ WARNING
|
||||
Initial bundle exceeds recommended 400 KB limit
|
||||
```
|
||||
|
||||
### JSON Export
|
||||
|
||||
**Programmatic Analysis:**
|
||||
```json
|
||||
{
|
||||
"bundles": [
|
||||
{
|
||||
"name": "main",
|
||||
"size": 456000,
|
||||
"gzipSize": 189000,
|
||||
"modules": 342,
|
||||
"duplicates": 3
|
||||
}
|
||||
],
|
||||
"recommendations": [
|
||||
{
|
||||
"type": "dependency-replacement",
|
||||
"module": "moment",
|
||||
"suggestion": "date-fns",
|
||||
"savings": 54000
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**ClaudeForge Bundle Analyzer** - Intelligent bundle size optimization with comprehensive analysis, actionable recommendations, and automated performance monitoring.
|
||||
Reference in New Issue
Block a user