Skip to content

Releases: umijs/qiankun

v3.0.0-rc.22

v3.0.0-rc.22 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 30 Aug 14:57
187287e

✨ 新特性

原生 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 | SandboxConfigurationstyleIsolationglobalsincubatorContextplugins 都放在这一个对象里 (#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 回归:setDefaultMountApprunAfterFirstMountedaddErrorHandler / 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)
  • 沙箱内 addEventListeneronce 选项失效导致监听器泄漏 (#2899)
  • <MicroApp> 组件:传入 lifeCycles 即崩溃、自定义 loader 永不结束、React StrictMode 下泄漏实例、Props 类型失去检查、组件私有 prop 被透传给微应用 (#3166);Vue 版组件卸载时未卸载微应用 (#2849)

💥 不兼容更新

以下变更相对 rc.0 而言:

  • 沙箱默认开启sandbox 默认值改为 true;需要在真实 window 上运行的应用请显式设置 sandbox: false (#2814)
  • 沙箱配置收口AppConfiguration.globalContext 改为 sandbox.incubatorContextstyleIsolationglobalsplugins 一律放在 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? } 而非 DOM Location (#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 的浮层不在作用域内

v3.0.0-rc.0...v3.0.0-rc.22


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-level await, 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 via insertRule by CSS-in-JS libraries such as styled-components / emotion; @font-face stays global and @keyframes names are prefixed to avoid collisions (#3123)
  • See Style isolation

Sandbox configuration and extension

  • sandbox is now the single entry for isolation: boolean | SandboxConfiguration, with styleIsolation, globals, incubatorContext and plugins all living in that one object (#3160)
  • sandbox.globals: inject values or property descriptors into one micro app's global object without touching the host window (#3160)
  • sandbox.plugins: write custom isolation capabilities (e.g. a per-app prefixed localStorage) with the IsolationPlugin protocol; they are cleaned up automatically when the micro app unmounts (#3160)
  • @qiankunjs/sandbox can be used on its own without qiankun: StandardSandbox evaluates classic scripts or imports ESM, and createSandbox() 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)
  • registerMicroApps accepts a per-app configuration (sandbox, style isolation, fetch, …) instead of relying on global start() options (#3138)
  • AppConfiguration gains nodeTransformer / streamTransformer to customize node and HTML-stream transformation during streaming load (#2747, #2755)
  • The micro-app container is stamped with a data-name attribute 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-write library / libraryTarget / jsonpFunction (#2699); the Vite plugin at @qiankunjs/bundler-plugin/vite configures dev / preview CORS and marks the entry module (#3138)
  • @qiankunjs/react and @qiankunjs/vue ship 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)
  • defer scripts (including a defer entry 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 window property; they are handled lazily on demand (#3148)
  • Preloads of sandboxed scripts are now actually hit — previously every preloaded script was downloaded twice (#3163)
  • Mount...
Read more

v2.10.16

Choose a tag to compare

@kuitos kuitos released this 15 Nov 08:24
  • ⚡️ remove object spread operator for faster performance in big array iterator (#2812) e75952f

v2.10.15...v2.10.16

v2.10.15

Choose a tag to compare

@kuitos kuitos released this 02 Nov 13:32
  • 🐛 createElement hijack must be paired to avoid rewriting leak (#2777) a38b1af
  • 📝 add faq about how to make global event listener works well (#2734) 46e4921

v2.10.14...v2.10.15

v2.10.14

Choose a tag to compare

@kuitos kuitos released this 18 Oct 07:00

v2.10.13...v2.10.14

v3.0.0-rc.0

v3.0.0-rc.0 Pre-release
Pre-release

Choose a tag to compare

@kuitos kuitos released this 18 Sep 11:36
23d73b0

✨ 新特性

  • 支持运行时依赖复用
    1. 仅支持主应用与子应用复用依赖,不支持子应用之间复用依赖
    2. 通过应用中声明 dependencymap 来指定复用策略,如
    <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>
    上面的配置表明的是当主应用的 antd 版本在 2.0.0 以上时,子应用的便会复用主应用的 antd。详细请参考 examples
  • 沙箱支持配置访问的全局变量代理

⚡️ 性能改进

  • 沙箱实现不再依赖 eval,彻底解决 Chrome 开启 devtools 时的内存泄漏问题
  • 基于客户端流式的方式修改子应用 HTML 标签

💥 不兼容更新

  • container 配置不再支持选择器字符串,仅支持配置 HTMLElement 引用,从而避免出现各种 container 找不到的异常
  • 子应用 entry 不支持内联脚本

🚧 建设中

目前仅支持了 loadMicroAppregisterMicroApps 两个最基础的 api,其他 api 会在后续陆续支持。


✨ New Features

  • Support for runtime dependency reuse
    1. Only support reusing dependencies between main app and sub apps, but not between sub apps
    2. Specify reuse strategy by declaring dependencymap in app script, e.g.
    <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>
    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.
  • 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

  • container config 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.

v3.0.0-alpha.0...v3.0.0-rc.0

v2.10.13

Choose a tag to compare

@kuitos kuitos released this 25 Aug 13:02
  • 🐛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

v2.10.12...v2.10.13

v2.10.12

Choose a tag to compare

@kuitos kuitos released this 07 Aug 08:06
  • 🐛 avoid document.all accessing error in safari (#2575) c89c753
  • 🐛 keep dynamic stylesheet inserted order by insertBefore way (#2574) 69759a5
  • 👽️ requestIdleCallback add the polyfill of MessageChannel (#2475) e0e6763
  • 📝 correct docs (#2556)(#2564)
  • 📝 remove outdated ads (#2561) a83479c

v2.10.11...v2.10.12

v2.10.11

Choose a tag to compare

@kuitos kuitos released this 06 Jul 10:53
  • 🐛 compatiable with react development for event rewrite scenarios (#2545) d9502f5

v2.10.10...v2.10.11

v2.10.10

Choose a tag to compare

@kuitos kuitos released this 30 Jun 08:31
  • 🐛 fix IE bug that cssText cannot be accessed while it prefixing with -webkit (#2532) becb7ad
  • 👥 add pr contributor workflow (#2539) c007c70

v2.10.9...v2.10.10

v2.10.9

Choose a tag to compare

@kuitos kuitos released this 13 Jun 07:12
  • 🐛 document.head.removeChild should be hooked in sandbox (#2522) 521efb8

v2.10.8...v2.10.9