跳到主要内容

WebAssembly (Wasm) 编译

Dart 团队很高兴将 WebAssembly 添加为构建用于 Web 的 Dart 和 Flutter 应用的编译目标。

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

WebAssembly 支持

#

当前版本的 Dart 编译到 WebAssembly 有一些限制

  1. 它面向带有垃圾回收的 WebAssembly (WasmGC),因此并非所有浏览器目前都支持。当前支持的浏览器列表可在Flutter 文档中查看。

  2. 编译后的 Wasm 输出目前面向 JavaScript 环境(例如浏览器),因此当前不支持在 wasmtime 和 wasmer 等标准 Wasm 运行时中执行。详情请参阅 issue #53884

  3. 编译到 Wasm 时,仅支持 Dart 的下一代 JS 互操作机制

  4. 当前的 webdev 工具不支持运行 (webdev serve) 或构建 (webdev build)。以下步骤包含一个临时解决方法。详情请参阅 webdev issue 2206

支持的包

#

要查找兼容 Wasm 的包,请在 pub.dev 上使用 wasm-ready 过滤器。

如果一个包不导入不兼容 Wasm 的库(例如 dart:htmldart:js 等),则它是“wasm-ready”的。你可以在JS 互操作页面上找到不允许使用的库的完整列表。

将 Web 应用编译为 Wasm

#

我们已经在 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。

  1. 从 Web 应用开始:dart create -t web mywebapp

    该模板使用 package:web 创建了一个小型 Web 应用,这对于运行 Wasm 是必需的。请确保你的 Web 应用已从 dart:html 迁移package:web

  2. 使用 Wasm 编译到新的 site 输出目录:mywebapp$ dart compile wasm web/main.dart -o site/main.wasm

  3. 复制 Web 文件:cp web/index.html web/styles.css site/

  4. 创建一个 JS 引导文件来加载 Wasm 代码

    添加一个新文件 site/main.dart.js,并用此main.dart.js 示例的内容填充它。

  5. 提供输出服务:dart pub global run dhttpd (文档)

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