微前端概念

微前端作用

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

微前端能力

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

微前端实现方案

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

Iframe

javascript 复制代码
<iframe src="https://www.example.com" sandbox></iframe>
  1. 简单易用
  2. 天然沙箱
  3. 隔离太完美
  4. 刷新即丢失

Single-spa

javascript 复制代码
import { registerApplication } from 'single-spa'

registerApplication({
  name:'app',
  app: () => {
    loadScripts('./chunk-a.js');
    loadScripts('./chunk-b.js');
    return loadScripts('./entry.js')
  }
})

singleSpa.start()
  1. 微前端构架鼻祖
  2. 改造成本太大
  3. 沙箱不完美
  4. 应用通信能力差
  5. 等等

Qiankun

  1. html entry
  2. 更完备的沙箱方案
  3. 适配成本高
  4. 不支持 vite

Micro-app

  1. 低侵入式
  2. 文档易读
  3. 更好的兼容性
  4. 支持 vite

现代微前端架构理念

  1. 团队自治 跨多团队合作开发困难
  2. 核心思想 开发、部署成本
  3. 场景落地 系统的渐进性、动态性

传统代码提交流程

微前端代码提交流程

核心思想:

Micro-app

本质

借鉴了WebComponent的思想,通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件,从而实现微前端的组件化渲染。

  • WebComponent: 原生组件
  • CustomElement: 自定义元素
  • ShadowDom: 影子DOM

工作原理

整体架构思路为:CustomElement + HtmlEntry

  • micro-app标签:上可以设置各种配置,比如开启iframe沙箱、开启ssr模式、开启keep-alive模式、关闭沙箱、数据通信。
  • HTMLEntry: 就是以html文件作为入口地址进行渲染

如何使用

主要功能

生命周期、环境变量、虚拟路由、JS沙箱、样式隔离、元素隔离、数据通信、等等

生命周期
  • created:
javascript 复制代码
<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接入注意

构建micro-app基座(以vue3为基座)

javascript 复制代码
// 初始化vue3项目 以vue3为基座
npm init vue@latest
// 下载vue-router
npm install [email protected] --save
相关推荐
Apifox9 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿36 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周2 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js