DSH-better-sidebar 源码拆解host/client双半架构、服务注册表与懒加载chunk完整解读【免费下载链接】DSH-better-sidebar开放的侧边栏底座支持三方拓展注册新侧边栏页面。内置文件渲染编辑/终端/侧边对话/Git/子代理页面 Open sidebar foundation, supports third-party extensions to register new sidebar pages. Built-in file rendering/editing, terminal, side chat, Git, and sub-agent pages.项目地址: https://gitcode.com/gh_mirrors/ds/DSH-better-sidebarDSH-better-sidebar 是一个开放的侧边栏底座它为 DSH 提供文件编辑预览、真实终端、侧边对话、Git 与子代理等侧边栏页面并通过ctx.betterSidebar服务注册表让任意第三方插件注册自己的侧边栏页面与文件预览器再用懒加载 chunk 把启动体积压到约 325KB。本文带你从源码层面看懂这三块核心机制理解一个服务化插件底座是如何搭起来的。一、为什么要拆成两半host/client 双半架构很多插件只跑在浏览器里但侧边栏要读文件、跑终端、管 Git这些能力必须落在 Node 进程。于是项目把代码拆成职责清晰的两半 半区入口职责host 半src/index.ts注册/sidebarJSON API目录列表、文件读写、Git、/sidebar/file媒体路由、/sidebar/html预览路由、/sidebar/bundle懒加载 chunk 路由以及终端 WebSocket 升级client 半src/client/index.tsx全部 React 渲染tab 体系、文件树、编辑器、终端视图、Git 视角等两半的边界非常干净client 不直接碰文件系统只通过 host 提供的同源 HTTP/WebSocket 路由取数据host 不持有 UI 状态所有操作都按会话sessionId作用域解析路径。文件读取、终端进程的鉴权统一走同一套浏览器信任围栏/api网关同款 Host 校验这在 src/index.ts 的文件头注释中写得很明白。这种拆法带来一个实用好处client 半热加载、host 半重启——改 UI 刷新浏览器即可改路由才需要重启 DSH。二、让插件注册侧边栏页面ctx.betterSidebar 服务注册表这是整个项目最有价值的部分。项目在客户端激活时执行一行关键代码把注册表发布到 cordis 上下文中见 src/client/index.tsx#L143ctx.provide(betterSidebar, service)注册表的实现与全部类型定义集中在 src/client/service.ts核心只有两个扩展点registerTab(descriptor)— 注册一种侧边栏页面类型id、title、icon、order、dedupeKey单实例去重、component等字段返回一个 disposer卸载时自动注销HMR 安全registerFileViewer(descriptor)— 注册一种文件预览器exts扩展名、priority优先级、detect()内容嗅探、fetchStrategy取数策略mediaUrl/fsRead/custom…。设计要点是内置功能与第三方完全对等内置的 8 个 tab文件、文件变动、任务、侧边对话、终端、浏览器、diff 等和 6 个内置预览器图片、PDF、Markdown、代码兜底等自己也是通过registerTab/registerFileViewer注册的——吃自己的狗粮第三方注册的东西和内置能力走同一条渲染管线。消费插件只需在inject里声明betterSidebar等 cordis 的服务就绪后调用即可注册顺序问题由 cordis 的就绪等待机制自动处理。上图是注册为内置 tab 的 Git 页面顶部下拉可切换多仓库与分支下方是暂存区、提交框与提交历史。完整的接入契约descriptor 全字段、声明式设置、皮肤契约、真实案例见 docs/external-plugin-guide.md机制的设计史与取舍记录在 docs/plans/2026-08-11-service-registry-design.md。三、启动只拉 325KB懒加载 chunk 是怎么做的侧边栏要内嵌 xterm 终端、CodeMirror 编辑器、Mermaid 图表渲染器全量打包曾是约 24.6MB 的单文件——页面一打开就要下载、解析、执行全部重依赖。项目用插件自有的 chunk 分块方案把启动体积降到约 325KB 核心包方案全貌见 docs/plans/2026-08-12-lazy-chunks-design.md。机制分三层 构建期每个重依赖是独立 tsdown 浏览器 bundlelib/client-name.js脚本执行时把自己的 factory 注册到全局globalThis.__dshChunks__[name]——刻意绕开宿主模块系统的 import 解析因为那条路径在不同 DSH 版本间行为不稳定服务端host 半的/sidebar/bundle/name.js路由按需下发 chunk 脚本实现于 src/bundle-route.ts带no-cache ETag契约刷新页面时未变化的 chunk 直接 304 免重下运行期src/client/chunk-loader.ts 的loadChunk(name)注入脚本 → 从全局注册表取 factory → 用自定义 require经宿主ctx.modules.import的 seed 分支解析 React 等 externals物化。当前 chunk 清单只有terminal/editor/mermaid/locale四个Office 预览已交给生态插件缓存契约是三层各带失败路径内存层每个 chunk 一个 in-flight promise 做并发去重、脚本执行层幂等覆盖槽位、HTTP 层 ETag 重校验——任何一层失败都会清缓存并在下次打开时自动重试且加载失败只让单个视图显示错误 重试按钮不拖垮整个面板。这套方案还有一个硬约束核心 bundle 禁止静态 importsrc/client/chunks/*由 tsdown.config.ts 的构建纯度门拦截端到端由 tests/e2e/mount.e2e.ts 的真实挂载冒烟守护。四、源码速查地图想了解什么看哪里host 路由总入口src/index.ts服务注册表实现与类型src/client/service.ts内置 tab / 预览器注册src/client/builtins/懒加载 chunk 加载器src/client/chunk-loader.ts各特性逐条设计史docs/plans/小结DSH-better-sidebar 的架构精髓可以浓缩成一句话——host/client 双半划清 Node 与浏览器的职责边界ctx.betterSidebar注册表把内置功能降级为注册表中的一个条目从而对生态彻底开放懒加载 chunk 则用三层缓存把按需加载做稳。读懂这三块你就掌握了服务化插件底座的标准写法。【免费下载链接】DSH-better-sidebar开放的侧边栏底座支持三方拓展注册新侧边栏页面。内置文件渲染编辑/终端/侧边对话/Git/子代理页面 Open sidebar foundation, supports third-party extensions to register new sidebar pages. Built-in file rendering/editing, terminal, side chat, Git, and sub-agent pages.项目地址: https://gitcode.com/gh_mirrors/ds/DSH-better-sidebar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考