Releases: umijs/qiankun
Releases · umijs/qiankun
Release list
v3.0.0-rc.22
✨ 新特性
原生 ESM 沙箱
<script type="module">微应用可以在 JS 沙箱内以原生 ESM 运行,Vite 应用在开发和生产环境都无需再做 UMD / SystemJS 构建;顶层await、live binding 等原生模块语义全部保留,也不要求 CSP 放开'unsafe-eval'(#3133)- 详见文档 原生 ESM 支持
运行时样式隔离
sandbox: { styleIsolation: true }基于原生 CSS@scope把微应用样式限定在自己的容器内,微应用侧无需改动任何构建配置 (#3123)- 覆盖内联
<style>、外链<link rel="stylesheet">,以及 styled-components / emotion 等 CSS-in-JS 方案通过insertRule注入的规则;@font-face保持全局,@keyframes自动加前缀防撞名 (#3123) - 详见文档 样式隔离
沙箱配置与扩展
sandbox成为隔离能力的统一入口:boolean | SandboxConfiguration,styleIsolation、globals、incubatorContext、plugins都放在这一个对象里 (#3160)sandbox.globals:向单个微应用的全局对象注入值或属性描述符,不污染主应用window(#3160)sandbox.plugins:通过IsolationPlugin协议编写自定义隔离能力(如按应用前缀的localStorage),随微应用卸载自动清理 (#3160)@qiankunjs/sandbox可以脱离 qiankun 单独使用:StandardSandbox执行 Classic 脚本或加载 ESM,createSandbox()额外提供 DOM 约束与副作用管理,适合把第三方脚本关进容器 (#3161)- 详见文档 用插件扩展沙箱 与 独立使用沙箱
新增 / 回归的 API
isRuntimeCompatible():启动前检查浏览器是否满足 v3 基础运行条件 (#2778)- 2.x 的辅助 API 回归:
setDefaultMountApp、runAfterFirstMounted、addErrorHandler/removeErrorHandler(#2823) registerMicroApps支持按应用设置configuration(沙箱、样式隔离、fetch 等),不再依赖start()全局配置 (#3138)AppConfiguration新增nodeTransformer/streamTransformer,可在流式加载过程中自定义节点与 HTML 流的转换 (#2747, #2755)- 微应用容器自动写入
data-name属性,便于样式与调试定位 (#2722)
生态包
@qiankunjs/bundler-plugin:Webpack 4 / 5 插件自动改写输出配置并标记入口脚本,微应用不必再手写library/libraryTarget/jsonpFunction(#2699);Vite 插件@qiankunjs/bundler-plugin/vite为 dev / preview 服务配置 CORS 并标记入口模块 (#3138)@qiankunjs/react与@qiankunjs/vue提供<MicroApp>组件,内置加载态与错误边界,随组件生命周期自动挂载 / 更新 / 卸载 (#2706, #2775)- Agent skill:
npx skills add umijs/qiankun后,Claude Code、Cursor 等 coding agent 可按官方约定创建主应用 / 微应用,或改造现有 Vite 应用 (#3176)
加载行为
- 多个微应用先后渲染到同一容器时,DOM 写入自动排队,A → B 切换不再互相抹掉对方内容,也不再触发二次渲染 (#3169)
- 支持
defer脚本(含defer入口脚本),执行顺序与浏览器一致 (#2801, #2811) - 资源请求失败自动重试,非 2xx/3xx 响应直接抛错,错误信息带上请求 URL,方便从监控里定位到具体资源 (#2921, #3105)
- 同一应用多实例同时挂载时自动处理 webpack 的 chunk 缓存,避免后挂载的实例缺 chunk (#2873)
- 支持在传输中被拆成多个 chunk 的超大内联脚本 (#2878)
⚡️ 性能改进
- HTML 流式加载真正做到逐 chunk 刷出,此前
<head>处理完后剩余内容会被缓冲到响应结束;基准中位数 141.7ms → 87.2ms(−38.5%)(#3145) - 沙箱创建不再急切镜像宿主
window的全部属性,改为按需惰性处理 (#3148) - 沙箱化脚本的 preload 现在能被真正命中,此前每个预加载脚本都会被下载两次 (#3163)
- 挂载会等待样式表加载完成后再渲染,避免无样式内容闪烁 (#2784)
🐛 问题修复
- React 15 应用无法启动 (#2847);Vue CLI 5 项目入口脚本识别与 webpack 版本检测错误 (#2800)
- 微应用之间共用同一容器时动态追加元素异常 (#2825);从应用 A 直接切到 B 时,B 加载期注入的样式被 A 的卸载抹掉 (#3138)
- 通过
innerHTML/ jQuery 等方式插入的样式绕过样式隔离泄漏到主应用 (#3138) loadMicroApp加载失败后内部缓存未清除,导致重试无效 (#2922)- 微应用未导出标准生命周期时无法回退到
window[appName]探测 (#3099) - 已带完整协议的 URL 被二次转换 (#3110)
- 沙箱内
addEventListener的once选项失效导致监听器泄漏 (#2899) <MicroApp>组件:传入lifeCycles即崩溃、自定义loader永不结束、React StrictMode 下泄漏实例、Props类型失去检查、组件私有 prop 被透传给微应用 (#3166);Vue 版组件卸载时未卸载微应用 (#2849)
💥 不兼容更新
以下变更相对 rc.0 而言:
- 沙箱默认开启:
sandbox默认值改为true;需要在真实window上运行的应用请显式设置sandbox: false(#2814) - 沙箱配置收口:
AppConfiguration.globalContext改为sandbox.incubatorContext;styleIsolation、globals、plugins一律放在sandbox对象内 (#3160) @qiankunjs/webpack-plugin更名为@qiankunjs/bundler-plugin,Webpack 插件从包根导入,Vite 插件从/vite子路径导入 (#3103)create-qiankun脚手架退役,由 agent skill 取代 (#3176)- single-spa 内置为
@qiankunjs/single-spa:qiankun 不再依赖 npm 上的single-spa,同一页面内请勿再单独安装,否则会出现两个互不知晓的路由器;activeRule函数收到的是{ pathname, hash?, search? }而非 DOMLocation(#3170) - 共享容器语义:向仍被已挂载应用占用的容器调用
loadMicroApp,由静默覆盖改为排队等待 (#3169) prefetchApps标记为废弃:流式加载器会在解析入口时自动预加载资源 (#2823)- 浏览器要求:原生 ESM 微应用依赖动态注入 import map(Firefox 默认不支持),样式隔离依赖原生
@scope且无 polyfill,详见浏览器支持
🔧 内部改进
- 沙箱内核按 TC39 Compartment 规范收口术语与 API 形状,Classic 脚本与 ESM 共用同一套全局语义,上面的沙箱插件与独立沙箱都建立在这层之上 (#3155, #3159)
- single-spa 7.0 内置为
@qiankunjs/single-spa,零运行时依赖,沿用 v6 的bootstrap词汇与全部single-spa:*事件 (#3170) - 动态 DOM 归属统一到插入点:元素落到哪个应用的挂载点就归哪个应用,不再区分由谁创建,
innerHTML/ jQuery 等场景不再走特殊路径 (#3165) - 新增 Playwright e2e 基础设施与 CI 性能门禁,后者以原生 iframe 为基线,对照 qiankun v2 / wujie / micro-app / garfish (#3135, #3148, #3163)
- 发布流程:changeset 由 Conventional Commits 自动生成,整个 monorepo 只发一条聚合的 GitHub Release (#3117, #3144)
📚 文档与示例
- 文档站全量重写并迁至 www.qiankunjs.com,含教程、概念、实践与 2.x 迁移指南;旧域名
qiankun.umijs.org保持跳转 (#3142) - 示例全量现代化(React 19 / Vue 3.5 / Vite 8),提供 React 与 Vue 两个主应用壳,在线访问 examples.qiankunjs.com;新增流式入口示例,直观展示入口 HTML 边到达边渲染 (#3138, #3167, #3171)
🚧 已知限制
- Firefox 尚未默认支持动态注入 import map,需要支持 Firefox 的微应用请继续采用 Classic(如 Webpack)构建
- Vite dev 模式下微应用内部的 HMR 连接会被关闭,开发时需手动刷新
- 样式隔离的作用域按应用名区分而非按实例;Portal 到
document.body的浮层不在作用域内
Almost three years have passed since rc.0 (2023-09-18); rc.1 through rc.21 shipped to npm only, with no GitHub Release. This entry rolls up everything from rc.0 to rc.22. Install with npm i qiankun@rc.
✨ New Features
Native ESM sandbox
<script type="module">micro apps run inside the JS sandbox as native ESM — Vite apps no longer need a UMD / SystemJS build in either dev or production. Top-levelawait, live bindings and the other native module semantics are preserved, and CSP does not need'unsafe-eval'(#3133)- See Native ESM support
Runtime style isolation
sandbox: { styleIsolation: true }scopes a micro app's CSS to its own container using native CSS@scope, with no build-time changes on the micro app side (#3123)- Covers inline
<style>, external<link rel="stylesheet">and rules injected viainsertRuleby CSS-in-JS libraries such as styled-components / emotion;@font-facestays global and@keyframesnames are prefixed to avoid collisions (#3123) - See Style isolation
Sandbox configuration and extension
sandboxis now the single entry for isolation:boolean | SandboxConfiguration, withstyleIsolation,globals,incubatorContextandpluginsall living in that one object (#3160)sandbox.globals: inject values or property descriptors into one micro app's global object without touching the hostwindow(#3160)sandbox.plugins: write custom isolation capabilities (e.g. a per-app prefixedlocalStorage) with theIsolationPluginprotocol; they are cleaned up automatically when the micro app unmounts (#3160)@qiankunjs/sandboxcan be used on its own without qiankun:StandardSandboxevaluates classic scripts or imports ESM, andcreateSandbox()adds DOM containment and side-effect management — handy for confining third-party scripts to a container (#3161)- See Extend the sandbox with plugins and Use the sandbox standalone
New and restored APIs
isRuntimeCompatible()checks whether the browser meets v3's baseline runtime requirements before you start (#2778)- 2.x helpers are back:
setDefaultMountApp,runAfterFirstMounted,addErrorHandler/removeErrorHandler(#2823) registerMicroAppsaccepts a per-appconfiguration(sandbox, style isolation, fetch, …) instead of relying on globalstart()options (#3138)AppConfigurationgainsnodeTransformer/streamTransformerto customize node and HTML-stream transformation during streaming load (#2747, #2755)- The micro-app container is stamped with a
data-nameattribute for styling and debugging (#2722)
Ecosystem packages
@qiankunjs/bundler-plugin: the Webpack 4 / 5 plugin rewrites the output config and marks the entry script, so micro apps no longer hand-writelibrary/libraryTarget/jsonpFunction(#2699); the Vite plugin at@qiankunjs/bundler-plugin/viteconfigures dev / preview CORS and marks the entry module (#3138)@qiankunjs/reactand@qiankunjs/vueship a<MicroApp>component with built-in loading state and error boundary that mounts / updates / unmounts along with the component lifecycle (#2706, #2775)- Agent skill: after
npx skills add umijs/qiankun, Claude Code, Cursor and other coding agents can scaffold a main / micro app or convert an existing Vite app following the official conventions (#3176)
Loading behavior
- Micro apps rendered one after another into the same container now queue their DOM writes: an A → B switch no longer wipes the other app's content or triggers a second render (#3169)
deferscripts (including adeferentry script) are supported and executed in browser order (#2801, #2811)- Failed asset requests are retried automatically, non-2xx/3xx responses throw, and error messages carry the request URL so the failing resource is identifiable from monitoring (#2921, #3105)
- webpack's chunk cache is handled automatically when multiple instances of one app are mounted, so later instances no longer miss chunks (#2873)
- Huge inline scripts split across transfer chunks are supported (#2878)
⚡️ Performance Improvements
- Streaming HTML load now flushes chunk by chunk; previously everything after the
<head>was buffered until the response ended. Benchmark median 141.7ms → 87.2ms (−38.5%) (#3145) - Sandbox creation no longer eagerly mirrors every host
windowproperty; they are handled lazily on demand (#3148) - Preloads of sandboxed scripts are now actually hit — previously every preloaded script was downloaded twice (#3163)
- Mount...
v2.10.16
v2.10.15
v2.10.14
v3.0.0-rc.0
✨ 新特性
- 支持运行时依赖复用
- 仅支持主应用与子应用复用依赖,不支持子应用之间复用依赖
- 通过应用中声明 dependencymap 来指定复用策略,如
上面的配置表明的是当主应用的 antd 版本在 2.0.0 以上时,子应用的便会复用主应用的 antd。详细请参考 examples<script type="dependencymap"> { "dependencies": { "antd": { "url": "https://gw.alipayobjects.com/os/lib/antd/2.13.14/dist/antd.js", "version": "2.13.14", "range": "^2.0.0" }, "react": { "url": "https://gw.alipayobjects.com/os/lib/react/15.7.0/dist/react.js", "version": "15.7.0", "range": "^15.0.0" }, "react-dom": { "url": "https://gw.alipayobjects.com/os/lib/react-dom/15.7.0/dist/react-dom.js", "version": "15.7.0", "range": "^15.0.0" } } } </script>
- 沙箱支持配置访问的全局变量代理
⚡️ 性能改进
- 沙箱实现不再依赖 eval,彻底解决 Chrome 开启 devtools 时的内存泄漏问题
- 基于客户端流式的方式修改子应用 HTML 标签
💥 不兼容更新
- container 配置不再支持选择器字符串,仅支持配置 HTMLElement 引用,从而避免出现各种 container 找不到的异常
- 子应用 entry 不支持内联脚本
🚧 建设中
目前仅支持了 loadMicroApp 和 registerMicroApps 两个最基础的 api,其他 api 会在后续陆续支持。
✨ New Features
- Support for runtime dependency reuse
- Only support reusing dependencies between main app and sub apps, but not between sub apps
- Specify reuse strategy by declaring
dependencymapin app script, e.g.
The above config means when the main app's antd version is above 2.0.0, the sub app will reuse the main app's antd. See examples for details.<script type="dependencymap"> { "dependencies": { "antd": { "url": "https://gw.alipayobjects.com/os/lib/antd/2.13.14/dist/antd.js", "version": "2.13.14", "range": "^2.0.0" }, "react": { "url": "https://gw.alipayobjects.com/os/lib/react/15.7.0/dist/react.js", "version": "15.7.0", "range": "^15.0.0" }, "react-dom": { "url": "https://gw.alipayobjects.com/os/lib/react-dom/15.7.0/dist/react-dom.js", "version": "15.7.0", "range": "^15.0.0" } } } </script>
- Support configuring proxy for accessing global variables in sandbox.
⚡️ Performance Improvements
- Sandbox implementation no longer relies on
eval, completely solving Chrome's memory leak issue when devtools is opened. - Modify sub-app HTML tags based on client-side streaming rendering.
💥 Breaking Changes
containerconfig no longer supports selector string, only supports configuring HTMLElement reference to avoid various container not found errors.- The subapplication entry does not support inline scripts.
🚧 Under Development
Currently only the two most basic APIs loadMicroApp and registerMicroApps are supported, other APIs will be supported gradually.
v2.10.13
- 🐛compatible with vConsole who will wrap global variables with proxy (#2630) 7328396
- 👥 add new contributors :) (#2607) afb92ed
- 👷 github actions optimization (#2601) (#2602) (#2599) (#2597) (#2594) (#2597)
- ⬆️ upgrade import-html-entry to v1.14.6 (#2598) e04fa02
- 🔒️use pull_request event instead of pull_request_target for security reason (#2586) 0386e90
- 🎨 optimize code and support for scenario of dynamic script comment as reference node (#2576) 3878cea