WebAssembly (Wasm) compilation
The Dart team is excited to add WebAssembly as a compilation target when building Dart and Flutter applications for the web.
Development of WebAssembly support remains ongoing, which will potentially result in frequent changes. Revisit this page for the latest updates.
WebAssembly support
#The current version of Dart compilation to WebAssembly has a number of restrictions:
-
It targets WebAssembly with Garbage Collection (WasmGC), so not all browsers are currently supported. The current list of browsers is available in the Flutter documentation.
-
The compiled Wasm output currently targets JavaScript environments (such as browsers), and thus currently doesn't support execution in standard Wasm run-times like wasmtime and wasmer. For details, see issue #53884
-
Only Dart's next-gen JS interop mechanism is supported when compiling to Wasm.
-
There is currently no support in the
webdev
tool for running (webdev serve
) or building (webdev build
). The steps below contain a temporary workaround. For details, see webdev issue 2206.
Supported packages
#To find Wasm-compatible packages,
use the wasm-ready
filter on pub.dev.
A package is "wasm-ready" if it doesn't import non-Wasm compliant libraries
like dart:html
, dart:js
, etc. You can find the full list of unallowed
libraries on the JS interop page.
Compiling your web app to Wasm
#We've landed support in the dart
CLI for invoking the
Wasm compiler in Dart and Flutter:
$ 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 compilation is available in stable, but still in preview. While we continue optimizing tooling to improve developer experience, you can try compiling Dart to Wasm today by following the temporary steps outlined here:
-
Start with a web app:
dart create -t web mywebapp
The template creates a small web app using
package:web
, which is necessary to run Wasm. Make sure your web apps are migrated fromdart:html
topackage:web
. -
Compile with Wasm to a new
site
output directory:mywebapp$ dart compile wasm web/main.dart -o site/main.wasm
-
Copy over the web files:
cp web/index.html web/styles.css site/
-
Create a JS bootstrap file to load the Wasm code:
Add a new file
site/main.dart.js
and fill it with the contents of thismain.dart.js
sample. -
Serve the output:
dart pub global run dhttpd
(docs)
除非另有说明,文档之所提及适用于 Dart 3.5.0 版本,本页面最后更新时间: 2024-09-22。 查看文档源码 或者 报告页面问题。