微前端的一些思考

1,033 阅读3分钟

「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战

写在前面

2020年的时候接到个需求要将两个独立的前端网站合并成一个前端网站。接到这个需求是比较懵的,超出了自身的认知范围,再一番调研以及请教之后得出大致的步骤如下:

  • 新建前端 Node 项目,只要功能负责配置项目接口地址、请求转发
  • 新建前端 Layout 项目,主要功能渲染公共组件,比如菜单等
  • 分别改造需要合并的项目,主要改造移除公共组件,比如菜单等

我理解这应该就是 微前端 吧。后来就接触到公司内部的一个微服务系统,只需要按照相关配置就可以将自己的项目接入公司的前端中台系统,主要的目的是

  • 子系统发布不受约束,独立部署,同步更新
  • 非侵入式整合使用React、Angular、Vue等前端框架搭建的中后台项目

虽然用起来很舒服,但是对项目依旧存在一些疑问点。所以今天就聊一聊我理解的前端的微服务。

我理解的微前端

主要解决的问题是一个巨大的前端应用在经历无数次迭代之后变的不可维护、不可迭代等缺点。这一痛点跟后端项目遇到的问题是一致的。

本质上就是 解耦解耦再解耦

优点:

  • 各项目独立运行独立部署互不干扰
  • 项目编译打包速度明显提升,不会因为一次意外整个项目重新打包
  • 项目可以复用,比如用户模块多个项目可以公用一个

阿里微前端框架 qiankun

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

关于 qiankun 的具体搭建/部署推荐大佬的文章:

当然最好是结合官方的文档上手操作一下 qiankun 项目实践

写在最后

  • 大家都知道 Iframe 似乎具备所有微前端的特质,为什么不使用呢?

    答案见 Why Not Iframe ,一句话总结来说:Iframe 的限制太多,对开发、用户不够友好。

  • 关于微前端的一些思考

    个人觉得前端的微服务框架需要注意的点有:

    • 一套统一的 UI、Layout 的框架
    • 一套完整的用户登录、鉴权基础服务
    • 一套完善的微服务接入流程

总结:qiankun 提供了一套能够融合 React、Vue 等框架,快速构建一个生产可用微前端架构系统。实际项目中如何使用这套架构及这套架构能够带来的价值仍然需要开发人员结合实际需求决定。