视频站日志 - 01 Flutter web 从入门到放弃
2022-09-20
视频
https://www.bilibili.com/video/BV1Dg411r7W1
前言
猫哥我想开发一个视频学习站，方便会员管理和视频学习。
当初考虑是 Flutter 这个工具来多端统一，节省开发成本、其实好久不怎么写 web 有点忘记了哈。
但是呢，我在 Flutter Web 端发生了很多问题，以至于我放弃了。
本文我罗列一下我遇到的问题，希望能帮助到大家。
详情
部署打包文件过大
打包 release 后 main.dart.js 这个文件有 2M，这个文件是 Flutter Web 的入口文件，这个文件太大了，加载速度太慢了。
虽然我开启了 gzip 服务端压缩，但是还是太慢了。
文字选中
这种选中感觉不是 web 的行为，分开了，每个组件是独立断开的。
中文字体支持差
刚开始载入的中文字体都是 XXXXXX ，因为对于的中文字体文件切片没有下载完。
可以发现这些字体切片很碎很多。
而且这个字体切片放在 fonts.gstatic.com 这个域名下，这个域名被墙了，所以我这里加载不出来。
中文字渲染尖锐
大家可以肉眼可见的，英文字很圆润，但是中文字尖锐有毛边。
页面滚动 ipad 上卡顿失败
图片我随便找的，就是说明下场景，我在 ipad 上滚动页面，页面卡顿，滚动不能。
如果有嵌入设备开发的同学，还是要现在设备上测试的，不然真机上出问题，你也不知道。
视频播放器全屏后无法回原位
这个我忘记截图了，就是播放器全屏后，无法回到原位，原来的位置黑色的一块，只能刷新页面。
markdown 需要借助内嵌 html
大片的文字，我需要用 markdown 来写，但是 markdown 转 html 后显示体验不好，我只能借助 html 嵌入方式。
这样的话就是一个传统 web 了，流畅的感觉又回来了。
html view 穿透问题
如果你下面用了 html view ，上面再有其它组件，就会被穿透，这个问题我也没找到解决方案。
所以我有视图的时候，先把下面的 html view 给隐藏起来。
SEO 优化
你如果看源码可以发现就是个单页 SPA ，所以不会有每个页面的 seo 个性。
这个只能借助其它手段，渲染些静态页面来过度。
Flutter 导航与浏览器导航
Flutter 内置的导航和浏览器的导航不一样，浏览器的导航是可以回退的，而 Flutter 的导航是不可以回退的。
这个和 SPA 单页差不多。
首屏渲染时间过长
首屏非常慢，感觉这是个 app 了，不像是网页。
滚动卡顿掉帧
如果你的界面非常长，比如我的课程介绍页面，滚动的时候会掉帧，卡顿。
总结
- 以上说了很多缺点，这里再说几点适合 Flutter Web 做的：
- 活动表单页
- 业务简单的单页 SPA
- 低交互业务界面
最后劝有的同学不要用 Flutter Web 开发后台管理应用。
参考
- https://ducafecat.com
end