WebAssembly (Wasm) 编译

WebAssembly 支持
- 支持的包
将 Web 应用编译为 Wasm

Dart 团队很高兴在为 Web 构建 Dart 和 Flutter 应用程序时，将 WebAssembly 添加为编译目标。

WebAssembly 支持的开发仍在进行中，这可能会导致频繁的更改。请重新访问此页面以获取最新更新。

当前版本的 Dart 编译为 WebAssembly 有许多限制

它以带有垃圾回收 (WasmGC) 的 WebAssembly 为目标，因此并非所有浏览器都支持。当前支持的浏览器列表可在 Flutter 文档中找到。
编译后的 Wasm 输出当前以 JavaScript 环境（例如浏览器）为目标，因此当前不支持在 wasmtime 和 wasmer 等标准 Wasm 运行时中执行。有关详细信息，请参阅 issue #53884
编译为 Wasm 时，仅支持 Dart 的下一代 JS 互操作机制。
当前在 webdev 工具中，不支持运行 (webdev serve) 或构建 (webdev build)。以下步骤包含临时解决方法。有关详细信息，请参阅 webdev issue 2206。

要查找与 Wasm 兼容的包，请在 pub.dev 上使用 wasm-ready 筛选器。

如果一个包不导入不符合 Wasm 要求的库（如 dart:html、dart:js 等），则该包是“wasm-ready”的。您可以在JS 互操作页面上找到不允许的库的完整列表。

我们已经在 dart CLI 中添加了对在 Dart 和 Flutter 中调用 Wasm 编译器的支持

$ dart help compile wasm
Compile Dart to a WebAssembly/WasmGC module.

Usage: dart compile wasm [arguments] <dart entry point>
-h, --help                  Print this usage information.
-o, --output                Write the output to <file name>.
                            This can be an absolute or relative path.
-v, --verbose               Print debug output during compilation
    --enable-asserts        Enable assert statements.
-D, --define=<key=value>    Define an environment declaration. To specify multiple declarations, use multiple
                            options or use commas to separate key-value pairs.
                            For example: dart compile wasm -Da=1,b=2 main.dart

Wasm 编译在稳定版中可用，但仍处于预览状态。在我们继续优化工具以改善开发人员体验的同时，您可以通过遵循此处概述的临时步骤，立即尝试将 Dart 编译为 Wasm

从 Web 应用开始：dart create -t web mywebapp
该模板使用 package:web 创建一个小型 Web 应用，这对于运行 Wasm 是必需的。确保您的 Web 应用从 dart:html 迁移到 package:web。
使用 Wasm 编译到新的 site 输出目录：mywebapp$ dart compile wasm web/main.dart -o site/main.wasm
复制 Web 文件：cp web/index.html web/styles.css site/
创建一个 JS 引导文件以加载 Wasm 代码
添加一个新文件 site/main.dart.js，并用此main.dart.js 示例的内容填充它。
提供输出：dart pub global run dhttpd (文档)

您也可以在此处尝试这个小示例。

除非另有说明，否则本网站上的文档反映的是 Dart 3.6.0。页面最后更新于 2024-06-17。查看源代码或报告问题。

WebAssembly (Wasm) 编译

WebAssembly 支持

支持的包

将 Web 应用编译为 Wasm