perf(11-02): lazy-load non-critical routes — PERF-03

- Keep FileManagerView synchronous for / per D-10 (critical first authenticated surface)
- Lazy-load TopicsView, DocumentView, SettingsView, CloudStorageView, CloudFolderView
- /folders/:folderId reuses synchronous FileManagerView (no split, same component)
- Main bundle reduced from 264.63 kB to 180.17 kB (split into 5 new route chunks)
- Extend router guard tests: admin child route blocking, refresh-before-guard flow,
  lazy-loaded route resolution — 234 tests pass (15 new tests added)
This commit is contained in:
curo1305
2026-06-16 21:10:48 +02:00
parent 7547e8ae97
commit 4fa07b3874
2 changed files with 171 additions and 14 deletions
+13 -12
View File
@@ -1,19 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '../stores/auth.js'
// FileManagerView is kept synchronous because it is the critical first authenticated
// surface rendered at '/'. Lazy-loading it would delay the initial paint for logged-in
// users with a valid refresh cookie (the most common app entry point).
// All other authenticated routes are lazy-loaded to split them into separate chunks.
// See PERF-03 / Plan 11-02 and D-10 in 11-CONTEXT.md.
import FileManagerView from '../views/FileManagerView.vue'
import TopicsView from '../views/TopicsView.vue'
import DocumentView from '../views/DocumentView.vue'
import SettingsView from '../views/SettingsView.vue'
import CloudFolderView from '../views/CloudFolderView.vue'
import CloudStorageView from '../views/CloudStorageView.vue'
const routes = [
// File manager is the home — handles both root and folder views
// File manager is the home — handles both root and folder views.
// FileManagerView stays synchronous (see comment above).
{ path: '/', component: FileManagerView },
{ path: '/topics', component: TopicsView },
{ path: '/topics/:name', component: TopicsView },
{ path: '/document/:id', component: DocumentView },
{ path: '/settings', component: SettingsView },
{ path: '/topics', component: () => import('../views/TopicsView.vue') },
{ path: '/topics/:name', component: () => import('../views/TopicsView.vue') },
{ path: '/document/:id', component: () => import('../views/DocumentView.vue') },
{ path: '/settings', component: () => import('../views/SettingsView.vue') },
{
path: '/login',
@@ -57,13 +58,13 @@ const routes = [
{
path: '/cloud',
name: 'cloud',
component: CloudStorageView,
component: () => import('../views/CloudStorageView.vue'),
meta: { requiresAuth: true },
},
{
path: '/cloud/:provider/:folderId(.*)',
name: 'cloud-folder',
component: CloudFolderView,
component: () => import('../views/CloudFolderView.vue'),
meta: { requiresAuth: true },
},