lxy/u-desk

Private

Public Access

Fork 0

Files

绝尘 6eaaa56eb6 新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00

4.1 KiB

Raw Blame History

CodeMirror 配置优化总结

日期: 2026-02-05 类型: 构建配置优化

📊 优化前后对比

vite.config.js 配置变化

优化前 (包含失败的尝试配置):

// 1. dedupe 配置（无作用）
dedupe: [
  '@codemirror/state',
  '@codemirror/view',
  // ... 28 个包
]

// 2. optimizeDeps.exclude（无作用）
exclude: [
  '@codemirror/state',
  '@codemirror/view',
  // ... 28 个包
]

// 3. inlineDynamicImports（导致包体过大）
inlineDynamicImports: true

// 4. manualChunks（无意义的显式配置）
manualChunks: undefined

优化后 (简洁高效):

export default defineConfig({
  plugins: [vue(), AutoImport({}), Components({})],
  resolve: {
    alias: { '@': resolve(__dirname, 'src') }
  },
  build: {
    // 标准 Vite 配置，无特殊处理
  },
  optimizeDeps: {
    include: ['vue', 'pinia', '@arco-design/web-vue', 'marked', 'highlight.js']
  }
})

📦 构建产物对比

项目	优化前	优化后	改善
主包大小	5,226 KB (单文件)	2,569 KB	↓ 51%
代码分割	无（全部内联）	按需加载	✅
缓存策略	差（全量加载）	好（按需缓存）	✅
构建时间	33.64s	17.14s	↓ 49%

主要 chunk 分割

assets/js/index-DuELK8TF.js         2,569 KB  # 主入口
assets/js/mermaid.core-28UU-OvS.js    492 KB  # Mermaid 图表
assets/js/cytoscape.esm-5J0xJHOV.js   442 KB  # Cytoscape 图形
assets/js/treemap-KMMF4GRG.js        375 KB  # 树形图
assets/js/katex-DhXJpUyf.js          265 KB  # KaTeX 公式
assets/js/architectureDiagram-...    149 KB  # 架构图
assets/js/sequenceDiagram-...         98 KB  # 序列图
... (其他按需加载的 chunk)

🎯 优化收益

1. 包体大小

减少 51% 主包大小（5.2MB → 2.6MB）
更快的首屏加载速度
更好的用户体验

2. 代码分割

按需加载: Mermaid、KaTeX 等大型库只在需要时加载
并行加载: 浏览器可以并行下载多个小 chunk
缓存优化: 不常用代码单独 chunk，更新不影响主包缓存

3. 构建效率

减少 49% 构建时间（33.6s → 17.1s）
开发环境启动更快
生产构建更高效

✅ 核心结论

问题的真正原因

CodeMirror 多实例问题的根本原因: 自定义 HighlightStyle.define() 使用的 @lezer/highlight 实例与 defaultHighlightStyle 不一致

解决方案: 统一使用 defaultHighlightStyle，无需任何构建配置调整

无用的配置

以下配置对解决问题没有任何帮助，应该移除：

❌ resolve.dedupe - 对生产构建无效
❌ optimizeDeps.exclude - 不能解决 instanceof 问题
❌ inlineDynamicImports - 反而增加包体大小
❌ resolve.alias 路径强制 - Windows 平台不可靠

最佳实践

代码层面解决问题 - 统一使用官方默认样式
保持配置简洁 - 移除所有无用的特殊配置
利用 Vite 默认行为 - 默认的代码分割策略已经很优秀

📝 修改清单

代码修改

✅ frontend/src/components/CodeEditor.vue - 使用 defaultHighlightStyle
✅ frontend/src/utils/codemirrorExports.js - 移除 HighlightStyle 和 tags

配置修改

✅ frontend/vite.config.js - 移除所有无用配置

文档更新

✅ docs/CodeMirror-多实例问题修复记录.md - 添加第 10 次探索
✅ docs/CodeMirror-修复状态报告.md - 更新为已修复
✅ docs/CodeMirror-配置优化总结.md - 本文档

🔗 相关文档

总结: 通过统一使用 defaultHighlightStyle 解决了多实例问题，并通过移除无用的构建配置，实现了包体大小减少 51%、构建时间减少 49% 的优化效果。

4.1 KiB Raw Blame History Unescape Escape