微前端的几个常用框架：single-spa ， 基于single-spa的qiankun。
微前端实现方式：
1.服务端集成
通过nginx配置反向代理来实现不同路径映射到不同应用，
-部分核心代码
server {
listen 80;
server_name example.com;
location /app1/ {
proxy_pass http://app1-server;
}
location /app2/ {
proxy_pass http://app2-server;
}
}
const express = require('express');
const app = express();
const httpProxy = require('http-proxy');
const apiProxy = httpProxy.createProxyServer({});
app.use('/app1', (req, res) => {
apiProxy.web(req, res, { target: 'http://app1-server' });
});
app.use('/app2', (req, res) => {
apiProxy.web(req, res, { target: 'http://app2-server' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
个人理解：其实就是把两个应用分别映射到两个url路径下，用户输入/app1时，就会请求app1的前端，输入/app2时，就会请求到app2的前端。
弊端：丢失spa的体验，每次命中路由都会重新请求资源，不能局部更新当前页面。
2.运行时集成
使用iframe，配置不同的src加载不同的子应用
-部分核心代码
主应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主应用</title>
</head>
<body>
<h1>主应用页面</h1>
<!-- 嵌入子应用 -->
<iframe id="subApp" src="sub-app.html" width="100%" height="500px"></iframe>
<script>
// 示例：主应用向子应用发送消息
const iframe = document.getElementById('subApp');
iframe.contentWindow.postMessage('来自主应用的消息', '*');
// 监听子应用发送的消息
window.addEventListener('message', (event) => {
console.log('收到子应用的消息:', event.data);
});
</script>
</body>
</html>
子应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子应用</title>
</head>
<body>
<h1>子应用页面</h1>
<script>
// 监听主应用发送的消息
window.addEventListener('message', (event) => {
console.log('收到主应用的消息:', event.data);
// 子应用向主应用发送消息
window.parent.postMessage('来自子应用的消息', '*');
});
</script>
</body>
</html>
核心在于传递信息
(1).主应用传递信息
iframe.contentWindow.postMessage
(2).子应用接受信息
window.addEventListener('message', (event) => {
});
(3).子应用传递信息给主应用
window.parent.postMessage('来自子应用的消息', '*');
(4).两个子应用之间传递
两个子应用之间通过主应用进行传递
用localstorage 或者sessionstorage
缺点
(1).iframe功能之间的跳转是无效的，刷新页面无法保存状态。
(2).url记录完全无效。
(3).主应用劫持快捷键操作，事件冒泡不穿透到主文档树上。
(4).模态弹窗的背景是无法覆盖到整个应用。
(5).iframe应用加载失败，内容发生错误主应用无法感知，通信麻烦。
3.现有比较流行的解决方案
1.single-spa *
single-spa定义了一套协议，协议包含主应用的配置信息和子应用的生命周期，通过这套协议，主应用可以方便的知道在什么情况下激活哪个子应用。
singleSpa.registerApplication(
{
name: 'appName', //子应用的名称
app: () =>System.import('appName'), //告诉主应用如何加载子应用的代码
activeWhen: '/appName', //告诉主应用何时激活子应用
})
(1).system.import
主应用要想加载子应用，首先要在子应用中实现生命周期函数，然后导出给主应用，变成一个带有生命周期的模块，涉及到js的模块化。以下是js模块化的一些知识点。
commonjs规范
同步加载，
AMD
异步加载，加载完就执行
CMD
异步加载，使用的时候才会执行
(2).single-spa加载流程
1.在主应用中配置信息，主应用会根据配置信息去请求子应用的manifest.json配置文件，这个文件是子应用打包的入口js和文件的依赖关系，主应用通过动态狗仔scrip标签去加载这些js文件，完成注册过程。
2.检测路由命中应用的规则之后，就会触发其下渲染函数，挂载到相应的dom下。
(3).single-spa生命周期
single-spa关键点生命周期，子应用包含bootstrap,mount,unmount三个生命周期，通过子应用暴露的生命周期函数来实现子应用的启动和卸载。
(4).single-spa缺陷
1.通过js文件加载子应用，文件名是乱码时，子应用更新后，父应用需要重新引入配置，比较麻烦
2.缺少js隔离和css隔离。
2.qiankun **
qiankun基于single-spa，但又有些许不同，single-spa注册子应用本质是js enrty，通过某一地址引入js文件夹来加载整个子应用，但是qiankun注册子应用的方式是通过一个url,即使用html enrty 来引入子应用
registerMicroApps([{ name: 'react app', entry: '//localhost:7100', container: '#yourContainer', activeRule: '/yourActiveRule' },]);
start();
url一般是固定的，所以不用频繁更新主应用中的注册信息，便于整合和开发。
(1).样式隔离
shadowdom
(2).js隔离
快照沙箱
legacy沙箱（es6-proxy）
(3).生命周期
3.Module Federation以及EMP **
Module Federation是webpack5中的新特性，主要是用来解决多个应用之间代码共享的问题，可以更加优雅的实现跨应用的代码共享，使用这个方法也可以实现微前端。
这个方案中有两个主体：Remote和Host，可以把Remote理解为想要引入的子应用，把Host理解为主应用（但是一个应用既可以是Remote也可以是Host，并不矛盾）。
Module Federation的核心在于ModuleFederationPlugin这个插件：
new ModuleFederationPlugin({
name: "App1", //必须，唯一ID，作为输出的模块名，使用的时通过name/{expose}的方式使用；
library: { type: "var", name: "App1" }, //必须，其中这里的name为作为umd的name。
filename: "remoteEntry.js",
remotes: { app_02: 'App2', app_03: 'App3', }, //可选，表示作为Host时，去消费哪些Remote。
exposes: { antd: './src/antd', button:'./src/button', }, 可选，表示作为Remote时，export哪些属性被消费。
shared: ['react', 'react-dom'], })//可选，优先用Host的依赖，如果Host没有，再用自己的。
qiankun学习与实战
以下详细对qiankun进行一个学习归纳，基于文档，学习视频和自身理解。
qiankun学习文档
### 详细描述一下 qiankun 微前端框架的工作原理
qiankuan是基于single-spa的微前端实现框架，工作原理主要涉及：
1.应用加载
通过动态创建script标签的方式加载子应用的入口文件，加载完成后，会执行子应用暴露出来的生命周期函数。
2.生命周期管理
子应用需要暴露出bootstrap,mount和unmount三个生命周期函数，bootstrap在子应用加载时被调用，mount函数在子应用启动时被调用，unmount函数在子应用卸载时被调用。
3.沙箱隔离
qiankun通过Proxy对象创建了一个js沙箱，用户隔离子应用的全局变量，防止子应用之间的全局变量污染。
4.样式隔离
qiankun通过动态添加和移除样式标签的方式实现了样式隔离，当子应用启动时，会动态添加子应用的标签样式，卸载时，会移除子应用的标签样式。
qiankun 提供了快照沙箱和代理沙箱两种模式。代理沙箱基于 ES6 的 Proxy 对象实现，部分旧版本浏览器（如 IE 系列）不支持 Proxy，只能使用快照沙箱。而快照沙箱在处理复杂场景时可能存在局限性，并且在某些情况下恢复全局状态时可能会出现不一致的问题。
5.通信机制
qiankun提供了一个全局的通信机制，允许应用之间进行通信。
qiankun资源加载机制
import-html-entry是qiankun中用于加载子应用的html入口文件的工具函数，提供了一种方便的方式来动态加载和解析子应用的html入口文件，并返回一个可以加载子应用的js模块。
import-html-entry实现了以下功能：
1.加载html入口文件
import-html-entry会创建一个<link>标签来加载子应用的html入口文件，这样可以确保子应用的资源得到正确加载，并在加载后处理。
2.解析html入口文件
加载完成后，import-html-entry会解析该文件的内容，提取出子应用的js和cs资源的url。
3.动态加载js和css资源
import-html-entry使用动态创建<script>和<link>标签的方式，按照正确的顺序加载子应用的js和css资源
4.创建沙箱环境
在加载子应用的js资源时，impor-html-entry会创建一个沙箱环境（sandbox），用于隔离子应用的全局变量和运行环境，防止子应用之间的冲突和污染。
5.返回子应用的入口模块
最后，import-html-entry 返回一个加载子应用的js模块，这个模块通常是一个包含子应用初始化代码的函数，可以在主营用中调用以加载和启动子应用。
项目目录：
micro-base 基座（主应用）：主要负责集成所有的子应用
app-react,vue-react (子应用)：根据不同业务划分的模块，每个子应用都打包成umd模块的形式供基座来加载
互相通信
1.localstorage sessionstorage 通信 (在app-react，micro-base中通信)
localStorage.setItem("storage-token", 'my-storage-token')
在子应用中通过
localStorage.getItem('storage-token)
2.通过路由参数共享 (在app-vue,micro-app中通信)
3、官方提供的 props
a.父传子
{
name: 'reactApp',
entry: '//localhost:3001',
container: '#container',
activeRule: '/app-react',
props: {
qiankunProp: 'qiankun-prop-token',
changeQiankunProp: changeQiankunProp //子传父所需要的事件
}
},
子在子应用生命周期里通过props获取
b.子传父
props中的事件，与react通信类似
4.官方提供的 actions
// 初始化 state
const state = {
actionsToken: 'my-actions-token'
}
const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log('actions改变状态', state, prev)
});
actions.setGlobalState(state);
actions.offGlobalStateChange()
5、使用vuex或redux管理状态，通过shared分享
子应用通过状态管理工具进行管理，然后通过class shared暴露给父应用？
- 样式隔离
1.starts中利用qiankun的自带参数
start({
sandbox: {
// 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式不会对全局造成影响。
strictStyleIsolation: false,
// 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
experimentalStyleIsolation: true
}
})
- 公共包重复加载
TODO
未完待续！！
代码后续会上传，并给出链接~~
参考资料：
微前端究竟是什么？微前端核心技术揭秘！
