微前端解决方案 qiankun？JS沙箱的原理？样式隔离的原理？

1. qiankun 是基于 single-spa 封装的，提供了更加开箱即用的 API，使得微应用的接入像使用 iframe 一样简单，实现把应用改造的工作量降到最低。并且主应用和微应用都是技术栈无关的，解决了开发中的两个问题：第一是空间上不同团队的协同开发不必统一技术栈，第二是时间上不同版本技术栈的升级维护无需统一。因此技术栈无关是微前端的核心价值。
2. JS 沙箱：

• 快照沙箱(snapshotSandbox)：在应用沙箱挂载和卸载的时候记录快照，在应用切换的时候依据快照恢复环境。qiankun 的快照沙箱是基于 diff 来实现的，主要用于不支持 window.Proxy 的低版本浏览器，而且也只适合单个实例的子应用，且会污染全局 window。

• 代理沙箱(proxySandbox)

  ：qiankun 基于 es6 的

  Proxy
  

  实现了两种应用场景不同的沙箱，一种是

  legacySandbox
  

  (单例)，一种是

  proxySandbox
  

  (多例)。因为都是基于 Proxy 实现的，所以都称为代理沙箱。

  • 单例沙箱(legacySandbox)：同样会对 window 造成污染，但是性能比快照沙箱好，不用遍历 window 对象。
  • 多例沙箱(proxySandbox)：不会污染全局 window 并支持多个子应用同时加载。

1. 样式隔离：微前端框架里面可能会遇到的样式冲突有两种，一种是主子应用样式冲突，另一种是子应用之间的应用冲突。

• 动态样式表(Dynamic Stylesheet)：qiankun 自动实现子应用切换时子应用样式动态切换，能够保证你在单应用模式下（就是同时只能有一个应用活跃的情况下）保证子应用和子应用之间的样式不会冲突。
• 工程化手段(css module)：可以通过手动的方式确保主应用与微应用之间的样式隔离，比如给主应用的所有样式添加一个前缀（或者使用库）；也可以通过配置 { sandbox : { experimentalStyleIsolation: true } } 的方式开启运行时的 scoped css 功能，从而解决应用间的样式隔离问题。
• 严格样式隔离(Shadow DOM)：默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。（但是使用时还是要适配和考虑特殊情况）