AI:以下 6 大维度梳理了仍可进一步落地的优化方向

基于当前 WE2 项目的整体架构和已完成优化，我从以下 6 大维度梳理了仍可进一步落地的优化方向：
一、前端性能优化（高优先级）
1.1 Bundle 体积进一步压缩
现状 优化方向
vendor.js 1.01 MB 偏大 依赖分析：使用 webpack-bundle-analyzer 分析 vendor 包，识别可拆分/替换的库
引入了完整 echarts 按需引入：改为 import * as echarts from 'echarts/core' + 注册所需组件，可减少 300KB+
lodash-es 全量引入 按需引入：改为 import { debounce } from 'lodash-es' 或使用 lodash-webpack-plugin
dayjs 已引入但未检查是否重复 检查并替换：确认是否有 moment.js 被间接引入（检查 lock 文件），统一为 dayjs
1.2 运行时性能
typescript
// 高优先级：推广 OnPush 变更检测策略
@Component({
selector: 'app-list',
changeDetection: ChangeDetectionStrategy.OnPush, // ← 大量列表组件启用
})
优化项 具体措施
虚拟滚动 库存流水、操作日志等 1000+ 行数据表格，使用 ngx-virtual-scroller 或 cdk-virtual-scroll-viewport
图片懒加载 对 img 标签添加 loading="lazy"，dashboard 统计卡片图片按需加载
预加载策略 对高频模块（dashboard、待办）配置 preload，低频模块（报表）按需加载
1.3 网络层优化
HTTP 请求合并：当前列表页存在多个并行请求（如加载字典 + 加载数据），可封装 forkJoin 合并
接口防抖/节流：搜索框输入触发 API 时添加 debounceTime(300)
重复请求取消：使用 RxJS switchMap 或自定义 CancelToken 取消上一个未完成的请求
二、后端性能优化（中高优先级）
2.1 API 响应优化
typescript
// 当前 kanban.routes.ts 中存在大量 JS 内存计算
// 建议改为数据库聚合查询，减少数据传输
const weekReports = await reportRepo
.createQueryBuilder('r')
.select('DATE(r.reportDate)', 'date')
.addSelect('SUM(r.reportQty)', 'total')
.where('r.reportDate >= :weekStart', { weekStart })
.groupBy('DATE(r.reportDate)')
.getRawMany();
优化点 现状问题 改进方案
分页查询 使用 skip/take 深分页时性能下降 推广游标分页（cursor-based）或键集分页
批量操作 逐条插入/更新 实现 bulkInsert/bulkUpdate 接口，使用 INSERT ... VALUES (...), (...)
大数据导出 一次性加载所有数据到内存 流式查询 + Content-Disposition: attachment 分片下载
2.2 数据库优化
sql
-- 检查当前慢查询
SHOW VARIABLES LIKE 'slow_query%';
SHOW VARIABLES LIKE 'long_query_time';

-- 建议添加的复合索引（示例）
CREATE INDEX idx_inventory_material_warehouse ON inventory(material_id, warehouse_id, deleted_at);
CREATE INDEX idx_work_order_status_date ON work_order(status, created_at);
优化项 说明
慢查询分析 启用 MySQL slow_query_log，定期分析慢查询并优化
连接池调优 当前默认连接池，建议根据并发量调整 poolSize（默认 10）
读写分离 报表查询走只读从库，减轻主库压力
2.3 缓存策略深化
typescript
// 当前已接入 Redis 缓存，但可进一步优化
// 建议：对字典、配置、权限等低频变更数据增加缓存 TTL 和主动失效机制
@Cacheable({ ttl: 300, key: 'dict:categories' }) // 5分钟
async getDictCategories() { ... }
三、代码质量优化（中优先级）
3.1 前端代码质量
typescript
// 当前 app.component.ts 中存在内联 style
// 建议：提取为组件样式或使用 ngClass
<nb-action [style.margin]="'0 4px'"> // ← 当前