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.

The current version of Dart compilation to WebAssembly has a number of restrictions:

1. 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.

2. 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

3. Only Dart's next-gen JS interop mechanism is supported when compiling 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:

1. 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 from dart:html to package:web.

2. Compile with Wasm to a new site output directory: mywebapp$ dart compile wasm web/main.dart -o site/main.wasm

3. Copy over the web files: cp web/index.html web/styles.css site/

4. 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 this main.dart.js sample.

5. Serve the output: dart pub global run dhttpd (docs)

You can also try out this small example here.