⚡ Optimize bundle size from 188KB to <180KB (gzip)

[pethers]

🎯 Objective

Optimize JavaScript bundle size from current 188KB (gzip) to target <180KB (gzip) through code splitting, tree shaking, and lazy loading for v1.0 release.

📋 Background

Current bundle size is ~201KB total (188KB JS, 13KB CSS) which exceeds the target of <180KB for JavaScript. Per performance-testing.md references and budget.json, optimizing bundle size improves load times and user experience, especially on GitHub Pages deployment.

📊 Current State

• Total Bundle: ~201KB (gzip)
• JavaScript: ~188KB (gzip) ⚠️ Target: <180KB
• Stylesheets: ~13KB (gzip) ✅ Target: <50KB
• Build Tool: Vite 7.2.2
• Main Dependencies: React 19.2, Chart.js 4.5.1
• Target Platform: GitHub Pages (static hosting)

✅ Acceptance Criteria

• Reduce JavaScript bundle to <180KB (gzip)
• Implement code splitting for large dependencies (Chart.js)
• Add lazy loading for non-critical widgets
• Configure Vite build optimization (tree shaking, minification)
• Remove unused dependencies and dead code
• Analyze bundle with rollup-plugin-visualizer
• Verify bundle size in CI/CD pipeline
• Maintain full functionality after optimization
• Document optimization techniques used
• Update budget.json with new targets

🛠️ Implementation Guidance

Files to Modify:

• vite.config.ts - Build optimization configuration
• src/components/widgets/*.tsx - Lazy load widgets
• package.json - Review and remove unused dependencies
• budget.json - Update bundle size targets
• .github/workflows/ - Add bundle size tracking

Optimization Strategies:

1. Code Splitting:

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'chart': ['chart.js'],
          'react-vendor': ['react', 'react-dom'],
        },
      },
    },
  },
});

2. Lazy Loading Widgets:

// src/App.tsx
const SecuritySummaryWidget = lazy(() => import('./components/widgets/SecuritySummaryWidget'));
const ComplianceStatusWidget = lazy(() => import('./components/widgets/ComplianceStatusWidget'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <SecuritySummaryWidget />
      <ComplianceStatusWidget />
    </Suspense>
  );
}

3. Tree Shaking:

// Import only what's needed
import { Bar } from 'chart.js/auto'; // Instead of importing entire library

4. Bundle Analysis:

npm install --save-dev rollup-plugin-visualizer
# Add to vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [visualizer({ open: true })]

5. Dependency Audit:

npm run knip # Find unused dependencies
npm ls --all # Review dependency tree

6. Remove Dead Code:
   • Use ESLint to find unused imports
   • Remove commented-out code
   • Eliminate unused utility functions

Expected Improvements:

• Chart.js lazy loading: -15KB
• Widget lazy loading: -10KB
• Dead code elimination: -5KB
• Tree shaking optimization: -5KB
• Total Target Reduction: 35KB (188KB → 153KB)

🔗 Related Resources

• Vite Build Optimizations
• React Code Splitting
• bundle.json Configuration
• Performance Testing Docs

📊 Metadata

Priority: Medium | Effort: M (6h) | Domain: performance, frontend
Agent: @typescript-react-agent