Bundle Analysis & Optimization

Quick Start

When analyzing bundles:

• Full Analysis: npm run analyze

• Bundle Optimization Check: npm run bundle-optimization:check

• Detailed Report: npm run bundle-optimization:report

• Recharts Analysis: npm run analyze:recharts

Commands

Full Bundle Analysis

Complete bundle analysis with visual report

npm run analyze

Output: Opens interactive bundle analyzer in browser

Shows: Chunk sizes, dependencies, code splitting effectiveness

Bundle Optimization Analysis

Quick check without report

npm run bundle-optimization:check

Detailed analysis with report

npm run bundle-optimization:analyze

Generate report files

npm run bundle-optimization:report

Output: Console analysis + optional report files

Shows: Bundle size, first load JS, chunk analysis, violations

Specific Library Analysis

Analyze Recharts chunk

npm run analyze:recharts

Analyze all chunks

npm run analyze:chunks

Verify Recharts imports

npm run verify:recharts-imports

Performance Budgets

Current Limits

• First Load JS: < 128KB (warning: 100KB)

• Total Bundle Size: < 500KB (warning: 400KB)

• CSS Bundle Size: < 50KB (warning: 40KB)

• Chunk Count: < 20 (warning: 15)

Budget Configuration

Budgets are defined in:

• performance-budgets.config.js

• src/lib/optimization/performance-budget-monitor.ts

• .github/workflows/performance-budgets.yml

Analysis Workflow

1. Run Analysis

npm run analyze

2. Review Bundle Analyzer

Check the interactive report for:

• Large chunks: > 150KB

• Duplicate code: Same library in multiple chunks

• Unused code: Dead code elimination opportunities

• Code splitting: Effectiveness of async chunks

3. Identify Issues

Common issues to look for:

• Heavy dependencies: Libraries > 50KB

• Duplicate modules: Same code in multiple chunks

• Missing code splitting: Large initial chunks

• Unused imports: Dead code in bundle

4. Optimize

Based on findings:

• Lazy load heavy components: Use dynamic() imports

• Remove unused dependencies: Clean up imports

• Optimize imports: Use modular imports

• Split large chunks: Configure webpack splitChunks

Code Splitting Analysis

Current Configuration

Code splitting is configured in next.config.js :

• Framer Motion: chunks: 'async' , maxSize: 20KB

• Swiper: chunks: 'async' , maxSize: 20KB

• Recharts: chunks: 'async' , maxSize: 100KB

• React Query: chunks: 'async' , maxSize: 20KB

• Redux: chunks: 'async' , maxSize: 20KB

Verifying Code Splitting

Check if libraries are in async chunks

npm run analyze

Look for:

- Framer Motion in separate async chunk

- Swiper in separate async chunk

- Recharts in separate async chunk

Optimization Strategies

Reduce Bundle Size

Lazy Load Heavy Components

const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <Skeleton /> })

Use Modular Imports

// ❌ Bad: imports entire library import _ from 'lodash'

// ✅ Good: imports only needed function import debounce from 'lodash-es/debounce'

Remove Unused Dependencies

Find unused dependencies

npx depcheck

Remove unused packages

npm uninstall <package>

Optimize Code Splitting

Configure Webpack SplitChunks

• See next.config.js for current configuration

• Adjust maxSize for optimal chunk sizes

• Use chunks: 'async' for non-critical code

Use Dynamic Imports

• Route-based code splitting (automatic in Next.js)

• Component-based lazy loading

• Library-based async chunks

Analysis Checklist

When analyzing bundles:

• First Load JS < 128KB

• Total Bundle Size < 500KB

• No duplicate modules across chunks

• Heavy libraries in async chunks

• Code splitting working correctly

• No unused code in bundle

• CSS bundle size < 50KB

Key Metrics

Critical Metrics

• First Load JS: JavaScript loaded on initial page load

• Total Bundle Size: Sum of all JavaScript chunks

• Chunk Count: Number of separate chunks

• Duplicate Modules: Code duplicated across chunks

Performance Impact

• Bundle Size: Affects download time

• Parse Time: Affects TTI (Time to Interactive)

• Code Splitting: Affects initial load vs. total size

Troubleshooting

Bundle Size Too Large

• Run analysis: npm run analyze

• Identify largest chunks

• Lazy load heavy components

• Remove unused dependencies

• Optimize imports

Code Splitting Not Working

• Check next.config.js configuration

• Verify chunks: 'async' for heavy libraries

• Ensure dynamic imports use ssr: false when needed

• Check webpack splitChunks configuration

Duplicate Modules

• Identify duplicated libraries

• Check for multiple versions in package.json

• Use webpack alias to force single version

• Verify code splitting configuration

Key Files

• next.config.js

• Webpack and code splitting configuration

• performance-budgets.config.js

• Performance budget limits

• scripts/performance/analyze-bundle-optimization.js

• Analysis script

• src/lib/optimization/bundle-optimization-manager.ts

• Bundle manager