152 lines
4.1 KiB
Markdown
152 lines
4.1 KiB
Markdown
# CodeMirror 配置优化总结
|
||
|
||
**日期**: 2026-02-05
|
||
**类型**: 构建配置优化
|
||
|
||
---
|
||
|
||
## 📊 优化前后对比
|
||
|
||
### vite.config.js 配置变化
|
||
|
||
**优化前** (包含失败的尝试配置):
|
||
```javascript
|
||
// 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
|
||
```
|
||
|
||
**优化后** (简洁高效):
|
||
```javascript
|
||
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`，无需任何构建配置调整
|
||
|
||
### 无用的配置
|
||
|
||
以下配置**对解决问题没有任何帮助**，应该移除：
|
||
|
||
1. ❌ `resolve.dedupe` - 对生产构建无效
|
||
2. ❌ `optimizeDeps.exclude` - 不能解决 instanceof 问题
|
||
3. ❌ `inlineDynamicImports` - 反而增加包体大小
|
||
4. ❌ `resolve.alias` 路径强制 - Windows 平台不可靠
|
||
|
||
### 最佳实践
|
||
|
||
1. **代码层面解决问题** - 统一使用官方默认样式
|
||
2. **保持配置简洁** - 移除所有无用的特殊配置
|
||
3. **利用 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` - 本文档
|
||
|
||
---
|
||
|
||
## 🔗 相关文档
|
||
|
||
- [CodeMirror 多实例问题修复记录](./CodeMirror-多实例问题修复记录.md) - 完整的探索过程
|
||
- [CodeMirror 修复状态报告](./CodeMirror-修复状态报告.md) - 当前状态
|
||
- [CodeMirror 6 编辑器文档](./CodeMirror-6-编辑器文档.md) - 技术文档
|
||
|
||
---
|
||
|
||
**总结**: 通过统一使用 `defaultHighlightStyle` 解决了多实例问题，并通过移除无用的构建配置，实现了包体大小减少 51%、构建时间减少 49% 的优化效果。
|