WebAssembly (Wasm) 支援

Flutter 和 Dart 支援 WebAssembly 作為編譯目標，用於構建 Web 應用程式。

要嘗試一個預先構建的 Flutter Web 應用（使用 Wasm），請檢視 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 應用程式，請將 --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);

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

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

要執行已編譯為 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，但遇到了一個類似的錯誤，阻礙了與 Flutter Wasm 渲染器的相容性。請關注 此錯誤 以獲取詳細資訊。

為了支援編譯到 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 互操作文件頁面。