西宁做网站君博相约,南通网站建设找哪家,wordpress微信qq登录,网站开发 附加协议微前端作用
大型应用程序的拆分独立的前端子应用降低程序复杂性#xff0c;提高开发效率
微前端能力
js隔离css隔离元素隔离生命周期预加载数据通信应用跳转多层嵌套…
微前端实现方案
IframeSingle-spaQiankunMicro-app
Iframe
iframe srchttps://www.examp…微前端作用
大型应用程序的拆分独立的前端子应用降低程序复杂性提高开发效率
微前端能力
js隔离css隔离元素隔离生命周期预加载数据通信应用跳转多层嵌套…
微前端实现方案
IframeSingle-spaQiankunMicro-app
Iframe
iframe srchttps://www.example.com sandbox/iframe简单易用天然沙箱隔离太完美刷新即丢失
Single-spa
import { registerApplication } from single-sparegisterApplication({name:app,app: () {loadScripts(./chunk-a.js);loadScripts(./chunk-b.js);return loadScripts(./entry.js)}
})singleSpa.start()微前端构架鼻祖改造成本太大沙箱不完美应用通信能力差等等
Qiankun
html entry更完备的沙箱方案适配成本高不支持 vite
Micro-app
低侵入式文档易读更好的兼容性支持 vite
现代微前端架构理念
团队自治 跨多团队合作开发困难核心思想 开发、部署成本场景落地 系统的渐进性、动态性
传统代码提交流程 微前端代码提交流程 核心思想
Micro-app
本质
借鉴了WebComponent的思想通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件从而实现微前端的组件化渲染。
WebComponent: 原生组件CustomElement: 自定义元素ShadowDom: 影子DOM
工作原理 整体架构思路为CustomElement HtmlEntry
micro-app标签上可以设置各种配置比如开启iframe沙箱、开启ssr模式、开启keep-alive模式、关闭沙箱、数据通信。HTMLEntry: 就是以html文件作为入口地址进行渲染
如何使用 主要功能
生命周期、环境变量、虚拟路由、JS沙箱、样式隔离、元素隔离、数据通信、等等
生命周期
created:
micro-app 标签初始化后加载资源前触发。beforemount: 加载资源完成后开始渲染之前触发mounted: 子应用渲染结束后触发unmount: 子应用卸载时触发
环境变量 - _MICRO_APP_PUBLI_PATH_- _MICRO_APP_BASE_ROUTE_虚拟路由系统
通过虚拟路由系统我们可以方便的进行导航守卫、跨应用的跳转、提升开发效率、并且子应用运行在这套虚拟路由系统中和主应用的路由进行隔离避免相互影响如
主应用控制子应用跳转子应用控制主应用跳转子应用控制其他子应用跳转
JS沙箱
确保子应用之间 全局变量/事件不冲突
样式隔离 元素隔离
元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突micro-app模拟实现了类似ShadowDom的功能元素不会逃离micro-app 元素边界子应用只能对自身的元素进行增、删、改、查的操作。
数据通信
主子应用间通信子应用全局通信
其他能力
预加载、缓存等等
兼容性
技术栈 Vue、React、Angular、Nuxt、Next构建工具Webpack、Vite、Vue-cli浏览器PC端除了IE浏览器其他浏览器基本兼容移动端ios10、android5
Micro-app接入注意
子应用跨域Webpack、Vite样式隔离约定前缀、命名空间 官方网站https://micro-zoe.github.io/micro-app/
构建micro-app基座以vue3为基座
// 初始化vue3项目 以vue3为基座
npm init vuelatest
// 下载vue-router
npm install vue-router4.0.12 --save
