From dfc6ff52f7edb4403f2e4acd94851e0a3efc2834 Mon Sep 17 00:00:00 2001 From: curo1305 Date: Tue, 16 Jun 2026 21:11:46 +0200 Subject: [PATCH] =?UTF-8?q?docs(11-02):=20complete=20lazy-load=20routes=20?= =?UTF-8?q?plan=20=E2=80=94=20SUMMARY.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../11-02-SUMMARY.md | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 .planning/phases/11-visual-design-responsive-layout-cleanup/11-02-SUMMARY.md diff --git a/.planning/phases/11-visual-design-responsive-layout-cleanup/11-02-SUMMARY.md b/.planning/phases/11-visual-design-responsive-layout-cleanup/11-02-SUMMARY.md new file mode 100644 index 0000000..0b79ed2 --- /dev/null +++ b/.planning/phases/11-visual-design-responsive-layout-cleanup/11-02-SUMMARY.md @@ -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