微前端

什么是微前端

微前端是一种将前端应用拆分成更小、更独立的部分，以便于团队协作和维护的架构模式，每个微应用都可以独立开发，测试，部署和运行。

方案选型

qiankun

原理

实现

现在使用 vue3、vite、qiankun 来实现微前端，但貌似 qiankun 不支持 vite。

因为 vite 的模块加载方式是 esm，而 qiankun 并不支持 module script 标签内解析 esm 格式的代码，导致子应用无法正确加载。

所以需要使用到 vite-plugin-qiankun （目前仓库只读）

Why not iframe

为什么不使用 iframe 的问题是经常被讨论的。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js隔离这类问题都能解决。

但他最大问题在于他的隔离性无法被突破，导致应用间的上下文无法被共享，会带来开发体验、产品体验的问题。

URL与路由不同步：浏览器提供刷新或前进/后退操作可能导致 iframe 的路由状态丢失，需要通过 history.replaceState 手动同步URL。
UI不一致性：iframe 内弹窗或遮罩层难以与主应用UI协调一致。
上下文完全隔离导致共享困难：
- 通讯繁琐：需要依赖 window.postMessage 实现跨域通信.
- 状态同步问题：主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
- 内存冗余：每个 iframe 需要独立加载资源，增加内存消耗