microApp

1.使用vite开启iframe沙箱（默认with沙箱）

2.micro-app标签可以配置很多属性的

问题：

有时候加载css资源在某些场景下会被拦截，比如关闭样式隔离和沙箱时还有一些特定的场景，

解决方案：在每个子应用src目录下创建名称为public-path.js文件，判断是否在微前端环境下，

是的话就给它设定一个公共的路径，在子应用的入口文件引入

子应用拆分

艺龙云平台以前就叫拓建系统，只是拓建系统后面挂载了好多外部的系统，那些系统都可以在拓建系统进行登陆，拓建系统自身也包含了几个系统。所以微前端要做实际就是把艺龙云平台当作是一个基座主应用，把外部的系统都挂载在上面，然后就是对拓建系统做一个拆分，

拆分成了质检系统、e客房（和主应用）、权限申请等系统。

2.还有一些外部的系统其实负责那些系统的人人家也不愿意配合我们改，如果你要切换很丝滑的话子应用也需要加很多配置的，

所以我们打开外部的系统的话都是额外地打开另一个页面。

优化：

资源共享：方式（1）在globalAssets里面添加一些js、css文件（会有问题），

（2）把常用的js、css文件放在基座应用中，在js、css标签里面加global属性

预加载：主应用调用prefetch方法传入一个对象数组，对象里面可以配置子应用预加载的方式的

缓存组件：micro-app标签添加keep-alive属性（micro-app不会记录页面滚动位置，应用再次渲染时也不会进行恢复，需要开发者进行记录和恢复）（beforeShow,afterShow更新数据）

小问题汇总

1.样式问题，测试环境子应用样式和本地开发时候不一致，先在浏览器改，再把修改后的代码挪到本地，改到合适为止。其实都是一些小的问题。

2.vue2子应用白屏问题

我们在主应用预加载设的level是3，3代表的它预加载完成后还要执行代码并在后台渲染，反正在vue2的项目中就经常有白屏的现象，

vue2的项目可能也比较大，官方文档也没有说明，我们排查了挺久才发现是预加载level问题

要注意的问题

定义一些其它应用会使用到的变量的时候，不能随便去改，要注明哪些系统可能会用到，改之前要

找相应的人沟通

元素隔离原理，重写document的原型对象， getCurrentAppName()为空则是子应用。

js隔离原理

为什么要做隔离呢，一个是变量冲突，子应用的全局变量会覆盖父应用的全局变量，子应用有一些全局监听卸载子应用后监听没有卸载

主要是利用了强大的 Proxy

get 拦截器主要做的事情是

如果代理对象中存在该属性，直接返回代理对象的属性

代理对象不存在该属性时，从原生的 windows 对象中返回。但是需要检查一下属性是否是构造函数，如果是构造函数，还需要给函数绑定 window 对象，例如 console，alert 属性。

set 拦截器主要做的事情是

当沙箱处于 active 状态才会处理

使用 injectedKeys 将 key 记录下来，方便子应用在频繁切换应用时恢复现场。