1、介绍
Qiankun 是一个基于single-spa 的微前端实现库,旨在帮助大家能更简单,无痛的构建一个 生产可用微前端架构系统。 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,经过一批线上应用的充分检验及 打磨后,将其微前端内核抽离出来并开源。目前 qiankun 已在蚂蚁内部服务了超过 200+ 线 上应用,在易用性及完备性上,是值得信赖的。
2、核心设计理念
微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用,而qiankun 的诸多设计均 是秉持这一原则。如:html entry, 沙箱,应用间通信等。确保微应用真正具备独立开发,独 立运行的能力;使得微应用的接入像使用iframe一样简单。
2.1 技术特性
技术栈无关,可支持多种技术框架;
独立开发,独立部署,独立运行;
基于single-spa 封装,提供了更加开箱即用的API;
HTML Entry 接入方式: import-html-entry 去加载对应html 文件;
样式隔离,JS 沙箱:确保微应用之间样式互相不干扰,确保微应用之间 全局变量/事件不冲 突;
资源预加载:在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度;
3、qiankun实战
3.1 架构搭建
qiankun 是基于基座模式的,所以它必然有一个基座应用(主应用),来管理各个子应用的加 载和卸载。我们以一个基于Vue的管理系统为例,来看如何搭建一个微前端项目。
3.2 基座搭建
- qiankun安装:npm i qiankun -S
- 搭建好一个常规的Vue应用,并编写好以上三个区域对应的组件,此时的根组件结构 大概如下
<template>
<div class="container">
<div class="app-header">
<prime-header></prime-header>
</div>
<div class="app-menu">
<prime-menu></prime-menu>
</div>
<div class="app-content">
<div id