因业务需要，对微前端及主流实现方案进行了调研
一、微前端的应用场景
1、应用过大，开发维护日常协作困难。前端技术发展快，如果直接升级一个功能齐全的大应用很困难。需要对大规模应用进行拆分，拆分成更小，更简单的能够独立开发、测试、部署的应用。（大应用拆分）
2、将多个应用融合为一个整体应用，有一个基座应用即主应用，来管理各个子应用的加载和卸载，各项目之间相互独立。 （多应用聚合）
3、一个系统新增加一个新的独立模块，可以用新技术栈开发这个新模块，部署后再接入到原系统。 （增量升级）
二、主流实现方案
iframe | single-spa、qiankun | wujie、micro-app
实现方案主要分三种，一是浏览器原生支持iframe、二是 single-spa和qiankun基于应用注册，路由监听的方案、三是wujie、micro-app 基于webcomponent的方案
由于single-spa和qiankun对子应用侵入大，不满足我们的需求，micro-app也没有正式版，所以选择了wujie进行实践
三、wujie实践
wujie基于webcomponent容器 + iframe沙箱。使用ShadowDom隔离css,使用空iframe隔离js。
1、主应用接入wujie。以下demo采用Vue3+Vite进行。
import WujieVue from 'wujie-vue3'
const app = createApp(App)
app
.use(WujieVue)
.mount('#app')
2、主应用嵌入子应用页面
wujie使用很简单，类似iframe的使用方式
<template>
<div>
<WujieVue
width="100%"
height="100%"
name="testapp"
:url="props.url"
:sync="true"
:props="{data: 'from main app'}"
></WujieVue>
</div>
</template>
3、嵌入两个业务系统A、B
业务系统可以正常嵌入，body背景色正常隔离
点击被嵌入业务系统A内的弹窗，可以正常全局居中，不会像iframe中只能在iframe内居中
4、子应用隔离
HTML和CSS采用webComponet， shadow root隔离;
JS采用iframe隔离
5、通信
子应用可以直接调用主应用的方法，也可以用postMessage，还可以使用props通信，eventBus通信
// 子应用
window.parent.logout()
window.parent.postMessage('logout')
console.log('子应用打印', window.$wujie?.props)
window.$wujie?.bus.$emit('logout')
// 基座应用
const { bus } = WujieVue
window.logout = () => {
console.log('基座 函数调用， logout')
}
window.addEventListener('message', (e) => {
if(e.data === 'logout') {
console.log('基座 message监听，', e.data)
}
})
bus.$on('logout', () => {
console.log('基座 通过eventBut监听，', 'logout')
})
6、路由同步
保持路由状态，在子应用A页面里，切换路由，刷新页面后，能保持路由，前进后退按钮也可以正常使用
7、应用保活
配置 alive="true",切换路由，应用不会再从服务端请求，从本地缓存读取
四、总结
我们目前的技术栈是Vue3 + Vite，通过简单的demo使用wujie,都能正常显示和使用，使用方法也很简单，类似组件调用，填上参数就行。后面又拿正式项目试了下，在复杂的正式业务场景下，样式隔离出现了错误，还有其他报错。最终还是选择了iframe来融合不同业务系统。
