perf(frontend): defer mermaid and split editor dependencies
This commit is contained in:
@@ -34,6 +34,8 @@
|
||||
|
||||
## development:开发说明
|
||||
|
||||
- [前端构建分块优化开发说明](development/前端构建分块优化开发说明.md)
|
||||
|
||||
- [工作区后台索引与保存开发说明](development/工作区后台索引与保存开发说明.md)
|
||||
- [Mermaid 预览与缩放开发说明](development/Mermaid预览与缩放开发说明.md)
|
||||
- [扩展安装持久化与社区包开发说明](development/扩展安装持久化与社区包开发说明.md)
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
# 前端构建分块优化开发说明
|
||||
|
||||
> 更新日期:2026-09-06。基于 main 的 64af068 进行构建对比;以下结果为本地生产构建,不是网络耗时或性能评分。
|
||||
|
||||
## 当前方案
|
||||
|
||||
- Mermaid 由静态导入改成第一次渲染或校验图表时动态导入。复用加载 Promise,加载失败清除缓存以允许重试,主题初始化与渲染继续串行执行。
|
||||
- CodeMirror 基础模块、ProseMirror 和 Milkdown 分组缓存。仅显式选中的模块进入手动分组,不吸收所有传递依赖。
|
||||
- CodeMirror 语言解析器、全部 Shiki 语法和 Mermaid 图型继续按需加载。不能将所有语言打入 editor vendor,否则会反而增加编辑器的首次加载量。
|
||||
- KaTeX 按实际安装版本分组,避免合并项目版本和依赖内版本。不强制升级第三方依赖的数学解析器。
|
||||
- 启用 Vite manifest,并提供 build:report 脚本用于持续比较入口静态依赖。
|
||||
|
||||
## 构建观察
|
||||
|
||||
数值按十进制 kB 计算。静态闭包包括入口 JS 与递归 imports,去重后求和;不包含 CSS、字体、运行时动态导入或浏览器缓存。gzip 为每个 JS 文件压缩后求和,不代表服务器必然启用该压缩。
|
||||
|
||||
| 检查项 | 优化前 | 优化后 |
|
||||
| --- | --- | --- |
|
||||
| 聊天页静态 JS 闭包 | 约 1563.5 kB | 约 894 kB |
|
||||
| 聊天页闭包 gzip | 约 451.6 kB | 约 292 kB |
|
||||
| VisualMarkdownEditor 单包 | 约 1145.8 kB | 约 20 kB,核心依赖转入独立块 |
|
||||
| 首屏静态 JS 闭包 | 约 409.7 kB | 约 409 kB,基本不变 |
|
||||
|
||||
组件单包缩小不等于整个编辑器只需要 20 kB。编辑器仍需要加载基础框架、核心依赖和实际用到的语法。此次主要减少普通 Markdown 页对 Mermaid 的提前加载,并改善模块缓存边界;未测量真实启动耗时,不能声称首屏提速比例。
|
||||
|
||||
## 验证方法
|
||||
|
||||
在 frontend 目录执行:
|
||||
|
||||
```powershell
|
||||
pnpm build
|
||||
pnpm build:report
|
||||
pnpm test
|
||||
pnpm exec vite preview --host 127.0.0.1 --port 4173
|
||||
```
|
||||
|
||||
build:report 读取 dist/.vite/manifest.json,输出入口闭包大小与最大的 15 个 JS 块。对比时保存相同构建环境的两份输出;更新依赖后需重新测量。
|
||||
|
||||
本轮前端 345 项测试通过,类型检查及生产构建通过。已在生产预览打开工作区和真实 Mermaid 示例笔记,确认编辑器与 SVG 加载,未发现控制台 error。Shiki 全语言覆盖仍由既有语言测试检查。
|
||||
|
||||
## 保留的大块与边界
|
||||
|
||||
C++、Emacs Lisp 等语法、Oniguruma WASM、部分 Mermaid 图型及 Mermaid 核心仍可能超过 500 kB。这些资源保留按需加载,不裁减语言支持,也不提高警告阈值来隐藏问题。首次打开复杂图表或对应语言仍有加载成本;后续可基于真实请求和设备数据评估 Worker、资源预热及库版本升级。
|
||||
Reference in New Issue
Block a user