Skip to content

wujie

wujie(无界)是腾讯开源的微前端框架,走的是一条和 qiankun/single-spa 都不同的独特路线。它的定位一句话说清:wujie = iframe(跑子应用 JS,拿原生 window/history/location 做物理隔离)+ WebComponent(承载子应用 DOM 渲染)。子应用的 JavaScript 被注入到一个同域 iframe 里执行——iframe 天然就是一个「原生 window 沙箱」,全局变量、historylocation 全在 iframe 自己的上下文里,与主应用物理隔离,不用 Proxy 代理 window、不用 with 改作用域链,因此省掉了这类软沙箱的性能损耗;而子应用的 DOM 不渲染在 iframe 内,而是被渲染进一个自定义的 <wujie> WebComponent 元素(shadowRoot),靠代理 iframe 的 document.querySelector 等查询方法把「iframe 里的 JS」和「WebComponent 里的 DOM」桥接起来。这套「JS 在 iframe、DOM 在 WebComponent」的分工,让 wujie 拿到了微前端框架里最强的隔离性,同时原生亲和 Vite/ESM(ESM 交给浏览器在 iframe 里原生执行,绕开了 qiankun 2.x import-html-entry 不认 type=module 的痛点),还支持保活(keep-alive)与预加载/预执行实现子应用秒开秒切。代价也很实在:每个子应用一个 iframe 有内存与启动开销、同域约束、弹窗需处理 Shadow DOM 逃逸。2026-06 wujie 发布 v2.0(全新空白同域 iframe 沙箱,支持浏览器前进后退)并连发 4 版(v2.0.0 → v2.1.0)复活。沙箱、CSS 隔离、通信的通论已在微前端核心机制叶讲透,本叶只讲 wujie 的具体实现与 API

概述

  • 定位:wujie 是腾讯开源、iframe JS 沙箱 + WebComponent 容器的微前端方案——子应用 JS 跑在同域 iframe(拿原生 window/history/location、物理隔离),子应用 DOM 渲染进 <wujie> WebComponent(shadowRoot、样式随 Shadow DOM 隔离),两者靠 document 代理桥接。
  • 隔离最强 + Vite 原生友好:iframe 是浏览器级的物理隔离(不像 Proxy 沙箱是「尽力而为的软隔离」),且 ESM 在 iframe 里由浏览器原生执行——Vite/ESM 子应用零改造接入,这正是 qiankun 2.x 的最大痛点。
  • 组件化接入,无需注册:主应用不必像 single-spa/qiankun 那样先 registerMicroApps——直接 startApp({ name, url, el }) 或用 <WujieVue>/<WujieReact> 组件把子应用当普通组件用,支持同屏多子应用并存
  • 保活 + 预加载 = 秒开秒切alive: true 保活(子应用不销毁、切回瞬时恢复状态)、preloadApp({ exec: true }) 预加载/预执行(空闲期 requestIdleCallback 拉资源、提前渲染),配合 fiber 分片执行避免阻塞主线程。
  • 版本与选型v1 线(2021~2023) 沉寂多年后,2026-06 发布 v2.0(全新空白同域 iframe 沙箱、支持浏览器前进后退)并连发 4 版复活;甜区是**「复杂子应用 + 要最强隔离 + Vite 主力」**,代价是 iframe 开销、同域限制、弹窗 Shadow DOM 逃逸。

本叶地图

  • 入门 —— wujie 解决什么、最小接入(startApp / <WujieVue>)、iframe+WC 双容器心智、与 qiankun 的路线差异
  • iframe JS 沙箱 —— iframe 跑子应用 JS 的原理(原生 window/history/location、免 Proxy/with 损耗)、空白同域 iframe(v2.0 新沙箱)、降级策略、与 qiankun Proxy 沙箱对比
  • WebComponent 容器渲染 —— 子应用 DOM 渲染进 <wujie>shadowRoot)、iframe 与 WC 分工、document 代理桥接、事件系统修正、样式随 Shadow DOM 隔离
  • 路由同步 —— 劫持 iframe history.pushState/replaceState、同步子应用路由到主应用 query(?子应用=路由)、prefix 短路径、浏览器前进后退、sync 开关与单向同步
  • 保活与预加载 —— 保活/单例/重建三模式、preloadApp 预加载/预执行、fiber 分片、秒开原理与内存代价、degrade 降级
  • 通信 —— props 注入、去中心化 EventBus(bus.$emit/$on)、window.parent 直通、主子应用通信
  • v2.0 与现状 —— v2.0 全新空白同域 iframe 沙箱(2026-06)、连发 4 版复活时间线、选型定位、与 micro-app 的对比、局限
  • 参考 —— 核心 API / iframe+WC 分工 / 保活模式 / 路由同步 / 通信 / 版本时间线六张表 + 权威链接

文档地址

幻灯片地址

测试题

wujie 测试题