Contents

WebAssembly (Wasm) 支持

Contents

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 运行（首选）。

dart

const isRunningWithWasm = bool.fromEnvironment('dart.tool.dart2wasm');

或者，您可以使用数字表示中的差异来测试是否使用了原生 (Wasm) 数字表示。

dart

final isRunningWithWasm = identical(double.nan, double.nan);

Flutter Web WebAssembly 使用多个线程来更快地渲染您的应用，减少卡顿。为此，Flutter 使用需要特定 HTTP 响应头的先进浏览器功能。

名称	值
`Cross-Origin-Embedder-Policy`	`credentialless` 或 `require-corp`
`Cross-Origin-Opener-Policy`	`same-origin`

要运行已编译为 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 交互构建的新型轻量级交互解决方案：

要了解有关 Dart 中 JS 交互的更多信息，请参阅 Dart 的JS 交互文档页面。

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。查看源代码或报告问题。

开始