微前端实战总结篇

微前端现有的落地方案可以分为三类，自组织模式、基座模式以及模块加载模式。

# 一、为什么需要微前端?

这里我们通过3W(what,why,how)的方式来讲解什么是微前端：

# 1.What?什么是微前端?

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后再合!

# 2.Why?为什么去使用他?

• 不同团队间开发同一个应用技术栈不同怎么破？
• 希望每个团队都可以独立开发，独立部署怎么破？
• 项目中还需要老的应用代码怎么破？

我们是不是可以将一个应用划分成若干个子应用，再将子应用打包成一个个的lib呢？当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也就不用再做限制了！从而解决了前端协同开发的问题。

# 3.How?怎样落地微前端?

• 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实战

官网 https://zh-hans.single-spa.js.org/docs/configuration

# 1.构建子应用

首先创建一个vue子应用，并通过single-spa-vue来导出必要的生命周期：

vue create spa-vue  
npm install single-spa-vue  

// main.js

import singleSpaVue from 'single-spa-vue';

const appOptions = {
   el: '#vue',
   router,
   render: h => h(App)
}

// 在非子应用中正常挂载应用
if(!window.singleSpaNavigate){
 delete appOptions.el;
 new Vue(appOptions).$mount('#app');
}

const vueLifeCycle = singleSpaVue({
   Vue,
   appOptions
});


// 子应用必须导出以下生命周期：bootstrap、mount、unmount