iframe 微前端应用实例

📌项目描述

提起微前端，好多人就要开始贬低 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 即可运行项目。

📌非样式类 DEMO

流畅加载一百万条数据

• 浏览器对单个 DIV 元素的最大高度是有限制的，否则按我们这个方案十亿条数据都可以流畅加载。

猜字母游戏

图片压缩

canvas 图片压缩的方案有 2 种：

• 如果图片长宽相乘得到的像素非常大，超过 100 万，则将其按一定比例打碎并成多个瓦片 canvas，再将这些瓦片 canvas 的内容集中绘制到主 canvas 上。本质是对像素点进行采样和丢弃。
• 使用 canvas.toDataURL('image/jpeg', 0.1)。

📌样式类 DEMO

彩色条纹

这是一个之前在 Vue 作者博客上看到的效果。

不重复的颜色

粒子效果