ln-832-bundle-optimizer
Reduces JS/TS bundle size via tree-shaking, code splitting, and unused dependency removal. Use when optimizing frontend bundle size.
What this skill does
> **Paths:** File paths (`references/`, `../ln-*`) are relative to this skill directory.
# ln-832-bundle-optimizer
**Type:** L3 Worker
**Category:** 8XX Optimization
Reduces JavaScript or TypeScript bundle size using keep/discard verification. JS/TS projects only.
---
## Overview
| Aspect | Details |
|--------|---------|
| **Input** | JS/TS project path plus optional optimization scope |
| **Output** | Smaller bundle plus a machine-readable modernization summary |
| **Scope** | JS/TS only |
---
## Workflow
**Phases:** Pre-flight -> Baseline -> Analyze -> Optimize Loop -> Report
---
## Phase 0: Pre-flight Checks
| Check | Required | Action if Missing |
|-------|----------|-------------------|
| `package.json` exists | Yes | Block optimization |
| Build command available | Yes | Block optimization |
| Output directory (`dist/` or `build/`) detectable | Yes | Build once to establish baseline |
| Workspace baseline safe | Yes | In managed runs coordinator already prepared it; in standalone runs protect rollback locally |
**MANDATORY READ:** Load `references/ci_tool_detection.md` for build detection.
Tool policy: follow host AGENTS.md MCP preferences; load `references/mcp_tool_preferences.md` and `references/mcp_integration_patterns.md` only when host policy is absent or MCP behavior is unclear.
Use `hex-graph` first when hotspots or clone groups materially improve optimization targeting. Use `hex-line` first for local code and config reads when available. If MCP is unavailable, unsupported, or not indexed, continue with built-in `Read/Grep/Glob/Bash` and state the fallback in the summary.
### Runtime Coordination
Managed runs receive deterministic `runId` and exact `summaryArtifactPath` from `ln-830`.
Standalone runs remain supported; if runtime arguments are omitted, generate a standalone run-scoped artifact before returning.
---
## Phase 1: Establish Baseline
```text
1. Run the detected build command.
2. Measure total size of the output directory.
3. Record baseline bytes and per-chunk sizes.
```
| Metric | How |
|--------|-----|
| Total size | Sum all bundle output files except source maps |
| Per-chunk sizes | Measure individual JS and CSS files |
| Source map handling | Exclude `.map` files |
---
## Phase 2: Analyze Opportunities
| Check | Tool | What It Finds |
|-------|------|---------------|
| Unused dependencies | `depcheck` or equivalent | Packages not imported anywhere |
| Bundle composition | Bundle analyzer | Large dependencies or duplicates |
| Tree-shaking gaps | Manual scan | Namespace imports or heavy entrypoints |
| Code splitting gaps | Route analysis | Lazy-load candidates |
Optimization categories:
| Category | Example | Typical Savings |
|----------|---------|----------------|
| Remove unused deps | dead dependencies | 10-50KB per package |
| Named imports | `lodash-es` named imports | 50-200KB |
| Lighter alternatives | replace heavy date or utility libs | 50-300KB |
| Dynamic imports | lazy-load heavy components | lower initial bundle |
| CSS optimization | remove unused CSS, minify | 10-100KB |
---
## Phase 3: Optimize Loop (Keep/Discard)
Per-optimization cycle:
```text
FOR each optimization:
1. APPLY the change
2. BUILD
IF build fails -> DISCARD and revert
3. MEASURE new bundle size
4. KEEP only if the bundle is smaller than the current baseline
5. LOG the result
```
Stop conditions:
| Condition | Action |
|-----------|--------|
| All optimizations processed | Stop and report |
| 3 consecutive discards | Stop for plateau |
| Build infrastructure breaks | Revert to last keep and stop |
| Bundle already below target | Stop and report |
Optimization order:
1. remove unused dependencies
2. improve tree-shaking and imports
3. replace heavy libraries
4. introduce code splitting
5. optimize CSS
---
## Phase 4: Report Results
| 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 plus reasons |
| `deps_removed[]` | Dependencies removed |
| `details[]` | Per-optimization savings |
| `artifact_path` | Durable worker report path, if written |
---
## Configuration
```yaml
Options:
build_command: "" # Auto-detect
output_dir: "" # Auto-detect
run_depcheck: true
run_bundle_analyzer: false
remove_unused_deps: true
fix_tree_shaking: true
replace_heavy_libraries: true
enable_code_splitting: true
```
---
## Error Handling
| Error | Cause | Solution |
|-------|-------|----------|
| Build fails after optimization | Invalid code or config change | Revert that optimization |
| No size reduction | Optimization ineffective | Discard it |
| Analyzer unavailable | Tooling missing | Continue with manual inspection |
---
## References
- [optimization_categories.md](references/optimization_categories.md)
- `references/ci_tool_detection.md`
---
## Runtime Summary Artifact
**MANDATORY READ:** Load `references/coordinator_summary_contract.md`
Emit a `modernization-worker` summary envelope.
Managed mode:
- `ln-830` passes deterministic `runId` and exact `summaryArtifactPath`
- write the summary to the provided `summaryArtifactPath`
Standalone mode:
- omit `runId` and `summaryArtifactPath`
- write `.hex-skills/runtime-artifacts/runs/{run_id}/modernization-worker/ln-832--{identifier}.json`
**Monitor (2.1.98+):** For build commands in keep/discard loop expected >30s, use `Monitor`. Fallback: `Bash(run_in_background=true)`.
## Definition of Done
- [ ] Baseline bundle size established from real build output
- [ ] Optimization opportunities analyzed from bundle composition and project usage
- [ ] Each optimization evaluated with keep/discard verification
- [ ] Only size-reducing optimizations kept
- [ ] Final report captures bundle delta, discarded attempts, and removed dependencies
- [ ] `modernization-worker` summary artifact written to the managed or standalone path
---
**Version:** 1.0.0
**Last Updated:** 2026-03-08
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.