FlutterWeb最近开启了正式之路
FlutterWeb实现原理基本上和移动应用一个道理，默认情况下都是使用的调用Canvaskit+skia引擎调用WebGL实现绘制。也可以使用html+css+canvas进行渲染，这样少了Skia引擎，会让包大小少2mb左右，不过展示的样式可能就是根据浏览器默认渲染的方式进行了，差别还是蛮大的。
1、使用默认Canvaskit渲染方式，并不会优先使用系统默认的字体(我至今也想不通为啥)，会导致打开网页长时间乱码。解决方式是自定义字体或者按照html渲染方式解决。官方目前还没有什么有效的解决方式，问题在这里github.com/flutter/flu…
出现问题的主要原因是，自绘引擎需要字体库支持，FlutterWeb 默认会使用Noto字体，因为一般电脑上都不会带有这个字体，所以会在线寻找这个字体，比如google或者一些第三方字体库网站，导致加载缓慢和乱码。将字体放到本地资源库，比如将Noto字体作为默认字体一起打包到web网站上，下载速度就快了很多,你也可以换一些自己的字体(注意版权问题)，不会出现乱码情况。坏处就是还是会增加一些流量负担，打开网站的话会比较慢，要等待默认字体加载完成才会渲染网页。
flutter:
fonts:
- family: Noto
fonts:
- asset: fonts/NotoSansSC-Bold.otf
- asset: fonts/NotoSansSC-Medium.otf
- asset: fonts/NotoSansSC-Regular.otf
style: normal
其实ttf和otf等字体已经支持自适应宽度了，所以为了追求速度可以直接放入一个宽度的字体就行了，如”NotoSansSC-Regular.otf“就行。 试了一下发现它的单个字体大小仍然很大，达到了8Mb。因为汉语字实在是太多了，所以我们可以考虑精简我们的字体，将汉语中的常用的文字拿出来，然后重新打包成精简字体包，这个方法在很多客户端应用中也都有用到。可以看一下下面的教程，我提取出来3500字的一级字表，从8mb减少到了800kb，相应的传输速度也快了很多。
常用3500字，常用6500字
通过 fontTools 精简字体
2、应用加载体积过大，我们大概做了十几个页面吧，打包下来最后会生成main.dart.js文件，搞下来已经7mb了，不知道最后的release最后会是多少，反正不会太小，而且没办法拆分，意思就是你打开这个网站就等于加载了几乎整个应用渲染逻辑！更意味着打开网站下载js->执行js->渲染js，是你不得不面对的三道速度墙！记得如果你真的要用它，放到生产环境时候要给nginx或者其他方式实现brotli或者gzip压缩来减少传输时间！当然官方现在也没有很好的解决办法来如何拆分它！github.com/flutter/flu…
CanvasKit方式渲染会在线下载两个跟Skia引擎相关的文件canvaskit.js和canvaskit.wasm，后者直接达到了6Mb多，真的是服了。在线下载的地址是unpkg.com/browse/canv… (有多个版本，查看自己所要的就行了)，我这里压缩测试的大小2mb+，下载速度大概是200kb/s左右。如果你不差钱，嫌下载速度太慢，可以将两个文件下载下来放到国内云或者cdn上。具体的操作如下，打包命令后面添加参数
flutter build web --web-renderer canvaskit --release --dart-define=FLUTTER_WEB_CANVASKIT_URL="https://xxx.com/"
注意，网址一定要是包含包含了canvaskit.js和canvaskit.wasm这两个文件的父目录哦！打包生成后可以到main.dart.js文件中找到你替换的地址，看看对不对。
还有一个加载体验优化,编译后会生成"index.html+main.dart.js"，因为网站默认会直接加载index.html文件,在html文件中直接写入CSS3的Loading动画，所以我们在加载js文件的同时，直接展示它避免初始化白屏的烦恼。是个小技巧哈！也可以放入下面这张图给用户哈哈！
3、因为FlutterWeb是自绘引擎，默认是不支持文字选中和复制了，如果你需要文字选中和复制需要使用SelectableText ，从体验上来讲，还是有那么不太舒服哦，跟原生Web标准还是差很多。如果你的网页需要允许用户进行大量的复制操作，请谨慎尝试。
4、如果你的网页需要提高标签值被爬的难度，那么它可能是比较好的一个办法，一堆js等着别人去解析吧。
5、如果你是传统的App开发者，那么你就需要学习一些浏览器特性来对浏览器平台进行特定的处理。
1、对路由进行操作，如用户点击刷新、返回、多窗口等等是需要注意的点，通过Navigator2来进行编写，后续会花点时间进行单独写出来。2、跨域安全问题。3、储存加密安全(App都不能保证绝对安全，浏览器就更不能把什么对称密钥放到本地了)。
出现的问题和建议待续….
根据上面的信息，我大概确定的是它目前定位基本上和nativeApp一个级别的WebApp，也可以直接生成webApp应用给浏览器保留，所以他不合适用来做很多传统的WebPage应用了。虽然现在已经迈入5G时代，但是你让一个用户一进来就打开一个5mb左右的页面，还不包括图片和内容等，感觉还是有点得不偿失。倘若你要做的项目是统一UI平台，那么也可以试试。
2023-12-21 我非常不建议大家在公司项目或者生产项目使用Flutter web，dart->js就是一坨shit，指不定一堆bug,查的你怀疑人生。
