Paths: File paths (shared/, references/, ../ln-*) are relative to skills repo root. If not found at CWD, locate this SKILL.md directory and go up one level for repo root.

ln-832-bundle-optimizer

Type: L3 Worker Category: 8XX Optimization Parent: ln-830-code-modernization-coordinator

Reduces JavaScript/TypeScript bundle size. Metric: bundle size in bytes. Each optimization verified via build with keep/discard pattern. JS/TS projects only.

---

Overview

Aspect	Details
Input	JS/TS project (auto-detect from package.json)
Output	Smaller bundle, optimization report
Scope	JS/TS only (skip for other stacks)

---

Workflow

Phases: Pre-flight → Baseline → Analyze → Optimize Loop → Report

---

Phase 0: Pre-flight Checks

Check	Required	Action if Missing
package.json exists	Yes	Block (not a JS/TS project)
Build command available	Yes	Block (need build for size measurement)
dist/ or build/ output	Yes	Run build first to establish baseline
Git clean state	Yes	Block (need clean baseline for revert)

MANDATORY READ: Load shared/references/ci_tool_detection.md — use Build section for build command detection.

Worktree & Branch Isolation

MANDATORY READ: Load shared/references/git_worktree_fallback.md — use ln-832 row.

---

Phase 1: Establish Baseline

Measure Current Bundle Size

1. Run build: npm run build (or detected build command)
2. Measure: total size of dist/ or build/ directory
3. Record: baseline_bytes, baseline_files

Metric	How
Total size	Sum of all files in output directory
Per-chunk sizes	Individual JS/CSS file sizes
Source map excluded	Do not count .map files

---

Phase 2: Analyze Opportunities

Analysis Tools

Check	Tool	What It Finds
Unused dependencies	npx depcheck	Packages in package.json not imported anywhere
Bundle composition	npx vite-bundle-visualizer or webpack-bundle-analyzer	Large dependencies, duplicates
Tree-shaking gaps	Manual scan	import * as instead of named imports
Code splitting	Route analysis	Large initial bundle, lazy-loadable routes

Optimization Categories

Category	Example	Typical Savings
Remove unused deps	lodash installed but not imported	10-50KB per dep
Named imports	import { debounce } from 'lodash-es' vs import _ from 'lodash'	50-200KB
Lighter alternatives	date-fns instead of moment	50-300KB
Dynamic imports	React.lazy(() => import('./HeavyComponent'))	Reduce initial load
CSS optimization	Purge unused CSS, minify	10-100KB

---

Phase 3: Optimize Loop (Keep/Discard)

Per-Optimization Cycle

FOR each optimization (O1..ON):
  1. APPLY: Make change (remove dep, rewrite import, add lazy load)
  2. BUILD: Run build command
     IF build FAILS → DISCARD (revert) → next optimization
  3. MEASURE: New bundle size
  4. COMPARE:
     IF new_bytes < baseline_bytes → KEEP (new baseline = new_bytes)
     IF new_bytes >= baseline_bytes → DISCARD (revert, no improvement)
  5. LOG: Record result

Keep/Discard Decision

Condition	Decision
Build fails	DISCARD
Bundle smaller	KEEP (update baseline)
Bundle same or larger	DISCARD

Optimization Order

Order	Category	Reason
1	Remove unused deps	Safest, immediate savings
2	Named imports / tree-shaking	Medium risk, good savings
3	Lighter alternatives	Higher risk (API changes)
4	Dynamic imports / code splitting	Structural change, test carefully
5	CSS optimization	Lowest priority

---

Phase 4: Report Results

Report Schema

Field	Description
project	Project path
baseline_bytes	Original bundle size
final_bytes	Final bundle size
reduction_bytes	Bytes saved
reduction_percent	Percentage reduction
optimizations_applied	Count of kept optimizations
optimizations_discarded	Count + reasons
details[]	Per-optimization: category, description, bytes saved
deps_removed[]	Unused dependencies removed

---

Configuration

Options:
  # Build
  build_command: ""             # Auto-detect from ci_tool_detection.md
  output_dir: ""                # Auto-detect: dist/ or build/

  # Analysis
  run_depcheck: true
  run_bundle_analyzer: false    # Opens browser, skip in CI

  # Optimization scope
  remove_unused_deps: true
  fix_tree_shaking: true
  suggest_alternatives: true
  add_code_splitting: false     # Structural change, opt-in

  # Verification
  run_build: true

---

Error Handling

Error	Cause	Solution
depcheck not available	Not installed	npx depcheck (runs without install)
Build fails after removal	Dep used in dynamic import / config	Revert, mark as false positive
No output directory	Non-standard build setup	Check package.json for output config
Not a JS/TS project	No package.json	Skip entirely with info message

---

References

• shared/references/ci_tool_detection.md (build detection)

---

Definition of Done

• JS/TS project confirmed (package.json present)
• Baseline bundle size measured (build + measure dist/)
• Unused deps identified via depcheck
• Each optimization applied with keep/discard: build passes + smaller → keep
• Compound: each kept optimization updates baseline for next
• Report returned with baseline, final, reduction%, per-optimization details

---

Version: 1.0.0 Last Updated: 2026-03-08