對 WebAssembly (Wasm) 的支援

當為網路建置應用程式時，Flutter 和 Dart 支援 WebAssembly 作為編譯目標。

若要試用使用 Wasm 的預建 Flutter 網頁應用程式，請查看 Wonderous 示範應用程式。

若要在您自己的應用程式中實驗 Wasm，請使用下列步驟。

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

嘗試預設範本的範例應用程式，或選擇任何已遷移為與 Wasm 相容的 Flutter 應用程式。

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

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

flutter create . --platforms web

若要使用 Wasm 執行應用程式以進行開發或測試，請將 --wasm 標誌與 flutter run 命令搭配使用。

flutter run -d chrome --wasm

若要使用 Wasm 建置網頁應用程式，請將 --wasm 標誌新增至現有的 flutter build web 命令。

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);

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

Chromium 和 V8 自 119 版起支援 WasmGC。iOS 上的 Chrome 使用 WebKit，後者尚未支援 WasmGC。Firefox 宣布在 Firefox 120 中穩定支援 WasmGC，但由於已知的限制，目前無法運作（請參閱下方詳細資訊）。

• 為何不使用 Firefox？ Firefox 120 及更新版本先前可以執行 Flutter/Wasm，但它們遇到一個錯誤，阻礙了與 Flutter Wasm 渲染器的相容性。請追蹤此錯誤以取得詳細資訊。
• 為何不使用 Safari？ Safari 尚未支援 WasmGC。請追蹤此錯誤以取得詳細資訊。

為了支援編譯為 Wasm，Dart 已變更它如何啟用與瀏覽器和 JavaScript API 的互通性。這會阻止使用 dart:html 或 package:js 的 Dart 程式碼編譯為 Wasm。

相反地，Dart 現在提供以靜態 JS 互通性為基礎的新輕量互通解決方案

• package:web，它取代 dart:html（和其他網頁程式庫）
• dart:js_interop，它取代 package:js 和 dart:js

若要深入瞭解 Dart 中的 JS 互通性，請參閱 Dart 的JS 互通性文件頁面。

除非另有說明，否則本網站上的文件反映 Flutter 的最新穩定版本。本頁面最後更新時間為 2024-11-20。 檢視原始碼 或 回報問題。