早期

早期业务,线开发的时候,我复杂的业务,和在一个主应用中,发布,测试部署,严重耦合,多个业务线复杂人,迭代,一旦有bug 就会立刻回滚,最终导致上线失败率很低而且只是改变其中的子页面,模块,导致整个应用,全部都进行拆分而且业务形态,非常集中以报表,图表为主

所有结合当时的业务形态,我们这里,主要是用模块联邦来处理,进行拆分

划分主子应用边界左侧栏,还有顶部栏,还有图表,下拉框,表格,都是划到主应用作为子应用,主要去负责

最终结合具体实践,和坑的整理

技术选型

1. 公司业务技术栈高度统一,全线,react webpack,多个模块级别,高度复用,交互样式,逻辑,高度统一,复用需求高

js 隔离

qiankunjs 是通过 代理.隔离,iframe 是完全独立的浏览器环境,模块联邦,原生不提供css 隔离,iframe 独立的文档,样式,qiankun 是通过scoped 作用域,模块联邦,我们是通过css module 建立层去解决全局变量: ifame 是完全独立的window 对象 qiandkun 代理window,模块联邦阿是共享的window。我们通过eslint 校验,还有事件中心去处理问题

js 隔离方案

iframe

// 主应用
window.foo =
// iframe 子应用
window.foo =
// 主应用
console.log // ✅ 完全隔离

1. qiankun

// 主应用 window.foo = // 子应用 proxyWindow.foo = // 写入 fakeWindow // 主应用 console.log // ✅ 代理隔离

// 但是： // 子应用如果直接操作原型 Array.prototype. = function {} // 主应用会受影响 ❌

模块联邦 完全共享 无隔离

css 隔离

iframe 不同浏览器环境,完全隔离qiankun 通过scoped 来处理一下 但是全局选择器,会受到影响

/* 主应用 */
.button { color: red;}
/* 子应用*/
.button { color: blue;}
/* 结果：大部分情况不冲突 */
/* 但全局选择器（html
body,*）可能冲突 ⚠️ */

性能

 shared: {
react这方面，{ singleton: true
requiredVersion: false
再看eager，true },'react-dom': { singleton: true
requiredVersion: false
再看eager，true },antd: { singleton: true
eager的观点是，true }。
axios: { singleton: true },'react-router-dom': { singleton: true },'rea

隔离性

模块联邦,不具备隔离特性，只能通过约束，eslint 去规避 js 污染

host remote

host 作为业务模块的使用者remote 作为模块的提供者两种关系不固定，看具体谁是提供模块的

remoteEntry.js

一个运行时的模块，注册中心，具体包含了引用的主/子应用对应，所共用的模块，注册表，对应的方法，还有动态导入语句，

// remoteEntry.js 的简化结构;{
// . 在 window 上挂载一个全局变量
window.app_order = {
// . 提供 get 方法来获取模块
get {
// 根据模块名返回对应的代码
if {
return import
}
if {
return import
}
},// . 声明依赖
init {
// 初始化共享依赖
}
}
})

之后会以script 标签来进行引用xxx.remoteEntry.js 文件 初始化的时候，会根据模块方法，动态import 模块当具体引用的时候，会进行替换，导入模 块，接下来默认导出引用

entry 为何叫 entry 呢

是remote应用唯一对外入口，于主应用访问子应 用模 块 的入口文件

import


模 块 联 邦的import 是运行时跨应 用动态导入加载，

文件不不会被打包到host 应用里的bundle.js文件里面还可以自动去重

模 块级别的复用



针对通用库，

配合shared 并指定确定版本号，. 对于业 务模 块，配合exposes 指定具体的代码

强制开启单例模式，而且只共享通用库，不共享纯业 务代码

库的升级，统一由主应 用团队，推动，解决.

模 块联 邦运行时思路
有些疑惑


隔 离性
qiankun 强隔 离沙箱
有些疑惑
qiankun 强隔 离沙箱
qiankun 强隔 离沙箱
qiankun 强隔 离沙箱
qiankun 强隔 离沙箱
qiankun 强隔 离沙箱
有些疑惑
有些疑惑
有些疑惑

技术选型 技术栈是否统一: : : : : : 是否统一这方面，是否统一: 再看是否统一，是否统一: 至于是否统一。是否统一: 至于是否统一，是否统一: 再看是否统一，

技术栈是否统一: 完全不统 一，还是以qiankun代表细粒度组件共享需求: MF强隔 离，性能: 强调强隔 离用qiankun 强调性能，以MF 强调性能，以MF 强调性能，以MF 强调性能，以MF 强调性能，以MF 强调性能，以MF 强调性能，以MF

隔 至于离性，qiankun 有沙箱，mF 无隔 至于离共享，qiankun 无 法共享依赖，MF 可以自动去重粒度: qiankun 应用级 别，mF 属 于模 块级 至于别复用驱动，qiankun 路由驱 动，mF import 驱 动 驱 动 驱 动 驱 动 驱 动

模 块联 邦 1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协作问题，还有 1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协作问题，还有 1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协作问题，还有 1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协作问题，还有 1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协作问题，还有

1. 作 为webpack 承担的功能，解决的是单体复杂应 用，如难以单独部署，协 作问题，还有 作 为webpack 承 担的功能，解 决的是单 体复杂 应 用，如难 以单独部 署，协 作问 题，还有 作 为webpack 承 担 的功能，解 决 的是单 体复 杂 应 用，如难 以 单独部 署，协 作 问题，还有 作 为web pack 承 担 的功 能，解 决 的 是单 体复 杂 应 用，如难 以 单独部 署，协 作 问题，还有 作 为 web pack 承 担 的功 能，解 决 的 是 单体 复 杂 应 用，如 难 以 单独 部 署，协 作 问题，还有 作 为 web pack 承 担 的功 能，解 决 的 是 单体 复 杂 应 用，如 难 以 单独 部 署，协 作 问题，还有 作 为 web pack 承 担 的功 能，解 决 的 是 单体 复 杂 应 用，如 难 以 单独 部 署，协 作 问题，还有

块联

邦微应

用：以下以一些常 见 问 题为例。

先 去配 置一 个最 基本 的模

块 联邦 微 应

先 去配 置 一个 最基 本的 模块 联邦 微 应用 ： 以下以 一些 常 见问 题为 例。

先去 配

置一个 最基 本 的模

先 去配

….

// 主应

用plugins : // 子应

用plugins:

实践中常见坑

初期的useTheme context 上下文，共

享缺失的问题

1. 初期的useTheme context上下文。共

2. 主应

有context

访问

访

/* 子应

/* 子应该共 享一套，全局状态管理

享一套，全局状态管理

理

实践中常遇到的 css污

染，对于模

。

---