qiankun(乾坤)
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。
目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用,在易用性及完备性上,绝对是值得信赖的。
什么是微前端
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值:
- 技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权 - 独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 - 增量升级在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
- 独立运行时
每个微应用之间状态隔离,运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
安装
$ yarn add qiankun # or npm i qiankun -S
文档
入门
此存储库包含一个示例文件夹,其中包含示例 Shell 应用程序和多个已安装的 Micro FE 应用程序。要运行此应用程序,请先克隆 qiankun:
$ git clone https://github.com/umijs/qiankun.git $ cd qiankun
现在运行yarn脚本来安装和运行示例项目:
$ yarn install $ yarn examples:install $ yarn examples:start
访问 http://localhost:7099
特性
- ? 基于 single-spa 封装,提供了更加开箱即用的 API。
- ? 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
- ? HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。
- ? 样式隔离,确保微应用之间样式互相不干扰。
- ? JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
- ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
- ? umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
路线图
- Parcel apps integration (multiple sub apps displayed at the same time, but only one uses router at most)
- Communication development kits between master and sub apps
- Custom side effects hijacker
- Nested Microfrontends
FAQ
https://qiankun.umijs.org/faq/
社区
https://qiankun.umijs.org/#community
致谢
- single-spa 对于微前端而言真是一个很棒的元框架!
- import-html-entry 支持 html 输入的资产加载器。