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 應用程式，請將 --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);

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

要了解有關這些標頭的更多資訊，請檢視 使用 COEP：credentialless 載入跨域資源。

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

為了支援編譯到 Wasm，Dart 已經改變了它啟用與瀏覽器和 JavaScript API 的互操作的方式。這阻止了使用 dart:html 或 package:js 的 Dart 程式碼編譯到 Wasm。

相反，Dart 現在提供了圍繞靜態 JS interop 構建的新型輕量級 interop 解決方案

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

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