我理解的微前端

微前端就是按照业务模块分为多个子应用，通过主应用来加载这些子应用。

为什么使用？

1，不同团队间开发同一个应用技术栈不同怎么破
2，希望给个团队都可以独立开发，独立部署怎么破
3，项目中有老的应用代码怎么破

解决方案：

single-spa:
优点：实现了路由劫持和应用加载
缺点：没有处理样式隔离和js执行隔离（没有js沙箱的机制，css也不隔离），
不够灵活，不能动态加载js文件
qiankun:基于single-spa，提供了更加开箱即用的API（single-spa+sandbox+import-html-entrys）
iframe:
iframe的子应用切换路由时用户刷新页面就又回到了原有页面，8比q了
如何实现通信：
1，url传递参数，有局限性
2，基于CustomEvent实现通信（浏览器原生事件机制）
3，基于props主子应用间通信
4，使用全局变量

子应用改造：
暴露出3个接口：botstrap mount unmount
改造打包：
将子模块打包成umd模块
主应用：
注册子应用
开启应用

css样式隔离：
1，子应用之间样式隔离：动态样式表，当应用切换时移除老应用样式，切换新的应用样式
2，主应用和子应用之间的样式隔离：
·BEM（Block Element Modifier）约定项目前缀
·css-Modules:打包时生成不冲突的选择器名
·Shadow Dom 真正意义上的隔离
如何实现：

 

        
hello world
        

    
    

image.png

可能遇到的问题：将shadow DOM中的元素如果通过appendChild等方式移出，就失去了作用，如我们经常碰到的弹窗功能，就需要手动处理样式了

JS沙箱：应用的运行，从开始到结束，切换后不会影响全局
JS沙箱机制
1，快照沙箱
2, 代理沙箱

qiankun:
基座：main.js中引入qiankun，注册和开启的API
注册子应用：

const apps = [
{
name:'vueApp',
entry:'//localhost:10000' ,//默认加载这个html，解析里面的js并动态执行（子应用必须支持跨域）内部使用的fetch加载js资源的
container:'#vue-dom', //挂着的容器id
activeRule:'/vue'//激活时的路由
}，
...
]
registerMicroApps(apps)
start({prefetch:false}) //开启并取消预加载

改造子应用：
main.js
导出3个方法：
bootstrap(props) ,mount(props),unmount(props)
vue.config.js
1,允许跨域：
devServer:{
headers:{
'Access-Control-Allow-origin':'*' //cors
}
}
2,配置打包方式为umd
configureWebpack:{
output:{
library:'vueApp',
libraryTarget:'umd'// window.vueApp =
}
}