微前端

• 为什么选择微前端，
• 微前端的缺点（微前端性能一定就要比spa好吗），
• 微前端业务遇到哪些问题怎么解决
• 沙箱的作用（这里没答好）
• 样式污染怎么解决。
• 因为采用的框架是qiankun，问了还有哪些方案以及优劣。

1. 为什么选择微前端

• 多技术栈
• 大型应用，模块重复
• 提升业务内聚度（加上monorepo可以做到原子化的commit提交，而不必打开多个编辑区）

higgs的优势：

• 不限制子应用技术栈
  • 单独管理包，可以使用不同的依赖
• 基于es6的proxy的js沙箱
• 基于发布订阅模式的全局通信
• css样式隔离，给子应用增加前缀
• 支持插件系统，注入一些全局变量和错误修复

基于microApp，提供了

• 依赖管理，可共享可独立
• 完善的路由共享，可以与uac鉴权相结合
• 完善的通信机制
• 使用microApp的js沙箱和样式隔离机制

3. 微前端的缺点和性能问题

• 一个包会多次加载，并且版本不一致，导致首屏时间加长
  • 使用webpack5的模块邦联模式，抽离公共依赖，建立公共模块，统一使用。
• 切换子应用有白屏如何解决？
  • 将公共模块从基座应用中读取，减少Bundle的体积
  • 子应用根节点加loading，等待Bundle完成后，再将真实节点挂在window下。

4. 沙箱机制的作用

• js作用域隔离，防止不同子应用之间的 JS 变量污染
• Proxy实现的沙箱机制

5. 样式污染怎么解决?

• 给子应用的样式增加前缀

6. 页面刚打开的时候刷重复请求

微前端面经

• iframe通信机制

  • postmessage

• 沙箱的原理？

  • iframe
    • 隔离的比较好，但是通信比较困难
  • 非iframe
    • JS沙箱：（JS 执行上下文和本地存储：通过全局快照或代理的方式，保存和恢复在应用获得控制权前后的全局状态）
      • window对象的快照，记录
      • 使用proxy对象代理
    • CSS沙箱
      • higgs，css全局增加前缀
      • shadow dom

• 子应用的通信机制？

  • window全局对象通信
  • postMessage通信

• 在做微前端的时候有没有遇到子应用样式冲突的问题？怎么隔离的？

  • css module：webpack会编译成哈希。
  • 根据应用，约定式命名
  • css in js
  • qiankun的方案：Shadow Dom

• 你说用了 WebSocket 实时推送，如果同时开多个标签页会收到多次推送吗？怎么做的优化

7. 在微前端架构下，主应用和子应用之间如果都维护用户状态，怎么避免状态不一致的问题

   • 单一数据源
   • 订阅发布模式：zustand、redux
   • 全局状态：window对象注入

8. 微前端中一个子应用报错或者白屏了，你这边是怎么处理的

   • 全局监听错误：window.error
   • 生命周期钩子监控、错误日志上报
   • 用户体验兜底降级：
     • 错误组件：“网络开小差了，请刷新重试”

9. 如果多个子应用依赖了不同版本的 Echarts、AntD，你怎么避免冲突？

   • 单独打包
   • JS沙盒：基于proxy的window代理对象
   • webpack5 模块联邦
     • 一个应用在运行时加载另一个应用。会自动判断依赖兼容性问题。

10. 你们有没有做过主子应用通信？用的是什么方式？有哪些坑？

    • 用的微前端框架，自带global状态管理。
      • 坑：他的set方法是浅合并，如果需要修改深层属性，需要创建一个新的对象。
    • url通信：太长了无法传，而且部分字段和特殊字符容易出现非预期；
    • url + sessionStorge，url传key，通过key在sessionStorge中取具体的值；

11. 那你们主应用是怎么动态切换子应用版本的？有没有做过灰度发布？

12. 模块联邦怎么实现的？

    • 原理：引用一个在线的模块；分为主应用和远程应用（被加载的应用）。
      • 一般用的是webpack5的插件。ModuleFederationPlugin。
    • 步骤：
      • host应用配置的时候会有一个模块清单（或者类似的文件）
      • 通过路径前缀区分，对子应用的路径的访问会转发到各自的子应用的端口，后面的由子应用自己的路由接管

13. 共享路由、路由分发是如何做的？路由冲突怎么解决？

    • 原理：多数情况下，通过增加路径前缀的方案来区分不同的子应用，区分之后，让子应用自己的路由来接管。
      • 复杂一点的：内存路由方案，子应用不再跟url交互，而是通过事件总线来通知子应用变更。
      • 组件化方案，不再当成完整应用，全部在主应用中当成模块集成

14. 样式隔离用什么方案？

    • 一般会优先考虑css module和css in js，我这个项目使用的是css module。

Webpack

• Webpack 的 Tree Shaking 是如何工作的？

• tree-shaking 原理是什么？

  • es6的模块的静态的，就是做静态分析，确定 ESM 模块中哪些导出值未曾其他模块使用，分析程序可达到的代码，消除无用代码。

• 如何确保tree-shaking生效？

  • 符合es6模块规范
  • 开启optimization.usedExports，启动标记功能
  • 启动代码优化
    • 开启production模式
    • 提供 optimization.minimizer 数组
  • 删除或者标记副作用（不要用立即执行函数），合理设置 sideEffects

• 使用lodash-es替代lodash，用dayjs代替moment

webpack有哪些优化方案？

• CDN引入
• 使用lodash-es替代lodash，用dayjs代替moment
• 分包，微前端
• tree，shaking