1
0

perf: 前端打包产物优化——路由级懒加载和 vendor 分包

- 使用 React.lazy() + Suspense 实现路由级代码分割
- 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk
- 页面组件改为 export default 以支持动态导入
- 新增 bundle-optimization 规范,更新 frontend 导航规范
This commit is contained in:
2026-04-23 00:26:54 +08:00
parent 64dc66afa6
commit b3258e76df
8 changed files with 109 additions and 23 deletions

View File

@@ -422,23 +422,30 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 提供导航
前端 SHALL 使用 React Router v7 提供导航。
前端 SHALL 使用 React Router v7 提供导航,并支持路由级懒加载
#### Scenario: 路由配置
- **WHEN** 应用启动
- **THEN** 前端 SHALL 使用 React Router v7 Library 模式BrowserRouter
- **THEN** \`/providers\` 路径 SHALL 显示供应商管理页面
- **THEN** \`/stats\` 路径 SHALL 显示用量统计页面
- **THEN** \`/\` 路径 SHALL 重定向到 \`/providers\`
- **THEN** `/providers` 路径 SHALL 显示供应商管理页面
- **THEN** `/stats` 路径 SHALL 显示用量统计页面
- **THEN** `/` 路径 SHALL 重定向到 `/providers`
- **THEN** 不存在的路径 SHALL 显示 404 页面
#### Scenario: 路由级懒加载
- **WHEN** 用户访问某个路由
- **THEN** 前端 SHALL 使用 `React.lazy()` 按需加载对应页面组件
- **THEN** 页面组件加载期间 SHALL 显示 TDesign `Loading` 组件作为 fallback
- **THEN** 所有页面组件 SHALL 通过动态 `import()` 导入
#### Scenario: 导航菜单
- **WHEN** 用户点击导航中的"供应商管理"
- **THEN** 前端 SHALL 导航到 \`/providers\` 并高亮当前菜单项
- **THEN** 前端 SHALL 导航到 `/providers` 并高亮当前菜单项
- **WHEN** 用户点击导航中的"用量统计"
- **THEN** 前端 SHALL 导航到 \`/stats\` 并高亮当前菜单项
- **THEN** 前端 SHALL 导航到 `/stats` 并高亮当前菜单项
#### Scenario: URL 同步