前言
接觸Flutter開發的時間並不長，最早關注到Flutter，就是聽說它可以跨端開發iOS，Android，Web端。直到上週看了Flutter2.0的釋出，才知道，原來跨web端才剛剛stable呀...
那我們來真實的體驗一下，Flutter釋出web應用究竟靠不靠譜？
開啟web端構建
使用下面這個命令才可以開啟Web端構建的支援
flutter config --enable-web
複製程式碼開啟後我們再次輸入flutter config可以看到
建立新專案
這樣每次新建Flutter專案時，都是支援web端構建的，會預設多出一個構建配置目錄web。
即使某個專案不需要支援web端構建也無須去特意關掉這個支援，不使用構建web的命令即可
舊專案開啟web支援
其實就是對當前專案重新配置一下
flutter create .
複製程式碼除錯web端
在沒有其他端環境可用的情況下，使用以下命令會直接編譯web端並開啟chrome進行除錯
flutter run
複製程式碼編譯發行Web端
Flutter在構建web端應用時，可以選擇兩種渲染模式。下面給大家演示下，大家注意仔細看看截圖中我標記了紅框的部分。
HTML渲染模式
flutter build web --web-renderer html
複製程式碼當我們採用html渲染模式時，flutter會採用HTML的custom element，CSS，Canvas和SVG來渲染UI元素
優點：
- 應用體積更小
缺點：
- 渲染效能差
- 跨端一致性可能受影響
CanvasKit渲染模式
flutter build web --web-renderer canvaskit
複製程式碼當我們採用canvaskit渲染模式時，flutter將 Skia 編譯成 WebAssembly 格式，並使用 WebGL 渲染。應用在移動和桌面端保持一致，有更好的效能，以及降低不同瀏覽器渲染效果不一致的風險。但是應用的大小會增加大約 2MB。
優點：
- 畫素級跨端一致性
- 更好的渲染效能
缺點：
- 應用體積變大，需要載入一個2.5MB的
webaseembly格式的程式碼
還有一個auto的渲染模式（預設），會自動根據是執行在移動瀏覽器端還是桌面瀏覽器端來選擇渲染模式
結論
隨著Flutter2.0的釋出，這個帶著【全平臺畫素級跨端一致性的】框架會更加倍受關注。雖然Web端的編譯結果無論哪種渲染方式暫時在國內的web體驗標準下都還差點意思，但是真的很值得期待。
關注我
一個設計師出身，但熱愛程式設計的老程式猿
近期文章（感謝掘友的鼓勵與支援???）