|
| 1 | +--- |
| 2 | +title: WebAssembly (Wasm) compilation |
| 3 | +description: Learn how to compile your Dart web app to WebAssembly. |
| 4 | +--- |
| 5 | + |
| 6 | +The Dart team is excited to add |
| 7 | +[WebAssembly](https://webassembly.org/) as a compilation target when building |
| 8 | +Dart and [Flutter][] applications for the web. |
| 9 | + |
| 10 | +Development of WebAssembly support remains ongoing, |
| 11 | +which will potentially result in frequent changes. |
| 12 | +Revisit this page for the latest updates. |
| 13 | + |
| 14 | +:::note |
| 15 | +**Support for Wasm is now in stable!** |
| 16 | + |
| 17 | +WebAssembly support for Dart web is available on the Dart |
| 18 | +*stable* [channel](/get-dart#release-channels). |
| 19 | +::: |
| 20 | + |
| 21 | +## WebAssembly support |
| 22 | + |
| 23 | +The current version of Dart compilation to WebAssembly has a number of |
| 24 | +restrictions: |
| 25 | + |
| 26 | +1. It targets WebAssembly with Garbage Collection ([WasmGC][]), |
| 27 | + so not all browsers are currently supported. |
| 28 | + The current list of browsers is available in the [Flutter documentation][Flutter]. |
| 29 | + |
| 30 | +1. The compiled Wasm output currently targets JavaScript environments |
| 31 | + (such as browsers), and thus currently doesn't support execution in standard |
| 32 | + Wasm run-times like wasmtime and wasmer. For details, see |
| 33 | + [issue #53884]({{site.repo.dart.sdk}}/issues/53884) |
| 34 | + |
| 35 | +1. Only Dart's |
| 36 | + [next-gen JS interop mechanism](/interop/js-interop/) |
| 37 | + is supported when compiling to Wasm. |
| 38 | + |
| 39 | +## Compiling your web app to Wasm {:#compiling-to-wasm} |
| 40 | + |
| 41 | +We've landed support in the `dart` CLI for invoking the |
| 42 | +Wasm compiler in Dart and [Flutter][]: |
| 43 | + |
| 44 | +```console |
| 45 | +$ dart help compile wasm |
| 46 | +Compile Dart to a WebAssembly/WasmGC module. |
| 47 | + |
| 48 | +Usage: dart compile wasm [arguments] <dart entry point> |
| 49 | +-h, --help Print this usage information. |
| 50 | +-o, --output Write the output to <file name>. |
| 51 | + This can be an absolute or relative path. |
| 52 | +-v, --verbose Print debug output during compilation |
| 53 | + --enable-asserts Enable assert statements. |
| 54 | +-D, --define=<key=value> Define an environment declaration. To specify multiple declarations, use multiple |
| 55 | + options or use commas to separate key-value pairs. |
| 56 | + For example: dart compile wasm -Da=1,b=2 main.dart |
| 57 | +``` |
| 58 | + |
| 59 | +Wasm compilation is available in stable, but still in preview. |
| 60 | +While we continue optimizing tooling to improve developer experience, |
| 61 | +you can try compiling Dart to Wasm today |
| 62 | +by following the temporary steps outlined here: |
| 63 | + |
| 64 | +1. Start with a web app: `dart create -t web mywebapp` |
| 65 | + |
| 66 | + The template creates a small web app using [`package:web`][], |
| 67 | + which is necessary to run Wasm. |
| 68 | + Make sure your web apps are [migrated][] from `dart:html` to `package:web`. |
| 69 | + |
| 70 | +1. Compile with Wasm: `mywebapp$ dart compile wasm web/main.dart` |
| 71 | + |
| 72 | +1. Create a new directory for the built web app: `mkdir site` |
| 73 | + |
| 74 | +1. Copy over Dart code: `cp web/main.* site/` |
| 75 | + |
| 76 | +1. Copy over the web files: `cp web/index.html web/styles.css site/` |
| 77 | + |
| 78 | +1. Create a JS bootstrap file to load the Wasm code: |
| 79 | + |
| 80 | + Add a new file `site/main.dart.js` and fill it with the contents of |
| 81 | + this [`main.dart.js` sample](https://gist.github.com/mit-mit/0fcb1247a9444b0cadf611aa5fc6f32e). |
| 82 | + |
| 83 | +1. Serve the output: `dart pub global run dhttpd` ([docs][dhttpd]) |
| 84 | + |
| 85 | +You can also try out this small example [here](https://github.com/mit-mit/sandbox). |
| 86 | + |
| 87 | +[WasmGC]: https://developer.chrome.com/blog/wasmgc/ |
| 88 | +[Flutter]: {{site.flutter}}/wasm |
| 89 | +[`package:web`]: {{site.pub-pkg}}/web |
| 90 | +[`dart:js_interop`]: {{site.dart.api}}/{{site.dart.sdk.channel}}/dart-js_interop |
| 91 | +[migrated]: /interop/js-interop/package-web/ |
| 92 | +[dhttpd]: {{site.pub-pkg}}/dhttpd |
0 commit comments