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:
@@ -58,7 +58,49 @@ export default defineConfig({
|
||||
},
|
||||
build: {
|
||||
outDir: '../backend/internal/web/dist',
|
||||
emptyOutDir: true
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
/**
|
||||
* 手动分包配置
|
||||
* 分离第三方库并按功能合并应用代码,避免循环依赖
|
||||
*/
|
||||
manualChunks(id: string) {
|
||||
if (id.includes('node_modules')) {
|
||||
// Vue 核心库
|
||||
if (
|
||||
id.includes('/vue/') ||
|
||||
id.includes('/vue-router/') ||
|
||||
id.includes('/pinia/') ||
|
||||
id.includes('/@vue/')
|
||||
) {
|
||||
return 'vendor-vue'
|
||||
}
|
||||
|
||||
// UI 工具库(较大,单独分离)
|
||||
if (id.includes('/@vueuse/') || id.includes('/xlsx/')) {
|
||||
return 'vendor-ui'
|
||||
}
|
||||
|
||||
// 图表库
|
||||
if (id.includes('/chart.js/') || id.includes('/vue-chartjs/')) {
|
||||
return 'vendor-chart'
|
||||
}
|
||||
|
||||
// 国际化
|
||||
if (id.includes('/vue-i18n/') || id.includes('/@intlify/')) {
|
||||
return 'vendor-i18n'
|
||||
}
|
||||
|
||||
// 其他小型第三方库合并
|
||||
return 'vendor-misc'
|
||||
}
|
||||
|
||||
// 应用代码:按入口点自动分包,不手动干预
|
||||
// 这样可以避免循环依赖,同时保持合理的 chunk 数量
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
|
||||
Reference in New Issue
Block a user