docs(11-02): complete lazy-load routes plan — SUMMARY.md

2026-06-16 21:11:46 +02:00
parent 4fa07b3874
commit dfc6ff52f7
1 changed files with 98 additions and 0 deletions
@@ -0,0 +1,98 @@
+---
+phase: 11-visual-design-responsive-layout-cleanup
+plan: 2
+subsystem: frontend/router
+tags: [perf, lazy-load, routing, bundle-split, PERF-03]
+dependency_graph:
+  requires: [11-01]
+  provides: [perf03-lazy-routes]
+  affects: [frontend/src/router/index.js, frontend/src/router/__tests__/router.guard.test.js]
+tech_stack:
+  added: []
+  patterns: [dynamic import via () => import() for non-critical route components]
+key_files:
+  created: []
+  modified:
+    - frontend/src/router/index.js
+    - frontend/src/router/__tests__/router.guard.test.js
+decisions:
+  - "FileManagerView stays synchronous for / per D-10 — critical first authenticated surface; lazy-loading would delay initial paint for the most common entry point"
+  - "/folders/:folderId reuses the synchronous FileManagerView so no new chunk is created for folder navigation"
+  - "All other authenticated user routes (Topics, Document, Settings, Cloud, CloudFolder) are now lazy-loaded via () => import()"
+  - "Admin child routes and auth routes were already lazy-loaded and remain unchanged"
+metrics:
+  duration_minutes: 2
+  tasks_completed: 6
+  files_created: 0
+  files_modified: 2
+  completed_date: "2026-06-16"
+---
+
+# Phase 11 Plan 2: Lazy-Load Non-Critical Routes Summary
+
+Lazy-loaded 5 non-critical authenticated route components, reducing the main JS bundle from 264.63 kB to 180.17 kB and emitting 5 separate route chunks, satisfying PERF-03.
+
+## What Was Built
+
+### Tasks 1-4 — Router lazy-loading
+
+`frontend/src/router/index.js` updated:
+
+- **Removed** static `import` statements for `TopicsView`, `DocumentView`, `SettingsView`, `CloudStorageView`, `CloudFolderView`.
+- **Replaced** each with an inline `() => import('../views/...View.vue')` dynamic import on the route's `component` field.
+- **Kept** `FileManagerView` as the sole static synchronous import (decision D-10). A comment block in `router/index.js` documents the rationale.
+- **Kept** `/folders/:folderId` using the synchronous `FileManagerView` component — no new chunk needed since the component is already in the initial bundle.
+- **Preserved** all existing lazy imports for admin children, auth views, `SharedView`, and `AdminLayout`.
+
+Acceptance criterion confirmed: `grep "import .*View" frontend/src/router/index.js` returns only `FileManagerView`.
+
+### Task 5 — Extended router guard tests
+
+`frontend/src/router/__tests__/router.guard.test.js` extended with 15 new tests across 2 new describe blocks:
+
+- `router — admin guard` extended with: non-admin blocked from `/admin/users` and `/admin/quotas` (child route inheritance via `to.matched.some()`), admin redirected away from `/settings` and `/cloud` (D-09)
+- `router — refresh-before-guard` (new): verifies `refresh()` is called when `accessToken` is null, redirect to `/login` when refresh fails, no refresh call for public routes
+- `router — lazy-loaded routes resolve` (new): verifies all 5 newly-lazy routes (`/topics`, `/topics/:name`, `/document/:id`, `/settings`, `/cloud`, `/cloud/:provider/:folderId`) navigate correctly for authenticated regular users; `/folders/:folderId` and `/shared` also covered
+
+All 234 tests pass (up from 219 in Plan 11-01).
+
+### Task 6 — Build verification
+
+`npm run build` succeeds; route chunks emitted:
+
+| Chunk | Size |
+|-------|------|
+| `CloudFolderView-*.js` | 1.99 kB |
+| `CloudStorageView-*.js` | 2.32 kB |
+| `DocumentView-*.js` | 9.17 kB |
+| `TopicsView-*.js` | 10.98 kB |
+| `SettingsView-*.js` | 60.72 kB |
+| Main bundle (`index-*.js`) | 180.17 kB (was 264.63 kB) |
+
+Main bundle reduction: **84.46 kB raw** (~32%).
+
+## Verification
+
+- `rg "import .*View" frontend/src/router/index.js` returns only `FileManagerView` — confirmed
+- Admin child routes remain lazy-loaded — confirmed
+- `npm test`: 234 tests pass, 30 test files
+- `npm run build`: succeeds, split route chunks emitted
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None.
+
+## Threat Flags
+
+None — this plan makes no network, auth, or schema changes. Guard behavior is unchanged; only the loading strategy for view components was modified.
+
+## Self-Check: PASSED
+
+- `frontend/src/router/index.js`: modified, only `FileManagerView` statically imported
+- `frontend/src/router/__tests__/router.guard.test.js`: modified, 15 new tests
+- Commit `4fa07b3` exists in git log
+- Build output shows 5 route chunk files