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:
@@ -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 },
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user