核心 < 10kb · 无虚拟 DOM · 零框架开销

brk

一个微前端的骨架,不是一个框架。

组件只渲染一次,更新由你掌控。
不做 diff、不做调度、不做状态管理 —— 只提供一套最小约定。

< 10 kb
init.js 运行时
0 依赖
纯 TypeScript
1 次渲染
组件只执行一次
ESM
页面即模块
快速开始

三行跑起来

init.js 准备好 window.jsxglobalThis._brk_, 之后的每一页都只是一个普通的 ES 模块。

index.html
<script src="/static/init.js"></script>
<script>brk.render({ load: "/dist/app/page.mjs" })</script>
页面

你的页面,几乎全是应用代码

用 esbuild 编译,format: 'esm'。 框架运行时早已在 init.js 中就绪,页面产物里没有 loader、没有 diff。

// page.tsx — 你写的
page.tsx
import { brk } from '@/brk';

const vino = () => (
  <div css="padding: 4px">
    <brk.card>
      <h1>Hello World</h1>
      <div cls="bge" css="height: 1px; margin: 4px 0 8px"/>
    </brk.card>
  </div>
);

export const page = { vino };
// page.mjs — esbuild 编译产物
page.mjs
import { brk } from '@/brk';
// format: 'esm' · jsxFactory: jsx

const vino = () => jsx("div", { css: "padding: 4px" },
  jsx(brk.card, {},
    jsx("h1", {}, "Hello World"),
    jsx("div", {
      cls: "bge",
      css: "height: 1px; margin: 4px 0 8px"
    })
  )
);

export const page = { vino };
设计取舍

框架能不管的,就都不管

下面四条不是特性,而是决定。它们解释了为什么 brk 能做到这么小,也解释了它会让你在哪些地方需要多写一点。

01

渲染一次

组件函数只执行一次,DOM 只生成一次。没有 hooks,没有重渲染,UI = f(state) 由你自己维持。

02

不做调度

更新交给 replaceChildrentextContent,刷新粒度由你决定。框架不介入状态到 DOM 的同步。

03

全局能力

init.jsjsxglobalThis._brk_ 一次性注入,页面产物里只有你的应用代码。

04

可整体替换

init.js 是源码不是黑盒。你可以覆盖 brk.opens,甚至重写整套运行时。

适用边界

它适合什么,不适合什么

// 适合

  • 多页应用、后台系统、微前端外壳
  • 在既有系统里增量引入的一层渲染骨架
  • 对体积敏感、想要完全掌控更新时机的团队
  • 需要页面产物 100% 是自身业务代码的场景

// 不适合

  • 期望响应式自动更新、数据驱动的视图
  • 期望开箱即用的组件生态与脚手架
  • 期望 React / Vue 那样的开发体验与心智模型
  • 需要 SSR 直出完整 HTML 内容的项目
文档

板块

骨架已经就位,下面每一块都会独立成页,逐步补齐。