Skip to content

微前端的学习主要依靠视频以及文章 慕课网-从零打造微前端框架:“汽车资讯平台”项目

慕车平台架构图微前端架构图

争议点: 其实一直存在微前端,比如iframe等等

微前端介绍

因为已经有现有大厂做微前端开源了,所以关于微前端的概念,从他们官方文档看更为准确

qiankun官方文档-介绍

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

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

微前端架构具备以下几个核心价值:

  • 技术栈无关
    • 主框架不限制接入应用的技术栈,微应用完全独立
  • 独立开发、独立部署
    • 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 增量升级
    • 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  • 独立运行时
    • 每个微应用之间状态隔离,运行时状态不共享

个人观点

移动端也可以设计方案,但是收益和付出不符,所以基本不会考虑 对我遇到的真实场景来说,微前端技术在独立升级的时候会是一种很好的技术

比如现有一个庞大的管理系统用vue2进行开发,现在想升级到vue3又不想影响原有业务 这种时候

  • 新建应用,以时间分割,同一个团队维护2个应用,需要解决跳转关联等问题
  • 拟定计划,新建应用,准备全量重构,一点一点迁移原有业务到新技术栈
  • 直接升级现有项目,需要全量回归测试,期待vue团队提供最方便无痛的升级方案
  • 放弃升级vue3,继续使用vue2

有了微前端架构之后,新建接入vue3技术的业务应用即可。 所以微前端的应用场景一般在已有一个庞大的工程,迁移难度大的时候会是一种很好的选择。

可能是你见过最完善的微前端解决方案-qiankun