姜波
高级Bug开发
Canvas Ci/Cd Css Docker Docker Compose Dockerfile Express Flutter Git Gitlab Gulp Html Item2 Js Koa Mock Mongodb Mysql Nginx Node Pm2 React Socket Vue Webpack 填坑 微前端 性能优化 架构设计 正则 算法 设计原则 设计模式 面试

© 2019 - 2021 姜波 苏ICP备20040891号

微前端实现方式对比

微前端实现方式对比

星期五,九月 17 日,2021 年

Iframe

优势

  • 技术成熟
  • 支持页面嵌入
  • 天然支持运行沙箱隔离、独立运行

劣势

  • 页面之间可以是不同的域名,鉴权等
  • 需要对应的设计一套应用通讯机制,如何监听、传参格式等内容
  • 应用加载、渲染、缓存等体系的实现

Web Component

@ 姜波
1 分钟阅读
微前端的架构设计

微前端的架构设计

星期四,十一月 12 日,2020 年

构建基础设施

在单体应用里,共享层往往只有一个,而在微前端架构里,共享层则往往存在多个,有的是应用间共用的共享层,有的是应用内共用的共享层。在微前端设计初期,构建基础设施要做如下几件事情:

  • 组件与模式库。在应用之间提供通用的UI组件、共享的业务组件,以及相应的通用函数功能模块,如日期转换等
  • 应用通信机制。设计应用间的通信机制,并提供相应的底层库支持
  • 数据共享机制。对于通用的数据,采取一定的策略来缓存数据,而不是每个应用单独获取自己的数据
  • 专用的构建系统(可选)。在某些微前端实现里,如微件化,构建系统用于构建出每个单独的应用,又可以构建出最后的整个应用
@ 姜波
3 分钟阅读
微前端的业务划分方式

微前端的业务划分方式

星期四,十一月 12 日,2020 年

按照业务拆分

  • 可能同时存在多个系统,每个系统都代表自己的业务
  • 它们之间的关联可能并不是很紧密,对于前端应用来说,只需要一个系统内对象的ID,加上用户的Token,便能轻松从一个系统跳转到另外一个系统中
  • 如果业务间本身的耦合就比较严重,那么要从前端业务上分离它们,就不是很容易

按照权限拆分

@ 姜波
2 分钟阅读
微前端的技术拆分方式

微前端的技术拆分方式

星期二,十月 27 日,2020 年

路由分发式

  • 通过HTTP服务器的反向代理功能,将请求路由到对应的应用上
@ 姜波
3 分钟阅读

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接