前言

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 以提升請求效率

元素如下

請求如下

小結

flutter web 通過編譯成瀏覽器可執行的程式碼，經實踐來看，效能還是有些問題，不過如果是單單想要寫SPA，那恐怕還是js首選。目前來說flutter的生態經過幾年的發展已經有了很多開源輪子，但要說穩定性還無法擊敗js，要不要用 flutter web 就要根據實際需求來決定了。