头图

17个可以实现微前端的方案

透明技术人

一、微前端方案思路

在前端技术领域已有如下几种成熟的实现微前端的思想:

  • 基于接口协议:子应用按照协议导出几个接口,主应用在运行过程中调用子应用导出的这几个接口
  • 基于沙箱隔离:主应用创建一个隔离环境,让子应用基本不用考虑自己是在什么环境下运营,按照普通的开发思路进行开发即可
  • 基于模块协议:主应用把子应用当作一个模块,和模块的使用方式无异

二、微前端实现的几种方式

在前端技术领域已有如下几种方式落地实施:

  • 路由分发:开发成本低,维护成本低,可行性高,不限技术栈,实现简单
  • iFrame:开发成本低,维护成本低,可行性高,不限技术栈,实现简单
  • 应用微服务化:开发成本高,维护成本低,可行性中等,不限技术栈,实现难
  • 微件化:开发成本中等,维护成本中等,可行性低,有技术栈限制,实现难
  • 微应用化:开发成本中等,维护成本中等,可行性高,有技术栈限制,实现较难
  • 纯 Web Components:开发成本高,维护成本低,可行性高,不限技术栈,实现简单
  • 结合 Web Components:开发成本高,维护成本低,可行性高,不限技术栈,实现简单

三、17个实现微前端的框架简介

1. Single-Spa:最早的前端微服务 Javascript 框架,兼容多种前端技术栈

  • 基于Single-Spa,阿里系开源微前端框架,
  • 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架,
  • 在同一页面上使用多个前端框架,而不用刷新页面,
  • 不限技术栈,
  • 支持独立部署每一个单页面应用,
  • 新功能使用新框架,旧的单页应用不用重写可以共存,
  • 有效改善初始加载时间,延迟加载代码,
  • 文档地址:https://zh-hans.single-spa.js...

2. Qiankun:基于Single-Spa,阿里系开源微前端框架

  • 阿里飞冰微前端框架,兼容多种前端技术栈,
  • 基于 single-spa 封装,提供了更加开箱即用的 API,
  • 不限技术栈,
  • HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单,
  • 样式隔离,确保微应用之间样式互相不干扰,
  • JS 沙箱,确保微应用之间全局变量/事件不冲突,
  • 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度,
  • umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统,
  • 文档地址:https://qiankun.umijs.org/zh/...

3. Icestark:阿里飞冰微前端框架

  • 后台比较分散,体验差别大,因为要频繁跳转导致操作效率低,希望能统一收口的一个系统内,
  • 单页面应用非常庞大,多人协作成本高,开发/构建时间长,依赖升级回归成本高,
  • 不限技术栈,
  • 系统有二方/三方接入的需求,
  • 文档地址:https://micro-frontends.ice.w...

4. Alibaba Cloud Alfa 是在阿里云控制台体系中孵化的微前端方案,定位是面向企业级的微前端体系化解决方案

  • 不限技术栈,
  • 开箱即用,无代码侵入,
  • 完善的微前端体系支撑,
  • 完整的前端容器沙箱,
  • 多实例兼容,
  • 文档地址:https://alfajs.io/

5. Module Federation:是 Zack Jackson 发明的 JavaScript 架构,Zack Jackson 随后提出为其创建一个 Webpack 插件。

  • 是webpack给出的微前端方案,
  • 使 JavaScript 应用可以动态运行另一个 JavaScript 应用中的代码,同时可以共享依赖,
  • 依赖自动管理,可以共享 Host 中的依赖,版本不满足要求时自动 fallback 到 Remote 中依赖,
  • 共享模块粒度自由掌控,小到一个单独组件,大到一个完整应用。既实现了组件级别的复用,又实现了微服务的基本功能,
  • 共享模块非常灵活,模块中所有组件都可以通过异步加载调用,
  • 文档地址:https://webpack.js.org/concep...

6. FrintJS:用于构建可伸缩和响应式应用程序的模块化 JavaScript 框架

  • 加载来自不同 bundlers 的应用程序,为应用程序提供结构,并处理诸如路由、依赖关系等问题,
  • 通过附加的软件包支持 RN 和 Vue,但文档和测试大多数是针对 React 的,
  • 文档地址:https://frint.js.org/

7. Bit:将独立的组件构建、集成和组合到一起和管理前端

  • 具有传统单体式前端的安全性和健壮性,
  • 介接入方式简单、可伸缩性强,
  • 通过 简单的解耦代码库、自治团队、小型定义良好的 API、独立的发布管道 和 持续增量升级,增强工作流程,
  • 文档地址:https://bit.dev/docs/quick-start

8. PuzzleJS:用于可扩展和快速建站的微前端框架

  • SEO 友好,在服务端进行准备和渲染,
  • 当片段所需的 api 出现故障时,PuzzleJs 可保证其他页面片段仍正常工作,
  • 文档地址:https://github.com/puzzle-js/...

9. Mooa:基于Angular的微前端服务框架

  • 兼容多种前端技术栈,
  • 构建插件化的 Web 开发平台,满足业务快速变化及分布式多团队并行开发的需求,
  • 构建服务化的中间件,搭建高可用及高复用的前端微服务平台,
  • 支持前端的独立交付及部署,
  • 文档地址:https://github.com/phodal/mooa

10. ngx-planet:一个强大、可靠、完善、完全可用于生产环境的 Angular 微前端库

  • 只支持 Angular 框架,不支持其他 MV* 前端框架,
  • 支持同时渲染多个子应用,
  • 支持并存(coexist)和默认(default)两种模式, 默认模式切换其他子应用销毁当前子应用,并存模式不会销毁,而是隐藏,
  • 支持子应用的预加载,
  • 支持样式隔离,
  • 内置多个应用之间的通信,
  • 支持跨应用组件的渲染,
  • 完善的示例,包含路由配置、懒加载等所有功能,
  • 文档地址:https://github.com/worktile/n...

11. Ara Framework:Ara 是一个使用Airbnb 的 Hypernova轻松开发和集成微前端的框架

12. Micro-app:是京东零售推出的基于类WebComponent进行渲染,从组件化的思维实现的微前端技术

  • 使用简单,接入微前端成本低,
  • 零依赖,
  • 兼容所有框架(不需要提供脚手架工具),
  • 提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能,
  • https://zeroing.jd.com/

13. Piral:基于 React 的微前端,目标是让你可以使用微前端轻松构建门户应用程序

14. OpenComponent:目标是“前端世界中的无服务器”,旨在成为一个一站式微前端框架,从而使其成为一个丰富而复杂的系统,其中包括从组件处理到注册表、再到模板、甚至包括 CLI 工具

15. Liugi:是一个微前端 JavaScript 框架,你可以使用它创建由本地和分布式视图驱动的管理用户界面

  • 允许 Web 应用程序与应用程序包含的微前端进行通信,
  • 可以配置路由、导航、授权和 UX 元素等设置,
  • 文档地址:https://github.com/SAP/luigi

16. Mosaic:是一组服务,库以及规范定义了其组件之间如何彼此交互,用来支持大型网站的微服务式架构

  • 使用了片段(Fragments)的机制,这些片段由单独的服务程序提供服务,并根据模板定义在运行时组合在一起,
  • 由一堆软件包组成,这些软件包处理不同的问题,例如路由、布局、模板存储、甚至展示 UI,
  • 文档地址:https://www.mosaic9.org/

17. SystemJS:不是微前端框架,但它确实为跨浏览器的独立模块管理提供了解决方案

  • 使我们无需依赖本机浏览器支持,即可使用与 JS 模块相关的不同功能,诸如动态导入和导入映射等,并且所有这些都具有接近本机的性能,
  • 提供便捷的方式访问其“模块注册表”,以便你随时了解浏览器中哪些模块是可用的,
  • 文档地址:https://github.com/systemjs/s...

四、选择微前端方案的时候需要考虑能否解决好以下10个问题

  • 微应用的注册、异步加载和生命周期管理;
  • 微应用之间、主从之间的消息机制;
  • 微应用之间的安全隔离措施;
  • 微应用的框架无关、版本无关;
  • 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理;
  • 微应用独立调试、和主应用联调的方式,快速定位报错(发射问题);
  • 微应用的发布流程;
  • 微应用打包优化问题;
  • 微应用专有云场景的出包方案;
  • 渐进式升级:用微应用方案平滑重构老项目。
阅读 2k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏