|
| 1 | +--- |
| 2 | +id: wasm_size |
| 3 | +title: Wasm size |
| 4 | +sidebar_label: Wasm size |
| 5 | +--- |
| 6 | + |
| 7 | +import Tabs from '@theme/Tabs'; |
| 8 | +import TabItem from '@theme/TabItem'; |
| 9 | + |
| 10 | +# Reducing WebAssembly Size |
| 11 | + |
| 12 | +One of the main challenges when using WebAssembly (Wasm) in the browser is managing the size of the `.wasm` binary. |
| 13 | +Larger Wasm files lead to longer download times, increased memory usage, and delayed startup, |
| 14 | +especially on mobile networks and lower-end devices. |
| 15 | +For game engines, physics libraries, or interactive web tools using `rapier.js`, |
| 16 | +minimizing Wasm size is essential for a responsive user experience. |
| 17 | + |
| 18 | +This chapter will guide you how to create a customized `rapier.js` build including only what you need. |
| 19 | + |
| 20 | +## Customizing Your Build |
| 21 | + |
| 22 | +Rust-to-Wasm projects often include a lot of functionality—even things you may not use at runtime. |
| 23 | +Every public function, every exported symbol, and every dependency can increase the final `.wasm` file size. |
| 24 | +Although tools like `wasm-opt` and Rust's dead-code elimination (via `--release`) help, |
| 25 | +some runtime features (like serialization, or debugging) can still bloat your binary. |
| 26 | + |
| 27 | +### Example |
| 28 | + |
| 29 | +#### Quick minimal |
| 30 | + |
| 31 | +Rapier's javascript package is already built using different settings, |
| 32 | +so you can leverage its configuration to make your own one: |
| 33 | + |
| 34 | +Take a look at the `builds/prepare_builds/` folder: |
| 35 | +it contains automation to create rust projects with different settings, |
| 36 | +using [Tera](https://docs.rs/crate/tera) and custom scripts under the hood. |
| 37 | + |
| 38 | +To customize a build, you can edit a configuration json file from `assets/`: |
| 39 | +a `example_dim2_minimal.json` is provided: |
| 40 | +you can see that its `feature_set` is empty, and its `conditions_to_remove` has a list of items. |
| 41 | + |
| 42 | +Let's build it! |
| 43 | + |
| 44 | +0. Clone the repository |
| 45 | + |
| 46 | +```bash |
| 47 | +git clone https://github.com/dimforge/rapier.js |
| 48 | +cd rapier.js |
| 49 | +``` |
| 50 | + |
| 51 | +1. Generate the rust wasm |
| 52 | + |
| 53 | +That's the purpose of `builds/prepare_builds/` folder, |
| 54 | +run `cargo run -- -c assets/example_dim2_minimal.json` in it to generate a `builds/rapier2d-minimal` ruts project. |
| 55 | + |
| 56 | +Feel free to look at its content: the most impactful operation was to not enable some features. |
| 57 | +For practicity, features usually have the same name as the rapier's package, and are forwarded to rapier. |
| 58 | + |
| 59 | +Navigate into the created folder, and run `npm run build` to create a wasm package. |
| 60 | + |
| 61 | +If you want more options, you can: |
| 62 | +- create a new feature in the `Cargo.toml.tera`, which you can use in rust code |
| 63 | +- or modify the generated `Cargo.toml`, and rebuild the package. |
| 64 | + |
| 65 | +2. Rapier-compat |
| 66 | + |
| 67 | +To build [rapier-compat](./getting_started_js#using-rapier-without-a-bundler), |
| 68 | +go into `rapier-compat` and run `./build_conf.sh example_dim2_minimal`. |
| 69 | +This will copy the wasm package and its javascript glue code, |
| 70 | +adapt it and remove the configuration file's `conditions_to_remove` from included files. |
| 71 | + |
| 72 | +3. Profit |
| 73 | + |
| 74 | +Now you have a customized wasm build, ready to use. |
| 75 | + |
| 76 | +With this example, here is the size impact you can expect on `rapier_wasm2d_bg.wasm`: |
| 77 | + |
| 78 | +- published rapier2d package: |
| 79 | + - Bundle Size: 1.27 MB |
| 80 | + - brotli Size: 353.56 KB |
| 81 | +- Custom build (no debug render, no serialization): |
| 82 | + - Bundle Size: 1.05 MB |
| 83 | + - brotli Size: 300.06 KB |
| 84 | + |
| 85 | +That's a neat improvement, you may go further by passing `Oz` to wasm-opt, or customizing your build even further. |
0 commit comments