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