Skip to content

优化_前端.md

Latest commit

 

History

History
87 lines (64 loc) · 3.57 KB

优化_前端.md

File metadata and controls

87 lines (64 loc) · 3.57 KB
Raw

前端构建配置优化总结

优化时间

2026-06-13

修改文件

  1. frontend/package.json
  2. frontend/vite.config.ts
  3. frontend/tsconfig.app.json（检查，无需修改）
  4. frontend/tsconfig.node.json（检查，无需修改）

1. package.json 版本修复

TypeScript 版本降级

  • 修改: typescript: "~6.0.2" → typescript: "~5.7.3"
  • 原因: TypeScript 6.x 不存在，最新稳定版为 5.7.x。~5.7.3 锁定 5.7 的 patch 版本，确保兼容性。

@types/node 版本修正

  • 修改: @types/node: "^25.5.0" → @types/node: "^22.15.3"
  • 原因: Node.js 22 是当前 LTS 版本，@types/node@25.x 不存在。^22.15.3 是 Node 22 的最新 types 包。

@vitejs/plugin-react 版本回退

  • 修改: @vitejs/plugin-react: "^6.0.1" → @vitejs/plugin-react: "^4.4.1"
  • 原因: Vite 7 刚发布，@vitejs/plugin-react 6.x 尚未稳定适配。4.4.1 是匹配 Vite 5/6 的成熟版本，避免 peer dependency 冲突。

移除弃用类型包

  • 移除: @types/tesseract.js (v2.0.0)
    • 原因: tesseract.js@7.0.0 自带 TypeScript 类型声明，无需额外安装 @types/tesseract.js。后者已弃用且版本陈旧。
  • 移除: @types/dompurify (v3.2.0)
    • 原因: dompurify@3.x 从 v3 开始内置类型声明文件，@types/dompurify 包已冗余。

依赖保留说明

  • pdf-parse 与 pdfjs-dist 功能确有重叠，但本次优化仅做配置修复，未移除该依赖。建议后续评估是否统一使用 pdfjs-dist 并移除 pdf-parse。
  • @types/d3 仍需保留，因为 d3 本身不自带完整的 TypeScript 类型。
  • @types/dagre 仍需保留，因为 dagre 本身不自带类型。
  • @types/pdf-parse 保留，因为 pdf-parse 不自带类型。

2. vite.config.ts 构建优化

manualChunks 新增拆包配置

为三个体积巨大的库添加了独立的 chunk 拆分，避免它们打包到主 bundle 中导致首屏加载过大：

库 Chunk 名称 说明
d3 d3-vendor D3 可视化库（约 300KB+ gzip）
tesseract.js ocr-vendor OCR 文字识别库（包含 wasm 资源，体积极大）
pdfjs-dist pdf-vendor PDF 解析库（包含 worker 和 cmaps，体积极大）

优化效果

  • 这三个库仅在特定功能页面（PDF 解析、OCR 识别、D3 图表）使用，通过拆包实现：
    • 主应用 bundle 体积显著减小
    • 首屏加载时间缩短
    • 相关功能按需加载对应 chunk

3. tsconfig 检查结论

tsconfig.app.json

  • baseUrl: "." 配置在 TypeScript 5.7 中仍然完全支持，无需修改。
  • 路径别名 "@/*": ["src/*"] 工作正常。

tsconfig.node.json

  • 未使用 baseUrl，无需修改。
  • 配置完整且正确。

后续建议

  1. 运行 npm install 重新安装依赖，确保所有版本变更生效。
  2. 运行 npm run build 验证构建，检查 Vite 7 + plugin-react 4.4.1 的兼容性。
  3. 评估移除 pdf-parse：项目中同时使用了 pdf-parse 和 pdfjs-dist，建议统一使用 pdfjs-dist 以减少依赖和维护成本。
  4. 监控 chunk 加载性能：部署后观察 d3-vendor、ocr-vendor、pdf-vendor 的按需加载表现。

修改统计

  • 修改文件数: 2 (package.json, vite.config.ts)
  • 检查文件数: 2 (tsconfig.app.json, tsconfig.node.json)
  • 移除依赖包: 2 (@types/tesseract.js, @types/dompurify)
  • 修改版本号: 3 (typescript, @types/node, @vitejs/plugin-react)
  • 新增拆包配置: 3 (d3-vendor, ocr-vendor, pdf-vendor)