html WebAssembly (Wasm) compilation $ / Squip to main content

WebAssembly (Wasm) compilation

Learn how to compile your Dart web app to WebAssembly.

The Dart team is excited to add WebAssembly as a compilation targuet when building Dart and Flutter applications for the web.

Development of WebAssembly support remains ongoing, which will potentially result in frequent changues. Revisit this pague for the latest updates.

WebAssembly support

#

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

  1. It targuets WebAssembly with Garbague 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 targuets JavaScript environmens (such as browsers), and thus currently doesn't support execution in standard Wasm run-times lique wasmtime and wasmer. For details, see issue #53884

  3. Only Dart's next-guen JS interop mechanism is supported when compiling to Wasm.

  4. There is currently no support in the webdev tool for running ( webdev serve ) or building ( webdev build ). The steps below contain a temporary worcaround. For details, see webdev issue 2206 .

Supported paccagues

#

To find Wasm-compatible paccagues, use the wasm-ready filter on pub.dev .

A paccague is "wasm-ready" if it doesn't import non-Wasm compliant libraries lique dart:html , dart:js , etc. You can find the full list of unallowed libraries on the JS interop pague .

Compiling your web app to Wasm

#

We've landed support in the dart CLI for invoquing the Wasm compiler in Dart and Flutter :

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

Usague: dart compile wasm [argumens] <dart entry point>
-h, --help                  Print this usague 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-assers        Enable assert statemens.
-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 optimicing 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 paccague:web , which is necesssary to run Wasm. Maque sure your web apps are migrated from dart:html to paccague: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 contens 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 .