lanyuanxiaoyao
b3258e76df
- 使用 React.lazy() + Suspense 实现路由级代码分割 - 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk - 页面组件改为 export default 以支持动态导入 - 新增 bundle-optimization 规范，更新 frontend 导航规范
53 lines
1.7 KiB
Markdown
53 lines
1.7 KiB
Markdown
# 前端构建包优化
|
||
|
||
## Purpose
|
||
|
||
TBD - 配置 Vite 构建优化策略，包括路由级代码分割和 Vendor 分包
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 路由级代码分割
|
||
|
||
前端 SHALL 使用 `React.lazy()` 和动态 `import()` 实现路由级代码分割，每个页面组件按需加载。
|
||
|
||
#### Scenario: 页面组件懒加载
|
||
|
||
- **WHEN** 应用启动
|
||
- **THEN** 路由配置 SHALL 使用 `lazy(() => import(...))` 导入所有页面组件（ProvidersPage、StatsPage、SettingsPage、NotFound）
|
||
- **THEN** 页面组件 SHALL NOT 使用静态 `import` 语句直接导入
|
||
|
||
#### Scenario: Suspense 加载边界
|
||
|
||
- **WHEN** 页面 chunk 尚未加载完成
|
||
- **THEN** 路由出口 SHALL 显示 TDesign `Loading` 组件作为 fallback
|
||
- **THEN** `Suspense` 边界 SHALL 包裹在 `<Routes>` 外层
|
||
|
||
### Requirement: Vendor 分包
|
||
|
||
前端 SHALL 配置 Vite `build.rollupOptions.output.manualChunks` 将第三方库拆分为独立 chunk。
|
||
|
||
#### Scenario: React 核心 chunk
|
||
|
||
- **WHEN** 执行生产构建
|
||
- **THEN** react、react-dom、react-router SHALL 被打包为独立 chunk（vendor-react）
|
||
|
||
#### Scenario: TDesign chunk
|
||
|
||
- **WHEN** 执行生产构建
|
||
- **THEN** tdesign-react、tdesign-icons-react SHALL 被打包为独立 chunk（vendor-tdesign）
|
||
|
||
#### Scenario: Recharts chunk
|
||
|
||
- **WHEN** 执行生产构建
|
||
- **THEN** recharts SHALL 被打包为独立 chunk（vendor-recharts）
|
||
|
||
#### Scenario: chunk 告警阈值
|
||
|
||
- **WHEN** 执行生产构建
|
||
- **THEN** `build.chunkSizeWarningLimit` SHALL 设置为 700，避免 vendor chunk 误触发告警
|
||
|
||
#### Scenario: chunk 命名
|
||
|
||
- **WHEN** 执行生产构建
|
||
- **THEN** vendor chunk 文件名 SHALL 包含 chunk 名称前缀（如 `vendor-react-[hash].js`）
|