Files

lanyuanxiaoyao f3df3a203b docs: 优化审查提示词，禁止 subagent 读取文件，明确 apply 阶段不动主规范

config.yaml: subagent 限定为计算密集/多步骤任务，文件读取用 Read 工具
prompt-proposal-review.md: 收集阶段加入读取约束和分步策略，复核补全待澄清清单
prompt-apply-review.md: 禁止同步主规范，新增 Spec 覆盖完整性扫描与补充流程

2026-05-20 17:44:02 +08:00

2.7 KiB

Raw Blame History

Vite Frontend Bundling

定义 Vite 作为前端构建工具的配置、产出结构和优化策略。

Purpose

使用 Vite 的 Rolldown 引擎完成前端打包，实现 code splitting、vendor chunk 分离和 CSS 优化，解决 Bun bundler 前端性能问题。

Requirements

Requirement: Vite 前端构建配置

系统 SHALL 使用 Vite 作为前端构建工具，配置文件位于项目根目录 vite.config.ts，以 src/web 为 root，产出到 dist/web/。

Scenario: 运行 Vite 生产构建

WHEN 构建脚本执行 bunx --bun vite build
THEN Vite SHALL 将 src/web/index.html 及其引用的所有模块构建到 dist/web/ 目录，包含 index.html 和 assets/ 子目录

Scenario: 产出文件名包含 content hash

WHEN Vite 构建完成
THEN assets/ 目录下的 JS 和 CSS 文件名 SHALL 包含 content hash（如 index-a1b2c3.js）

Requirement: Code Splitting 策略

系统 SHALL 配置 Vite 的 Rolldown code splitting，将 vendor 库分离为独立 chunks，并通过 React.lazy() 动态导入实现按需加载。

Scenario: React 相关库分离

WHEN Vite 构建完成
THEN react、react-dom、scheduler SHALL 被打包到名为 vendor-react 的独立 chunk

Scenario: TDesign 相关库分离

WHEN Vite 构建完成
THEN tdesign-react、tdesign-icons-react 相关模块 SHALL 被打包到名为 vendor-tdesign 的独立 chunk

Scenario: 图表库分离

WHEN Vite 构建完成
THEN recharts 和 d3-* 相关模块 SHALL 被打包到名为 vendor-chart 的独立 chunk

Scenario: TargetDetailDrawer 延迟加载

WHEN Vite 构建完成
THEN TargetDetailDrawer 及其依赖（recharts、D3、DateRangePicker 等）SHALL 通过 React.lazy() 动态导入，被 Rolldown 自动拆分为异步 chunk，不包含在初始加载的 JS 中

Scenario: Drawer 首次渲染无闪烁

WHEN 用户首次点击目标触发 Drawer 渲染
THEN Drawer SHALL 通过 <Suspense fallback={null}> 包裹，利用其默认 visible=false 状态避免加载期间的视觉闪烁

Requirement: CSS 处理

系统 SHALL 通过 Vite 处理 CSS 导入，产出独立的 CSS 文件。TDesign 组件样式 SHALL 保持全量导入方式。

Scenario: CSS 文件产出

WHEN Vite 构建完成
THEN 所有 CSS 导入 SHALL 被提取为独立的 .css 文件到 assets/ 目录

Scenario: CSS 压缩

WHEN Vite 执行生产构建
THEN 产出的 CSS 文件 SHALL 经过压缩处理

Scenario: TDesign CSS 全量导入

WHEN 前端入口文件初始化样式
THEN 系统 SHALL 通过 tdesign-react/dist/reset.css 和 tdesign-react/dist/tdesign.min.css 全量导入 TDesign 组件样式

2.7 KiB Raw Blame History Unescape Escape