Optimizing

Note: This is written primarily for the web, but the main optimizations will work on other platforms too.

You might have noticed that Dioxus binaries are pretty big.TodoMVC app weighs in at 2.36mb!event system will reduce the binary size of a hello world app to less than 100kb (with unstable features).

We will also discuss ways to optimize your app for increased speed.

However, certain optimizations will sacrifice speed for decreased binary size or the other way around.

To test binary sizes, we will use this repository as a sample app.no-optimizations package will serve as the base, which weighs 2.36mb as of right now.

Additional resources:

• WASM book - Shrinking .wasm code size
• min-sized-rust

Building in release mode

This is the best way to optimize. In fact, the 2.36mb figure at the start of the guide is with release mode.

Thankfully, no matter what tool you're using to build your app, it will probably have a --release flag to do this.

Using the Dioxus CLI or Trunk:

• Dioxus CLI: dx build --release
• Trunk: trunk build --release

UPX

If you're not targeting web, you can use the UPX CLI tool to compress your executables.

Setup:

• Download a release and extract the directory inside to a sensible location.
• Add the executable located in the directory to your path variable.

You can run upx --help to get the CLI options, but you should also view upx-doc.html for more detailed information.

An example command might be: upx --best -o target/release/compressed.exe target/release/your-executable.exe.

Build configuration

Note: Settings defined in .cargo/config.toml will override settings in Cargo.toml.

Other than the --release flag, this is the easiest way to optimize your projects, and also the most effective way,

Stable

This configuration is 100% stable and decreases the binary size from 2.36mb to 310kb..cargo/config.toml:

[profile.release]
opt-level = "z"
debug = false
lto = true
codegen-units = 1
panic = "abort"
strip = true
incremental = false

Links to the documentation of each value:

• opt-level
• debug
• lto
• codegen-units
• panic
• strip
• incremental

Unstable

This configuration contains some unstable features, but it should work just fine..cargo/config.toml:

[unstable]
build-std = ["std", "panic_abort", "core", "alloc"]
build-std-features = ["panic_immediate_abort"]

[build]
rustflags = [
    "-Clto",
    "-Zvirtual-function-elimination",
    "-Zlocation-detail=none"
]

# Same as in the Stable section
[profile.release]
opt-level = "z"
debug = false
lto = true
codegen-units = 1
panic = "abort"
strip = true
incremental = false

Note: The omitted space in each flag (e.g., -C<no space here>lto) is intentional. It is not a typo.

The values in [profile.release] are documented in the Stable section. Links to the documentation of each value:

• [build.rustflags]
• -C lto
• -Z virtual-function-elimination
• -Z location-detail

wasm-opt

Note: In the future, wasm-opt will be supported natively through the Dioxus CLI.

wasm-opt is a tool from the binaryen library that optimizes your WASM files.binaryen release and run this command from the package directory:

wasm-opt dist/assets/dioxus/APP_NAME_bg.wasm -o dist/assets/dioxus/APP_NAME_bg.wasm -Oz

The -Oz flag specifies that wasm-opt should optimize for size. For speed, use -O4.

Improving Dioxus code

Let's talk about how you can improve your Dioxus code to be more performant.

It's important to minimize the number of dynamic parts in your rsx, like conditional rendering.Dynamic Rendering.

Also check out Anti-patterns for patterns that you should avoid.

Bundling and minifying the output JS and HTML

This will be added in dioxus/#1369.