Yakima-Teng / iframe-application

Just some small demos, shown in html iframe tag

Home Page:https://yakima-teng.github.io/iframe-application/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 作者博客上看到的效果。

不重复的颜色

粒子效果

About

Just some small demos, shown in html iframe tag

https://yakima-teng.github.io/iframe-application/

License:MIT License


Languages

Language:HTML 62.9%Language:JavaScript 23.3%Language:Less 13.8%