# Bundle Size Optimization

> Reduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.

- Skill: `aj-geddes-useful-ai-prompts/bundle-size-optimization` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add aj-geddes-useful-ai-prompts/bundle-size-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aj-geddes-useful-ai-prompts/bundle-size-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aj-geddes (https://skillmd.com/u/aj-geddes-useful-ai-prompts)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/aj-geddes-useful-ai-prompts/bundle-size-optimization

---


# Bundle Size Optimization

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Smaller bundles download faster, parse faster, and execute faster, dramatically improving perceived performance especially on slower networks.

## When to Use

- Build process optimization
- Bundle analysis before deployment
- Performance baseline improvement
- Mobile performance focus
- After adding new dependencies

## Quick Start

Minimal working example:

```javascript
// Analyze bundle composition

class BundleAnalysis {
  analyzeBundle() {
    return {
      tools: [
        "webpack-bundle-analyzer",
        "Source Map Explorer",
        "Bundle Buddy",
        "Bundlephobia",
      ],
      metrics: {
        total_size: "850KB gzipped",
        main_js: "450KB",
        main_css: "120KB",
        vendor: "250KB",
        largest_lib: "moment.js (67KB)",
      },
      breakdown: {
        react: "85KB (10%)",
        lodash: "45KB (5%)",
        moment: "67KB (8%)",
        other: "653KB (77%)",
      },
    };
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Bundle Analysis](references/bundle-analysis.md) | Bundle Analysis |
| [Optimization Techniques](references/optimization-techniques.md) | Optimization Techniques |
| [Implementation Strategy](references/implementation-strategy.md) | Implementation Strategy |
| [Best Practices](references/best-practices.md) | Best Practices |

## Best Practices

### ✅ DO

- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying

### ❌ DON'T

- Skip testing or validation
- Ignore error handling
- Hard-code configuration values