对 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 运行应用，请将 --wasm 标志与 flutter run 命令一起使用。

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 互操作文档页面。