微前端

概念详解

什么是微前端？

微前端（Micro-Frontend），是将微服务（Micro-Services）理念应用于前端技术后的 相关实践，使得一个前端项目能够经由多个团队独立开发以及独立部署。

01 微前端开发的特性

  • 技术无关：各个开发团队都可以自行选择技术栈，不受同一项目中其它团队影 技术无关 响；
  • 代码独立：各个交付产物都可以被独立使用，避免和其它交付产物耦合；
  • 样式隔离：各个交付产物中的样式不会污染到其它组件；
  • 原生支持：各个交付产物都可以⾃由使⽤浏览器原⽣ API，⽽⾮要求使⽤封装后的 API；

解决了什么问题？

解决应⽤越来越⼤，维护成本⾼的问题

主要体现在：

  • 代码复杂度不可控，多⼈协作带来困难
  • 模块容易相互影响，⼀个模块出错，往往导致另外模块出错
  • 项⽬扩展性差，不利于横向扩展
  • ⽆法独⽴部署，为什么需要独⽴部署
  • 技术选型灵活，真的必要吗？

02 微服务平台和微前端对⽐

-

微服务

微前端

备注

服务

独⽴服务，⽐如交易服务

应⽤或者模块，⽐如导航

服务是不会相互影响的

服务治理

服务注册/发现/依赖管理/跟踪/降级/限流/⽇志/

应⽤的发现/路由/监控/降级/运⾏/注销/聚合 等

需要⼀个/多个系统统⼀处理⼀些上层的事情

服务通信

HTTP / RPC/ 中间件

eventBus/ sharedWorker/ LocalStorage

03 微前端基本构成

  • 中心化路由，服务注册中心
  • 标识化应用
  • 设计一定的生命周期
  • 部署和配置自动化




部署更新

title:常见的微前端结构

应用信息

主程序 js/css/assets/common Router.EventBus.LifeCycle

应用1js/css/assets

应用2js/css/assets


应用场景

常见场景

  • 是将单个应⽤拆分为多个独⽴的应⽤，通过导航栏和动态加载来实现⽆缝的切换
  • 单个⻚⾯上的模块也可以拆分为不同的微前端

如何实施微前端

**拆分和聚合 **

常⻅的⽅式

⼤仓库通过 monorepo methodology 做成npm包，集成主项⽬ 拆分多仓库，动态加载的⽅式进⾏集成

常见技术实现方案

  1. 通过IFrame⽅式进⾏聚合
  2. 使⽤WebComponent构建应⽤
  3. 在不同的框架之上设计通讯、加载机制，诸如 Single-SPA
iframe现存问题
  • 不可控制：iframe嵌⼊的显示区⼤⼩不容易控制，存在⼀定 局限性
  • bfcache！ URL的记录完全⽆效，⻚⾯刷新不能够被记忆， 刷新会返回⾸⻚，iframe功能之间跳转也⽆效。
  • 兼容性坑 iframe的样式显示、兼容性等都具有局限性
  • 性能开销 frame 阻塞 onload、占⽤连接池、多层嵌套⻚ ⾯崩溃。。
iframe方案实现方式
  • 通过菜单聚合，含有两个应⽤ Vue/React
  • 刷新需要保持状态

前端服务与微服务 前端微服务是什么_前端

对于⼀些共⽤ UI 组件⽽⾔，仍然需要重复加载。这也就是 iframe 模式下的问题 

   Iframe嵌套是⼀个⽐较⼤的问题

   Iframe在移动端适配的时候存在⼀些兼容性问题

Iframe的优势也⽐较明显

   改造成本低，可以快速上线
   
   沙盒模型，各个模块天然隔离，不需要考虑样式污染，应⽤之间的相互影响
WebComponents

场景：单⻚⾯应⽤，业务⽐较复杂，需要解耦

开发效果
  • ⽅案： 分为三个模块，专⼈维护
  • ⻚⾯相同的技术栈和规范，构建相同
开发示意图

前端服务与微服务 前端微服务是什么_开发语言_02

SIngle-SPA

业务越来越复杂了， 有些应⽤要其他技术栈

SIngle-SPA-Portal

技术栈多样

代码太⼤，需要拆库

需要独⽴部署，减少影响

难点： 公共库如何管理，如何解决CSS冲突的问题

qiankun