最近用 Flutter web 做了个个人项目的网页，发现了一些问题
网站是 rss.nubestour.com 可以体验下 Flutter web 的效果如何。
首先说下使用的版本
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.5, on macOS 13.6.6 22G630 darwin-x64, locale en-CN)
...
Chrome - develop for the web
...
1. 首次加载的文件过大
打包完之后的文件:
drwxr-xr-x 6 ubuntu ubuntu 4.0K Jun 20 18:04 assets
drwxr-xr-x 3 ubuntu ubuntu 4.0K Jun 6 13:35 canvaskit
-rw-rw-r-- 1 ubuntu ubuntu 5.2K Jun 8 16:01 favicon.ico
-rw-r--r-- 1 ubuntu ubuntu 917 Jun 6 12:41 favicon.png
-rw-r--r-- 1 ubuntu ubuntu 3.8K Mar 27 14:00 flutter.js
-rw-r--r-- 1 ubuntu ubuntu 8.1K Jun 20 18:02 flutter_service_worker.js
drwxr-xr-x 2 ubuntu ubuntu 4.0K Jun 20 18:04 icons
-rw-r--r-- 1 ubuntu ubuntu 5.2K Jun 20 18:02 index.html
-rw-r--r-- 1 ubuntu ubuntu 3.9M Jun 20 18:02 main.dart.js
-rw-r--r-- 1 ubuntu ubuntu 790 Jun 8 16:04 manifest.json
-rw-r--r-- 1 ubuntu ubuntu 76 Jun 20 18:02 version.json
可以看到 main.dart.js 大小是 3.9M ，对首次加载时间影响非常大（后续缓存之后加载时间就降下来了）。
2. 兼容性问题
只在我的电脑和手机上测试部分浏览器的兼容性：
- Chrome(126.0.6478.62) 完美运行
- Safari(16.6 (18615.3.12.11.2)) 无法运行
- 小米默认浏览器 可以运行，详情页滑动卡顿
- 手机Chrome(125.0.6422.165) 完美运行
- 手机Firefox(126.0.1) 可以运行，详情页滑动卡顿（存在浏览器卡死黑屏的情况，谷歌是不是你又在针对Firefox？？¬‿¬）
3. 中文字体的显示问题
中文或者说非英文体系下的文字都会在第一时间显示成 '口' ，然后再过了一段时间（大概几百毫秒）然后才开始正常显示。带来的后果就是第一眼给用户展示的就是满屏的口口口乱码。
当然这个可以通过自定义字体来解决，但是中文的字体都是 x MB 向上的，又会影响首次加载时间。
完
上面就是我对于 Flutter web 首次使用的一些吐槽。
