无界(wujie)微前端实现及三种通信方式介绍
一、对比
之前介绍过前段时间比较流行的微前端框架qiankun，虽然实现了微前端的理念，但是也暴露出很多缺点，比如官网上讲到的四点：
- 基于路由匹配，无法同时激活多个子应用，也不支持子应用保活
- 改造成本较大，从 webpack、代码、路由等等都要做一系列的适配
- css 沙箱无法绝对的隔离，js 沙箱在某些场景下执行性能下降严重
- 无法支持 vite 等 ESM 脚本运行
而wujie利用iframe来实现js沙箱能力，有效的解决了上述问题：
组件方式来使用微前端
不用注册，不用改造路由，直接使用无界组件，化繁为简
一个页面可以同时激活多个子应用
子应用采用 iframe 的路由，不用关心路由占用的问题
天然 js 沙箱，不会污染主应用环境
不用修改主应用
window任何属性，只在iframe内部进行修改应用切换没有清理成本
由于不污染主应用，子应用销毁也无需做任何清理工作
二、实现
这里主应用使用了vue3+vite，子应用使用了vue2+webpack。
1.主应用下载依赖(package.json)
yarn add wujie-vue3
2.主应用注册依赖(main.js)
import WujieVue from "wujie-vue3";
app.use(WujieVue);
3. 主应用使用wujie组件(main.vue)
<WujieVue name="micro" url="http://localhost:8087" >
4. 子应用修改跨域(webpack.dev.conf.js)
同qiankun。如果没有产生跨域，子应用甚至无需修改。
devServer: {
headers: {
"Access-Control-Allow-Origin": "*" // 开启应用间的跨域访问
},
}
这样便实现了wujie微前端的静态使用，那如何进行主子应用之间数据通信呢？
三、通信方式
先看一下主应用和子应用的代码。
主应用
1. 前言 今年,ServiceMesh(服务网格)概念在社区里头非常火,有人提出2018年是ServiceMesh年,还有人提出ServiceMesh是下一代的微服务架构基础.作为架构师,如果你现在 ... 各位编程的小伙伴,今天广州蓝景继续跟大家分享前端技术相关文章:微前端架构的几种技术选型,你了解吗?随着SPA大规模的应用,紧接着就带来一个新问题:一个规模化应用需要拆分. 一方面功能快速增加导致打包时 ... 随着简单易用的接口日益流行,在中添加对USB接口的支持已成为大势所趋.本文通过介绍中支持USB的各种模块和库,分析了在Linux上利用USB实现高速串口和以太网连接等通信方式的具体方法. 通用串行总线 ... 随着简单易用的USB接口日益流行,在嵌入式系统中添加对USB接口的支持已成为大势所趋.本文通过介绍Linux中支持USB的各种模块和库,分析了在Linux上利用USB实现高速串口和以太网连接等通信方式 ... 有时候用过的wifi密码手机自动保存了,但在想知道wifi密码是多少,相信很多人都不记得了,或者在使用其他人的WiFi时,密码突然忘记了.怎么办呢?手机怎么查看已经记住的WiFi密码?下面脚本之家小编 ... 本篇文章给大家带来的内容是关于python中命名空间的三种方式介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. python中的命名空间分三种: 内置的命名空间,在启动解 ... 三种MPM介绍 Apache 2.X 支持 ... 程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ... cad是应用最广泛的计算机辅助设计软件,学会使用cad怎么画角度是必不可少的,尤其是对于新手来说,更应该学习.那么在cad中怎么画角度?下面小编就为大家介绍三种cad画角度方法,希望对大家有所帮助! ...无界(wujie)微前端实现及三种通信方式介绍相关推荐
最新文章
热门文章