微前端

组织应用规模的解决方案，将应用相互拆分独立，使得开发者不会干涉其他应用。

微应用

• 所有普通的 spa

微前端框架的必备特性

• 注册微应用

  • 先给每个微应用设置初始状态
  • 重写监听器注册函数
  • 重写用户导航的会话记录状态
  • 重定向路由
    • 获取微应用的状态
    • 执行卸载，加载，安装微应用

• 资源加载: 加载微应用代码

  • html 入口访问：通过import-entry-html获取页面源码字符串；
  • js 入口访问：当作 ES 模块来使用；

• 环境隔离(沙盒)：执行代码css,js

  • iframe
  • ShadowDOM
  • 快照沙箱
  • 代理沙箱

• 应用内通信

  • 首先原则是：保持微前端解耦

涉及到的技术

• Web Component
  • Shadow DOM
  • CustomEvent
• JS SandBox
  • Proxy
  • 通过给执行的 js 包一层with(global){}实现
  • iframe实现
  • 根据当前微应用，生成一份window状态,离开后还原指定微应用状态实现
• 样式隔离
  • 通过添加选择器实现
  • 通过切换样式删除，添加实现
• 元素隔离
• 预加载
• 多框架兼容
• 应用间通信
• 渲染原理
• 资源地址补全
• 插件系统
• 数据通信

沙箱

• 浏览器沙箱
• js 沙箱