curo1305
df981fbced
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).
4.4 KiB
Phase 11 Bundle Final Summary — Baseline vs. Final Comparison
Captured: 2026-06-17 Vite version: 6.4.3 Node environment: production
Command
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:
- SettingsView — largest win; downloads only when user goes to
/settings - TopicsView — downloads only when navigating to
/topicsor topic detail - DocumentView — downloads only when opening a document detail page
- CloudStorageView — downloads only when user opens cloud storage
- 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 |