提起微前端,好多人就要开始贬低 iframe 方案了。但是在我看来,那些问题都是可以有解决方案的,而且有些我觉得根本不是问题。
- 比如子应用的 URL 可以直接反应到主应用 URL 上,就不存在刷新就丢失子应用路由状态的问题了。
- 比如说加载子应用会先有空白的问题,其实你就算是 SPA 应用,切换路由也会有类似问题。现在各个子应用大多都是类似 SPA 的应用,入口 html 文件大小只有 2~3 kb,不过就是一个接口的请求数据量,而且我们还可以尝试预加载等方案去抹掉这个时间。
- 比如说 iframe 方案父子应用或者多个子应用之间互相通信麻烦的。其实可以把微前端方案类比成混合 APP (Hybrid APP)。在混合 APP 例,JS 和原生客户端之间会通过 JS bridge 进行通信。现有的不管哪种主流微前端方案,都是会存在一层父子应用的通信接口的,不然想想都不可能搞起来。
iframe 在微前端方面,有 2 个实现太过耀眼的特性:
- 天然的 JS、CSS 隔离。
- 子应用可以以极低的成本(甚至是 0 成本)接入主应用。
鉴于以上种种,打算基于 iframe 元素实现一套微前端方案的应用场景,来证实其可行性。不喜欢阿里的乾坤那一套,感觉弄复杂了,简单的东西坑才会比较少。实现方案应该会参考腾讯的无界。
目前微前端方案还没做,可以把这个重启的老仓库看成是不同 DEMO 的集中展示入口。
本项目使用 Node v18.18.0,本地直接执行 npm run dev
即可运行项目。
- 浏览器对单个 DIV 元素的最大高度是有限制的,否则按我们这个方案十亿条数据都可以流畅加载。
canvas 图片压缩的方案有 2 种:
- 如果图片长宽相乘得到的像素非常大,超过 100 万,则将其按一定比例打碎并成多个瓦片 canvas,再将这些瓦片 canvas 的内容集中绘制到主 canvas 上。本质是对像素点进行采样和丢弃。
- 使用
canvas.toDataURL('image/jpeg', 0.1)
。
这是一个之前在 Vue 作者博客上看到的效果。