青岛住房和城乡建设部网站,建设网站建设,网站怎么申请,安徽电商网站建设前言#xff1a;微前端已经是一个非常成熟的领域了#xff0c;但开发者不管采用哪个现有方案#xff0c;在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题#xff0c;或无法提供支持。本… 前言微前端已经是一个非常成熟的领域了但开发者不管采用哪个现有方案在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题或无法提供支持。本文提供一种基于 iframe 的全新微前端方案完善的解决了这些核心诉求。 微前端概念
微前端是借鉴了微服务的理念将一个庞大的应用拆分成多个独立灵活的小型应用每个应用都可以独立开发独立运行独立部署还可以随意组合这样就降低了耦合度从而更加灵活。
微前端特性
技术栈无关 主框架不限制接入应用的技术栈子应用可自主选择技术栈vuereactjqng等独立开发/部署 各个团队之间仓库独立单独部署互不依赖增量升级 当一个应用庞大之后技术升级或重构相当麻烦而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖有独立的状态管理
场景演示
后台管理系统
最外面一层可以当主应用里面可以放不同的子应用子应用不受技术的限制。 web商店未来趋势
例如一些导航网站,可以提供微前端的接入我们的网站也可以入驻该网站并且还可以提供一些API增加交互有点类似于小程序。小程序可以调用微信的一些能力例如支付扫码等导航类型的网站也可以提供一些API我们的网站接入之后提供API调用可以实现更多有趣的玩法。 微前端方案
iframe 方案
特点
接入比较简单隔离非常稳完美
不足
dom割裂感严重弹框只能在iframe而且有滚动条通讯非常麻烦而且刷新iframe url状态丢失
qiankun 方案
qiankun 方案是基于 single-spa 的微前端方案。
特点
html entry 的方式引入子应用相比 js entry 极大的降低了应用改造的成本完备的沙箱方案js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案做了静态资源预加载能力
不足
适配成本比较高工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作css 沙箱采用严格隔离会有各种问题js 沙箱在某些场景下执行性能下降严重无法同时激活多个子应用也不支持子应用保活无法支持 vite 等 esmodule 脚本运行
底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 with内的window其实就是proxy.window 我们声明变量 var name 小满 实际这个变量挂到了proxy.window 并不是真正的window css沙箱原理 第一个就是shadowDom隔离 第二个类似于Vue的scoped [data-qiankun-426732]
micro-app 方案
micro-app 是基于 webcomponent qiankun sandbox 的微前端方案。
特点
使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠组件式的 api 更加符合使用习惯支持子应用保活降低子应用改造的成本提供静态资源预加载能力
不足
接入成本较 qiankun 有所降低但是路由依然存在依赖 虚拟路由已解决多应用激活后无法保持各子应用的路由状态刷新后全部丢失 虚拟路由已解决css 沙箱依然无法绝对的隔离js 沙箱做全局变量查找缓存性能有所优化支持 vite 运行但必须使用 plugin 改造子应用且 js 代码没办法做沙箱隔离对于不支持 webcompnent 的浏览器没有做降级处理
底层原理 js隔离跟qiankun类似也是使用proxy withcss隔离自定义前缀类似于scoped
const prefix micro-app[name${appName}]
复制代码 EMP 方案
EMP 方案是基于 webpack 5 module federation 的微前端方案。
特点
webpack 联邦编译可以保证所有子应用依赖解耦应用间去中心化的调用、共享模块模块远程 ts 支持
不足
对 webpack 强依赖老旧项目不友好没有有效的 css 沙箱和 js 沙箱需要靠用户自觉子应用保活、多应用激活无法实现主、子应用的路由可能发生冲突
底层原理 这个东西有点类似于拆包也可以叫模块共享例如React有个模块可以共享给Vue项目用Vue2的组件可以共享给Vue3用。
无界微前端 方案
预览demo wujie-micro.github.io/demo-main-v…**
特点
接入简单只需要四五行代码不需要针对vite额外处理预加载应用保活机制
不足
隔离js使用一个空的iframe进行隔离子应用axios需要自行适配iframe沙箱的src设置了主应用的host初始化iframe的时候需要等待iframe的location.orign从about:blank初始化为主应用的host这个采用的计时器去等待的不是很悠亚。
底层原理 使用shadowDom 隔离cssjs使用空的iframe隔离通讯使用的是proxy
部分原文juejin.cn/post/712564…
前置知识了解webComponents
演示webComponents的 传参 样式隔离 以及写法 window.onload () {class WuJie extends HTMLElement {constructor() {super()this.init()this.getAttr(url)}init() {const shadow this.attachShadow({ mode: open }) //开启影子dom 也就是样式隔离const template document.querySelector(#wu-jie) as HTMLTemplateElementconsole.log(template);shadow.appendChild(template.content.cloneNode(true))}getAttr (str:string) {console.log(获取参数,this.getAttribute(str));}//生命周期自动触发有东西插入connectedCallback () {console.log(类似于vue 的mounted);}//生命周期卸载disconnectedCallback () {console.log(类似于vue 的destory);}//跟watch类似attributeChangedCallback (name:any, oldVal:any, newVal:any) {console.log(跟vue 的watch 类似 有属性发生变化自动触发);}}window.customElements.define(wu-jie, WuJie)
}复制代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./index.js/script
/headbody!--外层写一个div测试隔离--div我是div/divwu-jie urlxxxxxx/wu-jietemplate idwu-jie!--div的样式是作用于全局的--stylediv {background: red;}/stylediv小满zs测试样式隔离/div/template
/body/html
复制代码
可以完美隔离css样式 前置知识2 monorepo架构
我们采用的是微前端一个主应用和多个子应用我们肯定不会一个一个去install安装依赖太傻了我们采用monorepo 架构 一次install 即可安装完成。
第一步需要安装pnpm
pnpm内置了对单个代码仓库包含多个软件包的支持是monorepo架构模式的不二速选
npm i pnpm -g
复制代码
最外层建一个main充当主应用然后新建一个web文件夹里面放两个子应用分别是vue和react 配置monorepo
在根目录新建一个 pnpm-workspace.yaml 配置依赖项
packages:# all packages in direct subdirs of packages/- main# all packages in subdirs of components/- web/**
复制代码
配置完成后install一次就行
他会把所有的公共依赖项抽到外层而里层的依赖项都是一些最核心的
无界入门
我们使用Vue3来充当主应用 首先需要安装依赖
vue2 npm i wujie-vue2 -Svue3 npm i wujie-vue3 -Sreact npm i wujie-react -S
复制代码
主应用的main.ts
import { createApp } from vue
import App from ./App.vue
import Wujie from wujie-vue3
createApp(App).use(Wujie).mount(#app)复制代码
主应用hellowWord url填写子应用的url 子应用通过npm run dev启动
templatedivWujieVue width100% height100% namexxx :urlurl /WujieVue/div
/templatescript setup langts
import { ref, reactive } from vue
const url http://127.0.0.1:5174/
/scriptstyle scoped langless/style
复制代码
只需要简单的几行代码就可以实现微前端应用接入成本很低 ----------------------后续讲解生命周期预加载保活机制------------------------------
