微前端解决什么问题?qiankun 的 JS 沙箱和样式隔离怎样实现?为什么不直接用 iframe?
先理解原理和示例,再练习完整口述与追问。
回答要点
微前端让多个团队独立开发、部署不同技术栈的子应用,并组合成一个产品,适合大型后台和遗留系统渐进迁移。qiankun 基于 single-spa,用 HTML Entry 加载子应用,通过 Proxy 沙箱隔离全局变量,通过 Shadow DOM 或选择器前缀隔离样式。iframe 隔离最彻底,但 URL 同步、弹窗遮罩、通信、性能和 SEO 体验差。
原理拆解
子应用导出 bootstrap、mount、unmount 生命周期,主应用根据路由激活。HTML Entry 下载子应用的 HTML,解析出脚本与样式并在沙箱中执行。JS 沙箱:Proxy 沙箱为每个子应用创建假的 window,写入只落在假对象上,读取时先查假对象再回退到真实 window,因此多个子应用可同时运行;快照沙箱在不支持 Proxy 时激活前保存 window、卸载时恢复,只支持单实例。
样式隔离:strictStyleIsolation 把子应用放进 Shadow DOM,隔离彻底,但弹窗挂到 body 时样式丢失;experimentalStyleIsolation 给子应用样式加 div[data-qiankun="app"] 前缀。另有 Module Federation 在构建层共享模块,Wujie 用 iframe 承载 JS、Web Component 承载 DOM 的混合方案。
示例与推演
主应用负责登录、菜单与权限,通过 initGlobalState 或自定义事件总线向子应用下发用户信息;公共依赖(Vue、组件库)可外置共享,但版本必须统一。子应用访问 window.addEventListener 注册的监听需要在 unmount 时清理,否则切换应用后仍会触发。
易错点
微前端带来部署、依赖版本、公共样式、通信和性能等额外复杂度,团队规模小、技术栈统一时不值得引入;子应用的资源路径需要设置 publicPath,否则会从主应用域名加载。
参考回答可直接练习口述
微前端主要解决多团队独立开发部署、技术栈不同和遗留系统渐进迁移的问题。qiankun 在 single-spa 基础上用 HTML Entry 加载子应用,JS 隔离用 Proxy 给每个子应用一个假的 window,写入不污染全局;样式隔离可以用 Shadow DOM 或给选择器加前缀。iframe 隔离最彻底,但 URL 同步、弹窗遮罩、通信和加载性能都很难处理。小团队、统一技术栈时我不会引入微前端,成本大于收益。