优化前端加载性能

[Jason-prd]

问题描述

当前前端首屏加载时间较长，影响用户体验。特别是在工作流设计器页面，节点较多时会出现卡顿。

优化方向

1. 懒加载（Lazy Loading）

• 对 ExecutionLogsPage、SettingsPage 等非首屏页面启用 React.lazy + Suspense
• 预计可减少首屏 JS bundle 体积 30-40%

2. React Flow 性能优化

• 对大型工作流（节点 > 50）启用
  odesDraggable,
  odesConnectable, elementsSelectable 动态开关
• 使用 shouldElementBeSelected 过滤非活跃节点渲染
• 参考：React Flow Performance Guide

3. 状态管理优化

• 将 executionStore 中大型执行日志数据进行分页 + 虚拟化
• 避免 Zustand store 存储过大 JSON 数据

4. 资源优化

• 对图片资源启用 WebP 格式 + CDN 加速
• 检查 �ite.config.ts 中 terser / esbuild 压缩配置

验收标准

• Lighthouse Performance Score ≥ 90（当前约 72）
• 工作流设计器在 20 节点内保持 60 FPS 拖拽流畅度
• 首屏加载时间（FCP）≤ 1.5s

标签: good first issue enhancement

适合前端开发者：React / TypeScript / Vite 有经验的贡献者

欢迎程度: ⭐⭐⭐ 非常适合前端新手贡献！