Your Name
4b5602a719
- FilesPage storeToRefs + remotePath coercion; Monaco preload; list action buttons - text_io for UTF-8/LF; install/sync EOL; check_shell_eol + check_text_eol gates - ServerFormDialog, hash login redirect, AppAuth keep-session; design docs and audits Co-authored-by: Cursor <cursoragent@cursor.com>
2.1 KiB
2.1 KiB
Monaco 编辑器核心预加载 — 设计说明
背景与目标
文件管理页双击打开编辑器时，浏览器需首次下载 Monaco 核心 editor.api2（约 3.6MB）及通用 editor.worker（约 280KB），导致首开卡顿甚至触发浏览器「网页拖慢」提示。
目标：在用户选中服务器并成功列出目录后，于空闲时段后台预热上述资源，使后续双击打开文件近乎瞬时。语言专用 Worker（ts.worker 等）维持按需，不纳入预加载。
方案对比
| 方案 | 优点 | 缺点 |
|---|---|---|
| 进入 Files 页即预加载 | 首开最快 | 仅路过 Files 也会下载 3.6MB |
| 选服务器 + 列目录成功后 idle 预加载（选定） | 贴近真实使用、不抢首屏 | 选服务器后需等一次 browse 成功 |
| 双击时再加载 | 零额外流量 | 首开仍卡 |
选定方案
preloadMonacoCore()：模块级warmed守卫，全会话仅执行一次。requestIdleCallback（降级setTimeout(300)）延后执行。- 预拉
import('@/components/FileEditorWorkbench.vue')→ 连带 Vite chunkeditor.api2+ 编辑器 CSS。 warmGenericEditorWorker()：new editorWorker()后terminate()，将 worker 脚本写入 HTTP 缓存。
挂载点：useFilesBrowse.ts 在 serverId && items.length 且目录预读 preloadDirectoryFiles 同级调用。
非变更
ts/json/css/html.worker仍按打开文件语言按需加载。- 目录内 ≤300KB 文件内容预读逻辑（
filePreload.ts）不变。 FileEditorWorkbench仍由FilesPage的defineAsyncComponent挂载；预加载仅提前拉取同一 chunk。
安全与性能
- 预加载失败被吞，不影响正常懒加载路径。
- idle 调度避免与目录列表渲染争抢主线程。
- 无额外 API、无凭据暴露。
验收标准
- 选服务器列目录后，Network 在空闲期出现
editor.api2、editor.worker请求（非双击瞬间）。 - 双击打开
.conf/.php等文件，编辑器在 1s 内可交互（二次访问依赖缓存更快）。 - 打开
.ts时仍单独请求ts.worker（按需未破坏）。