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