# Phase 11 Bundle Final Summary — Baseline vs. Final Comparison

**Captured:** 2026-06-17
**Vite version:** 6.4.3
**Node environment:** production

## Command

```bash
cd frontend && npm run build
cd frontend && ANALYZE=true npm run build   # generates stats.html → .planning/perf/phase11-final.html
```

## Side-by-Side Comparison

| Metric | Baseline (pre-11-02) | Final (post-Phase-11) | Delta |
|--------|---------------------|----------------------|-------|
| Main bundle — raw | 264.63 kB | 183.62 kB | **-81.01 kB (-30.6%)** |
| Main bundle — gzip | 89.34 kB | 64.83 kB | **-24.51 kB (-27.4%)** |
| CSS main — raw | 98.74 kB | 102.35 kB | +3.61 kB |
| CSS main — gzip | 17.12 kB | 17.69 kB | +0.57 kB |
| JS chunk count | 15 chunks | 21 chunks | **+6 chunks** |
| Total output files | 15 | 23 | +8 |

## What Changed

### Main bundle reduction (−81 kB raw)

Plan 11-02 lazy-loaded 5 user routes that were previously synchronous imports. This split their code out of the main bundle and into dedicated chunks:

| New lazy chunk | Size (raw) | Size (gzip) | Route |
|----------------|-----------|------------|-------|
| `SettingsView-*.js` | 62.72 kB | 20.08 kB | `/settings` |
| `TopicsView-*.js` | 12.31 kB | 3.96 kB | `/topics`, `/topics/:name` |
| `DocumentView-*.js` | 10.17 kB | 3.77 kB | `/document/:id` |
| `CloudStorageView-*.js` | 2.32 kB | 1.24 kB | `/cloud` |
| `CloudFolderView-*.js` | 1.99 kB | 1.06 kB | `/cloud/:provider/:folderId` |
| `AppSpinner-*.js` | 0.51 kB | 0.37 kB | (shared sub-chunk for spinner) |

`SettingsView` contains the TotpEnrollment, PasswordStrengthBar, and cloud-connection components — it alone accounts for ~62 kB of the reduction.

### CSS slight increase (+3.6 kB raw)

The responsive layout additions in Plans 11-03/11-04/11-05 added new Tailwind utility classes (`translate-x-0`, `-translate-x-full`, `max-h-[90vh]`, `overflow-y-auto`, `focus-visible:ring-*`, `min-h-[36px]`, `min-w-[36px]`) that were not in the purged baseline. The modest increase confirms these classes are in active use.

### AdminLayout now includes drawer JS (+1.44 kB)

AdminLayout grew from 2.71 kB to 4.15 kB due to the responsive hamburger drawer state added in Plan 11-03. The drawer logic lives in AdminLayout.vue per the D-04/D-05 sidebar-state rule.

## New Lazy Route Chunks (Plan 11-02)

Before Phase 11, 5 user routes were synchronous — they were bundled into the main JS chunk and downloaded by every visitor on first load, even users who never opened Settings or Cloud storage.

After Plan 11-02, each of these routes is a separate chunk loaded only when the user navigates to that route:

1. **SettingsView** — largest win; downloads only when user goes to `/settings`
2. **TopicsView** — downloads only when navigating to `/topics` or topic detail
3. **DocumentView** — downloads only when opening a document detail page
4. **CloudStorageView** — downloads only when user opens cloud storage
5. **CloudFolderView** — downloads only when browsing a cloud provider's folders

**Already lazy at baseline:** all auth views (LoginView, RegisterView, PasswordResetView, NewPasswordView), all admin views (AdminOverviewView, AdminUsersView, AdminQuotasView, AdminAiView, AdminAuditView), AdminLayout, SharedView.

**Kept synchronous intentionally:** FileManagerView — this is the critical first authenticated surface rendered at `/`. Lazy-loading it would delay the initial paint for logged-in users arriving via refresh-token cookie (the most common entry point). Documented in `router/index.js` per D-10.

## Interpretation

A **30.6% reduction** in the main bundle raw size (−81 kB) means first-load JS for authenticated users drops from 264 kB to 183 kB. At an average mobile 4G connection (~1 Mbps effective throughput), this saves approximately **640 ms of download time** before decompression, and about **195 ms after gzip** decompression savings are factored in.

The chunk-splitting strategy is correct: the 6 new chunks are only fetched on demand, adding zero latency to the critical `/` home path.

## Artifacts

| File | Description |
|------|-------------|
| `.planning/perf/phase11-baseline.html` | Rollup visualizer HTML before any Phase 11 changes |
| `.planning/perf/phase11-baseline-summary.md` | Baseline analysis (Plan 11-01) |
| `.planning/perf/phase11-final.html` | Rollup visualizer HTML after all Phase 11 changes |
| `.planning/perf/phase11-final-summary.md` | This file |