微前端

微前端是什么?

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于.拆完后在!

它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用。这样每个小型应用都是独立的,技术栈也不用做限制了! 从而解决了前端协同开发问题。

微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更简单。

为什么要使用微前端(能解决什么问题)?

  • 解决不同团队开发同一个应用时技术栈不同的问题
  • 解决团队间独立开发、独立部署的问题
  • 实现增量迁移(老代码不动,不更改老项目,实现新的功能模块)
  • 解决应用在长时间下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后不便维护、迭代的问题

怎么实现微前端?

1、iframe 实现微前端

iframe 最大的特性就是提供了浏览器原生的硬隔离方案与微前端概念中提到的独立开发、独立维护、相互隔离非常的吻合。但是现在iframe依然不是微前端主要的实现方式呢,在qiankun技术圆桌中一篇关于微前端Why Not Iframe文中总结很到位:
iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。

2、Single-SPA 实现微前端

2018年诞生了Single-SPA ,Single-SPA 是一个用于前端微服务化的JavaScript前端解决方案(本身没有处理样式隔离、js执行隔离)实现了路由劫持和应用加载。

3、qiankun 实现微前端

2019年qiankun 基于Single-SPA,解决了 Single-SPA 本身没有处理的 JS沙盒环境(样式隔离、js执行隔离。提供了更加开箱即用的API( single-spa + sandbox + import-html-entry ),做到了技术栈无关,且接入简单。
qiankun入门

4、EMP 实现微前端

2020年 EMP 基于module Federation,接入成本低,解决第三方依赖包问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、背景 为了解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石...
    小任务大梦想阅读 2,682评论 0 0
  • 转载请注明出处,点击此处[https://shichaohui.github.io/] 查看更多精彩内容。 ifr...
    StoneHui阅读 2,895评论 0 0
  • 开篇 时值当下,作为一名合格的前端开发人员,我相信你一定会有一个很明显的感觉:Web 业务日益复杂化和多元化,前端...
    虚拟J阅读 8,003评论 0 6
  • 一、什么是微前端 Techniques, strategies and recipes for building ...
    梅西爱骑车阅读 8,560评论 0 15
  • 一 、微前端概念 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略核心...
    lemonzoey阅读 13,164评论 0 1