2022了，来体验下 flutter web

前言

flutter从 17年推出，18年12月开始发布 1.0 版本，2021年3月发布 2.0 增加了对桌面和 web 应用的支持。
最大特点是基于skia实现自绘引擎，使用dart语言开发，既支持JIT(just in time: 即时编译)又支持AOT(ahead of time: 提前编译)，开发阶段使用JIT模式提高时效性，同时在发布阶段使用AOT模式提高编译性能。
作为前端的话，还是更关注flutter web的支持情况。为了体验flutter web，特意用flutter写了个小游戏来看编译后的代码在web上运行如何。

开始之前

早在3年前的 19年初 1.0 出来没多久的时候就尝试用flutter来写一些常见的菜单注册登录等页面demo来，那时候flutter的生态还在发展中，除了官方提供的一些解决方案，三方的一些包很多都不成体系，应用范围较小，由于当时是抱着前端的固有思路来尝鲜flutter，flutter 刚发展起来，轮子远没有那么多，发现写起来远没有Vue、React 这类生态成熟的框架写起来舒服，除了 widget 组件多，写起UI来可以直接看文档写完很方便外，网络请求，路由管理、状态管理（这些像vue有axios/vue-router/vuex）用官方的方法写起来相当麻烦（也可能是我不会用，对新手不友好），维护起来就更麻烦了。

过去3年了，再看flutter，2.0版本发布也快一年了，当再次想用flutter写个demo的时候，发现了社区已经出现了一些经过几年发展的provider、getx之类的状态管理框架，能帮助新手快速入门，用了 getx 感觉是个脚手架，又不仅仅是脚手架，简直是大而全的轮子，状态管理、路由管理一应俱全，生成的目录结构清晰，你只需要去填充 UI 和处理数据。用法也很简单，对新手很友好。

flutter + getx 写一个小游戏

既然选好了那就用 getx 生成项目目录，开始开发，选用了一个很常见的小游戏：数字华容道，功能也简单。项目地址

项目可以打包成原生应用，也可以打包成 web 应用

数字华容道web版

flutter web 渲染模式

不同的渲染器在不同场景下各有优势，因此 Flutter 同时支持以下两种渲染模式:

HTML 渲染器: 结合了 HTML 元素、CSS、Canvas 和 SVG。该渲染模式的下载文件体积较小。
CanvasKit 渲染器: 渲染效果与 Flutter 移动和桌面端完全一致，性能更好，widget 密度更高，但增加了约 2MB 的下载文件体积。
为了针对每个设备的特性优化您的 Flutter web 应用，渲染模式默认设置为自动。这意味着您的应用将在移动浏览器上使用 HTML 渲染器运行，在桌面浏览器上使用 CanvasKit 渲染器运行。官方文档

使用 HTML 渲染

flutter run -d chrome --web-renderer html

使用 HTML，CSS，Canvas 和 SVG 元素来渲染，应用的大小相对较小，元素数量多，请求都是http2

元素如下

请求如下

使用 CanvasKit 渲染

CanvasKit 是以 WASM 为编译目标的Web平台图形绘制接口，其目标是将 Skia 的图形 API 导出到 Web 平台。

flutter run -d chrome --web-renderer canvaskit

默认 CanvasKit 渲染，元素数量比html少很多，就是需要请求 canvaskit.wasm，该文件大小7MB左右、默认在 unpkg.com 国内加载速度慢，可以将文件放到国内 cdn 以提升请求效率