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).
80 lines
4.4 KiB
Markdown
80 lines
4.4 KiB
Markdown
# 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 |
|