一、为什么要学习微前端
什么是微前端
微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。
微前端的核心在于拆, 拆完后在合!
为什么去使用微前端
不同团队间开发同一个应用技术栈不同怎么破?
希望每个团队都可以独立开发,独立部署怎么破?
项目中还需要老的应用代码怎么破?
我们是不是可以将一个应用划分成若干个子应用,将子应用打包成一个个的lib。当路径切换时加载同的子应用。这样每个子应用都是独立的,技术栈也不用做限制了!从而解决了前端协同开发问题
怎样落地微前端
微前端的灵感来源于,计算机上的应用,每一次用户打开一个应用,就相当于打开了一个新的页面
2018年 Single-SPA诞生了, single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 (本身没有处理样式隔离, js 执行隔离) 实现了路由劫持和应用加载
2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API ( single-spa + sandbox + import-html-entry ) 做到了,技术栈无关、并且接入简单(像iframe 一样简单)
总结:子应用可以独立构建,运行时动态加载,主子应用完全解耦,技术栈无关,靠的是协议接入(子应用必须导出 bootstrap、mount、unmount方法)
这里先回答下大家的问题:
这不是iframe吗?
如果使用 iframe , iframe 中的子应用切换路由时用户刷新页面就尴尬了
应用之间怎么通信
基于URL来进行数据传递,但是传递消息能力弱
基于 CustomEvent 实现通信
基于props主子应用间通信
使用全局变量、 Redux 进行通信
公共依赖
CDN - externals
webpack 联邦模块
微前端架构具备以下几个核心价值:
技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权
独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时
每个微应用之间状态隔离,运行时状态不共享
二、SingleSpa 实战
Single-Apa完整的项目请参考 gitHub
构建子应用
我们需要父应用加载子应用,需要暴露三个方法:
1. bootstrap
2. mount
3. unmount
1. 构建子应用
// 启动项目安卓依赖
vue create single-child
npm i--save single-spa-vue
// main.js中导入依赖
import singleSpaVue from'single-spa-vue'const appOptions={
el:'#vue', //挂载到父应用中的 id 为 vue 的标签中
router,
render: h=>h(App)
}
const vueLifeCycle= singleSpaVue({ //返回single-spa 的生命周期也就是 bootstrap/mount/unmount
Vue,
appOptions
});//single规定的协议,父应用会调用这些方法
export const bootstrap =vueLifeCycle.bootstrap;
export const mount=vueLifeCycle.mount;
export const unmount=vueLifeCycle.unmount;//这样做还有一个严重的问题,子应用无法启动了??
2. 配置子应用中的打包路径
//配置vue.config.js
module.exports ={
configureWebpack: {
output: {
library:'singleVue',
libraryTarg:'umd'},
devServer: {
port:10000}
}
};
3. 配置子应用的路由
const router = newVueRouter({
mode:'history',
base:'/vue', //配置路由的基础路径
routes
})
4. 父应用搭建
vue create single-parent
npm i--save single-spa //注意这里是single-spa
5. 将子应用挂载到 id="vue" 的容器中
加载vue引用