支援 WebAssembly (Wasm)

Flutter 和 Dart 在構建 Web 應用時支援將 WebAssembly 作為編譯目標。

要體驗預構建的 Wasm 版 Flutter Web 應用，請檢視 Wonderous 演示應用。

要在您自己的應用中嘗試 Wasm，請遵循以下步驟。

切換到 Flutter 3.24 或更高版本以執行和編譯 Flutter 應用至 WebAssembly。為確保您執行的是最新版本，請執行 flutter upgrade。

嘗試預設模板 示例應用，或選擇任何已遷移至 Wasm 相容 的 Flutter 應用。

確保您的應用 web/index.html 已更新為 Flutter 3.22 及更高版本的最新 Flutter Web 應用初始化程式碼。

如果您想使用預設設定，請刪除 web/ 目錄的內容並執行以下命令重新生成它們

$ flutter create . --platforms web

要為了開發或測試目的使用 Wasm 執行應用，請在 flutter run 命令中新增 --wasm 標誌。

$ flutter run -d chrome --wasm

要使用 Wasm 構建 Web 應用，請在現有的 flutter build web 命令中新增 --wasm 標誌。

$ flutter build web --wasm

該命令會將輸出生成到包根目錄下的 build/web 目錄中，與 flutter build web 一樣。

即使使用了 --wasm 標誌，Flutter 仍然會將應用編譯為 JavaScript。如果執行時未檢測到 WasmGC 支援，則會使用 JavaScript 輸出，因此應用仍可在所有主流瀏覽器中執行。

您可以檢查編譯期間設定的 dart2wasm 環境變數（推薦）來驗證應用是否確實在以 Wasm 方式執行。

const isRunningWithWasm = bool.fromEnvironment('dart.tool.dart2wasm');

或者，您可以使用數字表示法的差異來測試是否使用了原生 (Wasm) 數字表示法。

final isRunningWithWasm = identical(double.nan, double.nan);

Flutter WebAssembly 可以使用多執行緒來更快地渲染應用，減少卡頓。為此，Flutter 使用了需要特定 HTTP 響應標頭的高階瀏覽器功能。

要了解有關這些標頭的更多資訊，請查閱 使用 COEP 在沒有 CORP 標頭的情況下載入跨源資源：credentialless。

要執行已編譯為 Wasm 的 Flutter 應用，您需要一個支援 WasmGC 的瀏覽器。

Chromium 和 V8 從 119 版本開始支援 WasmGC。iOS 上的 Chrome 使用 WebKit，該引擎目前尚不支援 WasmGC。Firefox 宣佈在 Firefox 120 中穩定支援 WasmGC，但由於已知限制（詳情見下文），目前無法工作。

• 為什麼 Firefox 不行？ Firefox 120 及更高版本此前曾能執行 Flutter/Wasm，但目前遇到了一個阻礙與 Flutter 的 Wasm 渲染器相容的錯誤。有關詳情，請關注 此 Bug。
• 為什麼 Safari 不行？ Safari 現已支援 WasmGC，但遇到了類似的阻礙與 Flutter 的 Wasm 渲染器相容的錯誤。有關詳情，請關注 此 Bug。

為了支援編譯至 Wasm，Dart 更改了啟用與瀏覽器和 JavaScript API 互操作的方式。這導致使用 dart:html 或 package:js 的 Dart 程式碼無法編譯為 Wasm。

作為替代，Dart 現在提供了圍繞靜態 JS 互操作構建的全新、輕量級的互操作解決方案

• package:web，它取代了 dart:html（以及其他 Web 庫）
• dart:js_interop，它取代了 package:js 和 dart:js

要了解有關 Dart 中 JS 互操作的更多資訊，請參閱 Dart 的 JS 互操作文件頁面。