perf(前端): 优化页面加载性能和用户体验
- 添加路由预加载功能,使用 requestIdleCallback 在浏览器空闲时预加载 - 配置 Vite manualChunks 分离 vendor 库(vue/ui/chart/i18n/misc) - 新增 NavigationProgress 导航进度条组件,支持防闪烁和无障碍 - 集成 Vitest 测试框架,添加 40 个单元测试和集成测试 - 支持 prefers-reduced-motion 和暗色模式 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,8 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useNavigationLoadingState } from '@/composables/useNavigationLoading'
|
||||
import { useRoutePrefetch } from '@/composables/useRoutePrefetch'
|
||||
|
||||
/**
|
||||
* Route definitions with lazy loading
|
||||
@@ -326,7 +328,14 @@ const router = createRouter({
|
||||
*/
|
||||
let authInitialized = false
|
||||
|
||||
// 初始化导航加载状态和预加载
|
||||
const navigationLoading = useNavigationLoadingState()
|
||||
const routePrefetch = useRoutePrefetch()
|
||||
|
||||
router.beforeEach((to, _from, next) => {
|
||||
// 开始导航加载状态
|
||||
navigationLoading.startNavigation()
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// Restore auth state from localStorage on first navigation (page refresh)
|
||||
@@ -398,6 +407,17 @@ router.beforeEach((to, _from, next) => {
|
||||
next()
|
||||
})
|
||||
|
||||
/**
|
||||
* Navigation guard: End loading and trigger prefetch
|
||||
*/
|
||||
router.afterEach((to) => {
|
||||
// 结束导航加载状态
|
||||
navigationLoading.endNavigation()
|
||||
|
||||
// 触发路由预加载(在浏览器空闲时执行)
|
||||
routePrefetch.triggerPrefetch(to)
|
||||
})
|
||||
|
||||
/**
|
||||
* Navigation guard: Error handling
|
||||
* Handles dynamic import failures caused by deployment updates
|
||||
|
||||
Reference in New Issue
Block a user