From df981fbcedafbc54a7d49dedb13cd06026e75198 Mon Sep 17 00:00:00 2001 From: curo1305 Date: Wed, 17 Jun 2026 07:58:14 +0200 Subject: [PATCH] =?UTF-8?q?docs(11-06):=20write=20Phase=2011=20bundle=20fi?= =?UTF-8?q?nal=20summary=20=E2=80=94=20baseline=20vs=20final=20comparison?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Baseline: 264.63 kB main / 89.34 kB gzip / 15 JS chunks Final: 183.62 kB main / 64.83 kB gzip / 21 JS chunks Delta: -81.01 kB raw (-30.6%), -24.51 kB gzip (-27.4%), +6 new lazy chunks Documents the 5 new lazy route chunks from Plan 11-02 (SettingsView, TopicsView, DocumentView, CloudStorageView, CloudFolderView), CSS growth from new responsive Tailwind classes, and the intentional synchronous FileManagerView decision (D-10, critical first authenticated surface). --- .planning/perf/phase11-final-summary.md | 79 +++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 .planning/perf/phase11-final-summary.md diff --git a/.planning/perf/phase11-final-summary.md b/.planning/perf/phase11-final-summary.md new file mode 100644 index 0000000..92905d4 --- /dev/null +++ b/.planning/perf/phase11-final-summary.md @@ -0,0 +1,79 @@ +# 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 |