Last updated
JavaScript Bundle Analyzer Examples
The JavaScript Bundle Analyzer examines your compiled JavaScript bundles to identify large dependencies, duplicate modules, and optimization opportunities. Below are examples of typical analysis results and how to act on them.
Example: Bundle Composition Report
Bundle: main.js (1.2 MB uncompressed, 380 KB gzipped)
Top modules by size:
moment.js 67.4 KB (5.6%)
lodash 71.2 KB (5.9%)
react-dom 120.3 KB (10.0%)
react 6.4 KB (0.5%)
chart.js 58.1 KB (4.8%)
@mui/material 210.5 KB (17.5%)
application code 180.0 KB (15.0%)
other dependencies 486.1 KB (40.5%)
Total: 1,200 KB
Example: Large Dependency Warnings
⚠ Large dependencies detected:
1. moment.js — 67.4 KB (gzipped)
Recommendation: Replace with date-fns or dayjs
Potential savings: ~60 KB
// Current usage:
import moment from 'moment';
moment(date).format('YYYY-MM-DD');
// Replacement with date-fns (tree-shakeable):
import { format } from 'date-fns';
format(date, 'yyyy-MM-dd');
2. lodash — 71.2 KB (gzipped)
Recommendation: Import individual functions or use lodash-es
Potential savings: ~65 KB
// Current (imports entire library):
import _ from 'lodash';
_.debounce(fn, 300);
// Better (imports only what's needed):
import debounce from 'lodash/debounce';
debounce(fn, 300);
Example: Duplicate Module Detection
⚠ Duplicate modules found:
react (2 versions)
v17.0.2 — included by: your-app (node_modules)
v16.14.0 — included by: legacy-component-lib (node_modules)
Wasted size: ~6 KB
Fix: Align react versions in package.json using resolutions
lodash (2 copies)
lodash@4.17.21 — included by: your-app
lodash@4.17.15 — included by: some-old-package
Wasted size: ~71 KB
Fix: Add to package.json resolutions: { "lodash": "4.17.21" }
Example: Tree Shaking Issues
⚠ Tree shaking not effective for:
antd (Ant Design) — 1.2 MB total, only 15% used
Reason: CommonJS module format prevents tree shaking
// Current (imports entire library):
import { Button, Input } from 'antd';
// Fix: Use babel-plugin-import for selective imports
// .babelrc:
{
"plugins": [
["import", { "libraryName": "antd", "style": "css" }]
]
}
Potential savings: ~1 MB
rxjs — 200 KB total, only 8 operators used
// Current:
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';
// This is already correct — rxjs/operators is tree-shakeable
// Ensure bundler has sideEffects: false in package.json
Example: Code Splitting Opportunities
Code splitting recommendations:
Route-based splitting (estimated savings: 340 KB initial load):
/dashboard — 180 KB
chart.js (58 KB) only used here
dashboard-specific components (122 KB)
// Implement with React.lazy:
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
/admin — 160 KB
admin-only components (160 KB)
const AdminPanel = React.lazy(() => import('./pages/AdminPanel'));
/reports — 95 KB
pdf-lib (95 KB) only used for report export
// Load on demand:
const generatePDF = () => import('./utils/pdfExport').then(m => m.generate());
Example: Bundle Size Over Time
Bundle size history (main.js, gzipped):
Build Date Size Change
v1.0.0 2024-01-01 210 KB —
v1.1.0 2024-02-01 225 KB +15 KB ← added chart.js
v1.2.0 2024-03-01 380 KB +155 KB ← added @mui/material (!)
v1.3.0 2024-04-01 310 KB -70 KB ← replaced moment with date-fns
v1.4.0 2024-05-01 295 KB -15 KB ← lodash selective imports
Regression alert: v1.2.0 added 155 KB — review @mui/material usage
Example: Optimization Summary
Current bundle: 1,200 KB (380 KB gzipped)
Recommended optimizations:
1. Replace moment.js with date-fns -60 KB
2. Use lodash selective imports -65 KB
3. Implement route-based code splitting -340 KB initial
4. Fix antd tree shaking -1,020 KB
5. Resolve duplicate react versions -6 KB
Estimated result after optimizations:
Bundle: ~850 KB (-29%)
Initial load: ~250 KB gzipped (-34%)
Impact on Core Web Vitals:
LCP improvement: ~0.8s on 4G connection
TBT improvement: ~200ms
Treemap Visualization
Bundle treemap (each block sized by contribution):
┌─────────────────────────────────────────────────────┐
│ @mui/material (210 KB) │ app code (180 KB)│
│ │ │
│ ├──────────────────┤
│ │ lodash (71 KB) │
├──────────────────────────────────┤ │
│ react-dom (120 KB) ├──────────────────┤
│ │ chart.js (58 KB) │
├──────────────────────────────────┴──────────────────┤
│ other (486 KB) │
└─────────────────────────────────────────────────────┘
Upload your bundle file (with optional source map for accurate module attribution) to get a full breakdown of what's inside and actionable recommendations for reducing its size.