Files

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

- 使用 React.lazy() + Suspense 实现路由级代码分割
- 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk
- 页面组件改为 export default 以支持动态导入
- 新增 bundle-optimization 规范，更新 frontend 导航规范

2026-04-23 00:26:54 +08:00

1.7 KiB

Raw Blame History

前端构建包优化

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）

1.7 KiB Raw Blame History Unescape Escape