Skip to content

Commit 3241c80

Browse files
committed
chapter on javascript size guidelines (unlinked yet)
1 parent 4d128db commit 3241c80

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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

Comments
 (0)