gentelella/docs/bundle-analysis.md

Bundle Analysis Guide

This guide explains how to use the bundle analyzer to monitor and optimize the bundle size of the Gentelella admin template.

Quick Start

# Build and generate bundle analysis
npm run analyze

# Build without opening the stats file (for CI)
npm run analyze:ci

Analysis File Location

After running the build, the bundle analysis is saved to:

• dist/stats.html - Interactive treemap visualization

Understanding the Analysis

Treemap View

The default treemap view shows:

• Size of boxes = Bundle size (larger boxes = larger bundles)
• Colors = Different modules and dependencies
• Nested structure = Module hierarchy and dependencies

Key Metrics to Monitor

1. Vendor Chunks (largest bundles):

   • vendor-charts (~1.4MB) - Chart.js, ECharts, Leaflet
   • vendor-core (~168KB) - jQuery, Bootstrap, Popper.js
   • vendor-forms (~128KB) - Select2, Date pickers, Sliders
   • vendor-ui (~100KB) - jQuery UI, DataTables

2. Application Code:

   • init (~54KB) - Main initialization code
   • Page-specific bundles (2-3KB each)

3. CSS Bundles:

   • init.css (~510KB) - Main stylesheet bundle
   • Page-specific CSS (4-67KB each)

Optimization Strategies

1. Identify Large Dependencies

• Look for unexpectedly large vendor chunks
• Check if dependencies are being tree-shaken properly
• Consider lighter alternatives for heavy libraries

2. Monitor Bundle Growth

• Track changes in bundle sizes over time
• Set up alerts for significant size increases
• Use gzip/brotli compressed sizes for realistic network transfer sizes

3. Code Splitting Optimization

Current manual chunks are optimized for:

• vendor-core: Essential libraries loaded on every page
• vendor-charts: Chart functionality (loaded only on chart pages)
• vendor-forms: Form enhancements (loaded only on form pages)
• vendor-ui: UI components (loaded as needed)/

4. Dynamic Import Opportunities

Consider converting large features to dynamic imports:

// Instead of static import
import { Chart } from 'chart.js';

// Use dynamic import for conditional loading
if (document.querySelector('.chart-container')) {
  const { Chart } = await import('chart.js');
}

Performance Targets

Current Performance (as of latest build):

• JavaScript Total: ~2.4MB uncompressed, ~800KB gzipped
• CSS Total: ~610KB uncompressed, ~110KB gzipped
• Page Load Impact: Core bundle (168KB) loads on every page

Recommended Targets:

• Core Bundle: <200KB (currently 168KB ✅)
• Feature Bundles: <150KB each (charts: 1.4MB ❌)
• Total Initial Load: <300KB gzipped (currently ~150KB ✅)

Bundle Size Warnings

The build process will warn about chunks larger than 1000KB:

• This is currently triggered by the vendor-charts bundle
• Consider splitting chart libraries further or using dynamic imports
• Adjust the warning limit in vite.config.js if needed