跳到主要内容

SDK 自动加载

问题描述​

在使用文档能力时，页面需要加载 sdk.js。 由于 SDK 会随着产品版本持续更新，如果通过人工下载并替换 SDK 文件的方式维护，会带来以下问题：

  • ❌ SDK 更新依赖人工操作
  • ❌ 多环境 SDK 版本容易不一致
  • ❌ 前端直接访问 SDK 存在跨域限制
  • ❌ 升级维护成本高

因此，需要一种无需人工干预的 SDK 自动加载方案。

解决方案​

采用 Server 代理加载（Proxy Mode） 的方式。

核心思路：

  • 前端始终请求自己的 Server 获取 SDK
  • Server 动态获取最新 SDK 并返回
  • 前端无需感知 SDK 版本变化

整体访问链路：

前端 → 自有 Server → SDK 服务

Server 仅作为代理层，不需要将 SDK 文件保存到本地。

方案原理​

SDK 服务提供版本信息接口：

http://xxx/docs/version

返回示例：

{
  "clientTimeStamp": "20231227185652"
}

其中 clientTimeStamp 表示当前 SDK 版本。

Server 在收到 SDK 请求时：

  1. 获取最新 clientTimeStamp
  2. 拼接 SDK 实际访问地址
  3. 请求远程 SDK
  4. 将 SDK 内容直接返回给前端

SDK 地址规则：

http://xxx/docs/static/${clientTimeStamp}/sdk.js
http://xxx/docs/static/${clientTimeStamp}/sdk.esm.js  
http://xxx/docs/static/${clientTimeStamp}/sdk.cjs.js

前端使用方式​

前端无需关心 SDK 版本，只需加载统一地址：

<script src="/sdk/sdk.js"></script>

前端始终访问自己的 Server，不直接访问 SDK 源站。

方案特点​

  • ✅ 无需人工更新 SDK
  • ✅ 无浏览器跨域问题
  • ✅ 始终加载最新 SDK

注意事项​

  • Server 每次请求都会访问 SDK 服务，依赖网络稳定性
  • 建议为 /sdk/sdk.js 增加缓存提升性能
  • 若访问量较大，可升级为 Server 缓存方案

适用场景​

  • 不希望手动维护 SDk
  • 多环境统一 SDK 入口
最后于 更新