微前端概念

微前端作用

• 大型应用步伐的拆分
  
• 独立的前端子应用
  
• 降低步伐复杂性，提高开发效率
  

微前端本事

• js隔离
  
• css隔离
  
• 元素隔离
  
• 生命周期
  
• 预加载
  
• 数据通信
  
• 应用跳转
  
• 多层嵌套
  
• …
  

微前端实现方案

• Iframe
  
• Single-spa
  
• Qiankun
  
• Micro-app
  

Iframe

1. <iframe src="https://www.example.com" sandbox></iframe>

复制代码

• 简单易用
  
• 天然沙箱
  
• 隔离太完美
  
• 刷新即丢失
  

Single-spa

1. import { registerApplication } from 'single-spa'
3. registerApplication({
4.   name:'app',
5.   app: () => {
6.     loadScripts('./chunk-a.js');
7.     loadScripts('./chunk-b.js');
8.     return loadScripts('./entry.js')
9.   }
10. })
12. 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:
  

1. <micro-app> 标签初始化后，加载资源前触发。

复制代码

• beforemount: 加载资源完成后，开始渲染之前触发
  
• mounted: 子应用渲染结束后触发
  
• unmount: 子应用卸载时触发
  

环境变量

1. - _MICRO_APP_PUBLI_PATH_
2. - _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为基座）

1. // 初始化vue3项目 以vue3为基座
2. npm init vue@latest
3. // 下载vue-router
4. npm install vue-router@4.0.12 --save

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。