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

一、微前端计划思路

在前端技术畛域已有如下几种成熟的实现微前端的思维：

• 基于接口协议：子利用依照协定导出几个接口，主利用在运行过程中调用子利用导出的这几个接口
• 基于沙箱隔离：主利用创立一个隔离环境，让子利用根本不必思考本人是在什么环境下经营，依照一般的开发思路进行开发即可
• 基于模块协定：主利用把子利用当作一个模块，和模块的应用形式无异

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

在前端技术畛域已有如下几种形式落地施行：

• 路由散发：开发成本低，保护成本低，可行性高，不限技术栈，实现简略
• iFrame：开发成本低，保护成本低，可行性高，不限技术栈，实现简略
• 利用微服务化：开发成本高，保护成本低，可行性中等，不限技术栈，实现难
• 微件化：开发成本中等，保护老本中等，可行性低，有技术栈限度，实现难
• 微利用化：开发成本中等，保护老本中等，可行性高，有技术栈限度，实现较难
• 纯 Web Components：开发成本高，保护成本低，可行性高，不限技术栈，实现简略
• 联合 Web Components：开发成本高，保护成本低，可行性高，不限技术栈，实现简略

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

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

• 基于Single-Spa，阿里系开源微前端框架，
• 是一个将多个单页面利用聚合为一个整体利用的 Javascript 微前端框架，
• 在同一页面上应用多个前端框架，而不必刷新页面，
• 不限技术栈，
• 反对独立部署每一个单页面利用，
• 新性能应用新框架，旧的单页利用不必重写能够共存，
• 无效改善初始加载工夫，提早加载代码，
• 文档地址：https://zh-hans.single-spa.js&＃8230;

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

• 阿里飞冰微前端框架，兼容多种前端技术栈，
• 基于 single-spa 封装，提供了更加开箱即用的 API，
• 不限技术栈，
• HTML Entry 接入形式，让你接入微利用像应用 iframe 一样简略，
• 款式隔离，确保微利用之间款式相互不烦扰，
• JS 沙箱，确保微利用之间全局变量/事件不抵触，
• 资源预加载，在浏览器闲暇工夫预加载未关上的微利用资源，减速微利用关上速度，
• umi 插件，提供了 @umijs/plugin-qiankun 供 umi 利用一键切换成微前端架构零碎，
• 文档地址：https://qiankun.umijs.org/zh/&＃8230;

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

• 后盾比拟扩散，体验差异大，因为要频繁跳转导致操作效率低，心愿能对立收口的一个零碎内，
• 单页面利用十分宏大，多人合作老本高，开发/构建工夫长，依赖降级回归老本高，
• 不限技术栈，
• 零碎有二方/三方接入的需要，
• 文档地址：https://micro-frontends.ice.w&＃8230;

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&＃8230;

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/&＃8230;

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

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

10. ngx-planet：一个弱小、牢靠、欠缺、齐全可用于生产环境的 Angular 微前端库

• 只反对 Angular 框架，不反对其余 MV* 前端框架，
• 反对同时渲染多个子利用，
• 反对并存(coexist)和默认(default)两种模式, 默认模式切换其余子利用销毁以后子利用，并存模式不会销毁，而是暗藏，
• 反对子利用的预加载，
• 反对款式隔离，
• 内置多个利用之间的通信，
• 反对跨利用组件的渲染，
• 欠缺的示例，蕴含路由配置、懒加载等所有性能，
• 文档地址：https://github.com/worktile/n&＃8230;

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

• 技术栈自在，
• 架构灵便，
• 文档地址：https://ara-framework.github&＃8230;.

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

• 应用简略，接入微前端成本低，
• 零依赖，
• 兼容所有框架（不须要提供脚手架工具），
• 提供了JS沙箱、款式隔离、元素隔离、预加载、资源地址补全、插件零碎、数据通信等一系列欠缺的性能，

• https://zeroing.jd.com/

  13. Piral：基于 React 的微前端，指标是让你能够应用微前端轻松构建门户应用程序

• 渐进迁徙，
• 共享库，
• 共享现有布局和程序框架，
• 文档地址：https://github.com/smapiot/piral

14. OpenComponent：指标是“前端世界中的无服务器”，旨在成为一个一站式微前端框架，从而使其成为一个丰盛而简单的零碎，其中包含从组件解决到注册表、再到模板、甚至包含 CLI 工具

• 同构小单元代码，
• 组件化渲染利用页面，

• 文档地址：https://github.com/opencompon&＃8230;

  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&＃8230;

四、抉择微前端计划的时候须要思考是否解决好以下10个问题

• 微利用的注册、异步加载和生命周期治理；
• 微利用之间、主从之间的音讯机制；
• 微利用之间的平安隔离措施；
• 微利用的框架无关、版本无关；
• 微利用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么治理；
• 微利用独立调试、和主利用联调的形式，疾速定位报错（发射问题）；
• 微利用的公布流程；
• 微利用打包优化问题；
• 微利用专有云场景的出包计划；
• 渐进式降级：用微利用计划平滑重构老我的项目。