微前端实践-qiankun

159 阅读2分钟

一、需求背景

1、需求描述

最近,领导提出一个想法,说是要将我们团队的一些子系统聚合在一起,组成一个大的应用系统。在这个应用系统 中,可以对子系统的权限进行统一管控。另外,子系统也可以进行独立部署及访问。最后,要将这个大的应用系统 交付给其他业务部门,供他们使用。

2、需求分析

听了领导的描述,我的脑子飞快运转。“大的应用系统”、“子系统”、“子系统独立部署”等这些关键词汇,听起来像是在描述一个现今前端比较火的技术——微前端。于是去查阅了一些微前端框架,有京东的MicroApp, 蚂蚁的qiankun等等。MicroApp是一款基于类WebComponent进行渲染的微前端框架,qiankun是一款基于spa进行渲染的微前端框架。考虑到我们现在的子系统都是基于spa实现的,并且之前团队也有同事有qiankun的使用经验。于是决定采用qiankun。

二、qiankun介绍

去了qiankun官网,发现官网是这么介绍微前端技术的:

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

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

翻译一下:微前端技术可以将不同团队开发的应用系统聚合成一个大的应用系统。

另外,也介绍了qiankun的一些特性:

  • 📦 基于 single-spa 封装,提供了更加开箱即用的 API。
  • 📱 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • 💪 HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。
  • 🛡​ 样式隔离,确保微应用之间样式互相不干扰。
  • 🧳 JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
  • ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
  • 🔌 umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

总结一下:qiankun很好用,可以满足我这次的需求。其他与乾坤相关的信息,请移步qiankun官网,将会有更详细的介绍。

三、qiankun实践

以上都是都该篇帖子的铺垫,若想直入主题,请直接查看以下内容。

四、需要注意的坑点