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:
45
frontend/src/__tests__/setup.ts
Normal file
45
frontend/src/__tests__/setup.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Vitest 测试环境设置
|
||||
* 提供全局 mock 和测试工具
|
||||
*/
|
||||
import { config } from '@vue/test-utils'
|
||||
import { vi } from 'vitest'
|
||||
|
||||
// Mock requestIdleCallback (Safari < 15 不支持)
|
||||
if (typeof globalThis.requestIdleCallback === 'undefined') {
|
||||
globalThis.requestIdleCallback = ((callback: IdleRequestCallback) => {
|
||||
return window.setTimeout(() => callback({ didTimeout: false, timeRemaining: () => 50 }), 1)
|
||||
}) as unknown as typeof requestIdleCallback
|
||||
}
|
||||
|
||||
if (typeof globalThis.cancelIdleCallback === 'undefined') {
|
||||
globalThis.cancelIdleCallback = ((id: number) => {
|
||||
window.clearTimeout(id)
|
||||
}) as unknown as typeof cancelIdleCallback
|
||||
}
|
||||
|
||||
// Mock IntersectionObserver
|
||||
class MockIntersectionObserver {
|
||||
observe = vi.fn()
|
||||
disconnect = vi.fn()
|
||||
unobserve = vi.fn()
|
||||
}
|
||||
|
||||
globalThis.IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver
|
||||
|
||||
// Mock ResizeObserver
|
||||
class MockResizeObserver {
|
||||
observe = vi.fn()
|
||||
disconnect = vi.fn()
|
||||
unobserve = vi.fn()
|
||||
}
|
||||
|
||||
globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
|
||||
|
||||
// Vue Test Utils 全局配置
|
||||
config.global.stubs = {
|
||||
// 可以在这里添加全局 stub
|
||||
}
|
||||
|
||||
// 设置全局测试超时
|
||||
vi.setConfig({ testTimeout: 10000 })
|
||||
Reference in New Issue
Block a user