半个多月没更新了，这段时间干了件大事，也踩了些坑。今天和大家随便聊聊。

一、编辑器性能优化：让”等待”变成”期待”

先说个让我最有成就感的——把一个网页编辑器的打开速度从 10 秒优化到了 5 秒左右。

起因

“这编辑器怎么又卡了？”

4月中旬，老板让我优化公司 MGBuilder 编辑器的打开速度。我一打开 DevTools，Network 面板一片红——400 多个请求扎堆在 3-11 秒，全在抢资源。

诊断

三个”性能杀手”：

三招解决

第一招：组件懒加载

之前一上来就把所有组件都 import 了，后来改成：

const getComponent = (type) => {
  return defineAsyncComponent(() => import(`./components/${type}`))
}

按需加载，用到哪个才加载哪个。

第二招：Monaco 延迟加载

Monaco 编辑器足足有 3MB+，但用户不是每次都要写代码。所以改成：只有点击”代码组件”时才加载 Monaco。

第三招：路由守卫并行化

之前：跳转页面 → 等 API → 展示页面
改成：跳转页面 → 先展示 → 后台静默请求 API

用户体验立刻流畅了。

结果

虽然还没到理想的 3 秒，但已经不再让人皱眉了。

二、模板开发：从无从下手到渐入佳境

最近还干了件技术活——学习模板开发。

说实话，一开始看模板代码有点懵。一个页面涉及七八个组件，变量传来传去，文件引用嵌套好几层，看得我眼花缭乱。

后来静下心来，啃下一个具体案例，慢慢理出了点头绪。

模板的核心要素

1. 页面结构

一个模板页面通常由这几部分组成：

• 头部（head）：引入 CSS、字体等公共资源
• 导航（nav）：网站导航栏
• 内容区（page）：页面主体
• 底部（foot）：页脚

2. 数据变量

模板里不写死数据，而是用变量引用：

<!-- 列表数据 -->
<th:block th:each="item : ${lists.data}">

<!-- 分类信息 -->
<th:block th:text="${curCate.config.get('name')}">

3. 组件机制

模板会把常用的区块拆成组件，比如：

• 轮播图组件
• 文章列表组件
• 地图组件
• 数字统计组件

不同页面按需组合这些组件，灵活又高效。

学到的经验

• 模板语法要活学活用，不要死记硬背
• 遇到不懂的变量，往数据源头（后端接口）追溯
• 多看几个案例对比，能发现规律

后续会继续整理模板开发规范，争取形成一套可复用的开发流程。

三、工具升级：让 AI 团队更稳定

模型切换

之前团队用的一个免费模型突然下线了（trinity-large-preview），导致好几个 AI 助手”罢工”。

赶紧排查了一遍，把 writer、noter、assistant 的模型都切换到了稳定的选项。这次切换让我意识到：免费模型虽然香，但不稳定是个隐患。后续考虑逐步切到更稳定的方案。

Gateway 启动优化

之前 Gateway 启动特别慢，排查发现是飞书探测超时的问题。设置了一个环境变量 OPENCLAW_FEISHU_STARTUP_PROBE_TIMEOUT_MS=5000，把超时从 30 秒降到了 5 秒。

现在重启 Gateway 快多了，不用再等半天了。

写在最后

这段时间没有惊天动地的大事，但每件事都让我觉得团队在进步：

• 工具更快了
• 技术文档更完善了
• AI 助手更稳定了

这些”小事”积累起来，就是护城河。

如果你也有类似的优化经验，欢迎评论区聊聊～

本文由 AI 助手妙手记录整理