【文章內容使用 Gemini 2.5 Flash 自動翻譯產生】
原文：https://flutter.dev/blog/try-flutter-web-with-webassembly-week
好的，這是一篇關於「嘗試使用 WebAssembly 的 Flutter Web 週」的繁體中文 Markdown 文章：
嘗試使用 WebAssembly 的 Flutter Web 週
立即選擇 Wasm 編譯，將網頁效能提升 2 到 5 倍
Flutter 讓您可以使用單一程式碼庫建立富有表現力的多平台應用程式。無論您是要建立儀表板、團隊工具還是完整的網頁應用程式，Flutter Web 都能讓您將應用程式帶到任何瀏覽器。
從 8 月 17 日到 8 月 21 日，我們將舉辦嘗試使用 WebAssembly 的 Flutter Web 週！本週，Dart 和 Flutter 工程師將即時處理收到的問題，以幫助解決遷移障礙，我們的開發人員關係團隊將在社群管道上分享您的勝利。
Flutter Web 中的 WebAssembly
我們在 2024 年 5 月的 Flutter 3.22 中透過將 Dart 編譯器與 WebAssembly 垃圾回收 (WasmGC) 搭配使用，穩定支援了 WebAssembly (Wasm)。
從那時起，Wasm 編譯已在實際應用程式中證明了自己。例如，Dart DevTools (dartdevtools) – 一個複雜、高度互動的 Flutter 網頁應用程式 – 自 2024 年底以來預設使用 WebAssembly 交付。今天，超過 97% 的開發人員使用 DevTools 都在 Wasm 上運行它，受益於流暢的 UI 檢查、快速載入和堅如磐石的穩定性。
Wasm 編譯已經過實戰考驗，隨時可用於生產環境。事實上，我們的分析顯示，超過 58% 的現有 Flutter 網頁應用程式今天無需任何程式碼更改即可編譯為 WebAssembly。
當您編譯到 WebAssembly 時，您的應用程式將受益於編譯器加速 (dart2wasm) 和多執行緒渲染 (skwasm)：
- ⚡ 幀時間加快高達 2 倍，並維持 60 FPS：在 JavaScript 幀數下降到約 30 FPS（總幀時間 34.5 毫秒）的繁重 Widget 樹攪動情況下，Wasm 仍能維持流暢的 60 FPS 交付（總幀時間 17.4 毫秒）。
- ⚡ Widget 構建和執行速度加快高達 2.5 倍：原生 WasmGC 結構加速了複雜的 UI 邏輯和狀態更新，將 Widget 構建時間從 29.3 毫秒縮短到 11.4 毫秒。
- ⚡ 多執行緒背景柵格化：Skwasm 將畫布柵格化卸載到專用的 Web Worker，使主瀏覽器執行緒保持空閒以實現響應式 UI 互動。
- 🎯 幀一致性提高 3 倍以上：將幀抖動從 ±1.5 毫秒減少到 ±0.5 毫秒，消除了垃圾回收暫停。
- 📦 最小的打包大小變化：壓縮後透過網路傳輸的應用程式總打包大小不會超過 5%。
自己試試看！您可以使用我們的互動式演示在 flutter-wasm-compare.web.app (原始碼) 上測試和比較您自己的硬體效能。
上述基準指標是在 Google Chrome 151 (151.0.7922.109) 上，於 Apple M4 Pro MacBook Pro (48 GB, macOS Sequoia 15.7.7) 上，在 60 Hz 顯示器更新率上限下，在中等壓力（200 個動畫攪動節點）下測量的。
為什麼 JavaScript 仍然是預設的編譯目標
如果 Wasm 提供更好的速度和穩定性，為什麼 flutter build web 仍然預設為 JavaScript (dart2js)？
為數百萬開發人員更改預設編譯器是一項重大舉動。雖然超過一半的 Flutter 網頁應用程式開箱即用 Wasm 構建，但一些 pub.dev 套件仍然依賴於需要更新以實現 Wasm 相容性的舊版 JavaScript 互操作 (dart:html 或 dart:js)。
這造成了一個典型的雞生蛋蛋生雞的困境：
- 在更多生態系統套件更新其 JS 互操作程式碼之前，我們不能將
--wasm作為預設值。 - 套件作者通常不會優先更新，直到開發人員選擇 Wasm 並請求 Wasm 支援。
WebAssembly 遷移資源
為了幫助您遷移，我們更新了網頁文件。在建置之前，請查看以下指南：
- Flutter Web 上的 WebAssembly：了解如何設定伺服器標頭（
COEP: credentialless和COOP: same-origin）、偵錯生產建置以及在運行時偵測 Wasm 支援。 - 遷移到
package:web和現代 JS 互操作：擺脫dart:html和dart:js是 Wasm 相容性的關鍵。本指南說明如何遷移到package:web和dart:js_interop。 - 網頁建置和部署指南：尋找發行建置、原始碼地圖、Firebase Hosting 和 CDN 快取。
- Flutter 網頁技術常見問題：獲取有關 Web Worker、Service Worker 和條件導入的答案。
本週嘗試 WebAssembly
無論您是維護 pub.dev 套件、管理生產網頁應用程式還是建置副專案，本週都請使用 WebAssembly 測試您的程式碼！
開始使用
- 🚀 升級到 Flutter 3.47： 運行
flutter upgrade以確保您使用最新的穩定版本，其中包含我們最新的 WasmGC 優化和運行時修復。 - ⚙️ 使用 Wasm 進行建置： 在您的專案終端中運行
flutter build web --wasm。 - 📝 報告任何阻礙： 如果您遇到套件依賴項或運行時問題，請告訴我們！在 Flutter Wasm 回饋表單上提交報告，以便我們的工程師可以協助解決遷移問題。
- 🎉 分享您的勝利： 如果您的應用程式能順利建置並運行得更快，請告訴我們！分享您的指標和幀率增益。
在社群媒體上發文時，請使用 #FlutterWasmWeek，這樣我們就能展示您的成果！
建構一個預設為 Wasm 的網頁未來
透過本週共同測試您的應用程式並解決套件相依性，我們可以為將 WebAssembly 作為 Flutter Web 的預設編譯器鋪平道路。
運行 flutter upgrade，嘗試 flutter build web --wasm，然後告訴我們結果如何！
