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:
yangjianbo
2026-01-16 21:43:39 +08:00
parent eb432a49ed
commit 92234857f7
15 changed files with 4243 additions and 4 deletions

View File

@@ -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