跳至主要內容

微前端探索

Cap原创大约 1 分钟微前端微前端

现前端架构(BF2020)

1.是否需要基于现公司的架构写个文档
2.参考之后的优化点

优点

  • 不同的业务为不同的仓库,独立维护。如:对话机器人|中控|智能客服
  • 可快速启动单个模块,按需打包,按需部署
  • 统一技术栈(vue)
  • 基于docker的方式使用common-module公共组件,快速部署快速调试

缺点

  • 子工程切换相当于重新加载了一个应用
  • 子工程无法使用全局store,现在都是通过localstorage来获取些公共信息
  • 多个子系统的对接,例如BI,运营平台

美团微前端实践

名称:基于React技术栈的中心路由基座式微前端
pc/h5/ 对应有个基座工程,主要负责路由/子项目注册/复用模块

基座工程和子工程联系起来的桥梁则是子工程的入口文件地址和路由地址的映射信息。这些映射信息可以让基座工程准确地发现子工程资源的路径从而进行加载。

动态路由

需要解决的问题

  • 多个独立的子业务如何统一UI体验(CSS和公共组件)

  • 我们如何确保一个团队不会覆盖另一个团队编写的CSS?

  • 微应用之间如何共享全局信息(store)

  • 微应用中的路由如何管理(router)

从知识库切入,实现微前端

  • 顺带整合nginx
  • 打包方式选择性调整
  • 公共组件