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