前言
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 應用
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 以提升請求效率
元素如下
請求如下
小結
flutter web 通過編譯成瀏覽器可運行的代碼，經實踐來看，性能還是有些問題，不過如果是單單想要寫SPA，那恐怕還是js首選。目前來說flutter的生態經過幾年的發展已經有了很多開源輪子，但要說穩定性還無法擊敗js，要不要用 flutter web 就要根據實際需求來決定了。