download：拉钩算法突击训练营芳园罢乐游
微前端方案调查
什么是微前端？
单个应用，在很长的时间跨度内，从一个普通的应用演变成一个巨型应用，并因参与团队的增多而变得不可维护。微前端架构就是为了解决这个应用。
多团队为现代应用开发和维护一套解决方案。这些团队可以独立开发和部署。参见microfrontens。
微前端架构具有以下核心特性:
技术无关:主框架不限制子应用使用的技术栈，子应用拥有完全的自主权。
独立开发和部署:子应用仓库，开发和部署是独立的。
微前端的基本功能
加载子应用程序
该路由监视并加载相应的子应用程序。
沟通
子应用程序之间以及子应用程序和主应用程序之间的通信。
沙箱
Js/style隔离:子应用之间以及子应用和主应用之间的样式和Js互不影响。
微前端方案
内联框架
Iframe:浏览器是原生的，从体验的角度来看几乎是最可靠的微前端解决方案。主应用程序通过iframe加载子应用程序。其自身的风格和环境隔离机制使其具有天然的沙盒机制，但其隔离性也使其不适合作为加载子应用的加载器。iframe的特性不仅会导致用户体验的下降，还会给日常研发带来更多的麻烦。
百度:EMP
基于Webpack5模块联邦的微前端解决方案。通过在cdn上加载微应用，可以动态更新微应用，微应用只需部署一次就可以提供给任何基于模块联邦的应用。每个微应用都可以引入其他微应用，无中心应用的概念。可以选择只加载微应用需要的部分。每个应用程序都可以共享状态。
单温泉
什么是导入映射？
导入映射允许控制JavaScript导入语句和Import()表达式获取哪些URL。
{
“进口”:{
" moment “:”/node _ modules/moment/src/moment . js "，
" lodash “:”/node _ modules/lodash-es/lodash . js "
}
}
从“时刻”导入时刻；
从“lodash”导入{ partition }；
//更改为下方
从“/node _ modules/moment/src/moment . js”导入力矩；
从“/node _ modules/lo dash-es/lo dash . js”导入{ partition }；
复制代码
并非所有浏览器都支持导入地图。参见caniuse.com/import-maps.可以使用SystemJS或es-module-shims来支持导入映射。
框架特征
加载子应用:single-spa是顶级路由器。当路由被激活时，它下载并执行该路由的代码。
生命周期:引导、装载、卸载、卸载
JS入口。
按需加载
注册子应用时支持懒加载。
注册应用程序({
名称:’ app1 ‘，
app:()= > import(’ src/app 1/main . js ')，//惰性加载
active when:“/app 1”，
customProps: { some: ‘value’ }
});
复制代码
沟通
道具:自定义道具
怎么用？
如何创建单spa应用程序？
创建根配置:包括一个HTML页面和一个用于注册子应用程序的js。子应用注册需要提供:HTML演示
名称:子应用程序的名称
应用:指定子应用门户
ActiveRule:确定何时触发子应用程序。
修改子应用程序门户文件以导出引导、装载和卸载挂钩。
民众
React: react.microfrontends.app
vue.microfrontends.app/rate-doggos
蚂蚁:钱坤
两个场景
单实例:同一时间只显示一个子应用，子应用的切换通常是根据URL的变化来完成的。钱坤v1.x
多个实例:可以同时呈现多个子应用程序。在这种情况下，子应用程序更像是一个业务组件，而不是应用程序。钱坤v2.x
框架特征
基于单spa包，它提供了一个更加开箱即用的API。
技术栈与此无关。任何技术栈应用都可以使用/访问，无论是React/Vue/Angular/JQuery还是其他框架。
HTML入口访问模式允许您像使用iframe一样轻松地访问微应用程序。
风格隔离保证了微应用之间的风格互不干扰。
JS沙箱，保证全局变量/事件在微应用之间不冲突。
预加载资源:在浏览器空闲时间预加载未打开的微应用资源，加快微应用的打开速度。
海插件，为Umi应用一键切换到微前端架构系统提供@ umi js/plugin-钱坤。
怎么用？
主要应用
固定
纱线添加钱坤#或npm i钱坤-S
复制代码
在主应用中注册子应用
从“钱坤”导入{ registerMicroApps，start }；
registerMicroApps([
{
名称:’ react应用’，//已注册的应用名称
条目:“//localhost:7100”，
容器:“#yourContainer”，
active rule:“/your active rule”，
}, {
名称:“vue应用程序”，
条目:{ scripts:[’//localhost:7100/main . js ']}，
容器:“#yourContainer2”，
active rule:“/your active rule 2”，
},
]);
start()；
复制代码
子应用
在子条目文件中应用导出生命周期
子应用程序需要导出引导程序，在其自己的导入文件中挂载和卸载生命周期挂钩，以便主应用程序在适当的时候调用。
导出异步函数引导(){
console . log(’ react app bootstraped ‘)；
}
导出异步函数装载(props) {
ReactDOM.render(，props.container？props . container . query selector(’ # root ‘):document . getelementbyid(’ root ‘)；
}
导出异步函数卸载(props) {
react DOM . unmountcomponentatnode(props . container？props . container . query selector(’ # root ‘):document . getelementbyid(’ root ')；
}
导出异步功能更新(props) {
console.log(‘更新道具’，道具)；
}
复制代码
子应用程序包配置
为了使主应用程序正确识别子应用程序公开的一些信息，子应用程序需要添加以下打包配置:
// webpack
const packageName = require(’。/package . JSON’)。姓名；
模块.导出= {
输出:{
库:${packageName}-[name]，
库目标:“umd”，
JSON function:webpackkjson p _ $ { package name }
}
};
复制代码
演示:http://localhost:7099/react16
字节:Garfish
框架特征
技术栈无关。
独立开发和部署
预应变
支持共享依赖
支持多个实例
支持HTML条目和JS条目
核心模块
Loader:加载html条目和js条目。
路由器:自动安装/卸载子应用程序。
沙箱:js & css隔离。
店家:沟通。
摘要
Single-spa:是纯顶级路由器，给出了实现微前端的参考解决方案，但自身并不实现这些功能，比如:style隔离/js隔离等。接入成本高。
钱坤:基于single-spa，从框架层面解决了风格隔离和js隔离的问题。同时提供预加载、应用通信等功能。对所访问的子应用程序的改变相对适中。社区活跃，解决问题速度比较快，比较稳定。总的来说是目前首选的微前端框架。
Garfish: single-spa用于路由，钱坤用于沙盒，提供插件机制扩展框架的功能。框架的基本功能也是通过插件机制实现的。实现的功能和接入成本和钱坤差不多，比较新，用的没有钱坤多。
MicroApp:基于WebComponent，实现了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。访问是最小的。MicroApp依赖于两个较新的API，CustomElements和Proxy。通过引入polyfill，不支持CustomElements的浏览器可以兼容。