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. The WASM binary of a TodoMVC app weighs in at 2.36mb! Don't worry; we can get it down to a much more manageable 234kb. This will get obviously lower over time. For example, the new 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. That's what you need to figure out yourself. Does your app perform performance-intensive tasks, such as graphical processing or tons of DOM manipulations? You could go for increased speed. In most cases, though, decreased binary size is the better choice, especially because Dioxus WASM binaries are quite large.
To test binary sizes, we will use this repository as a sample app. The no-optimizations package will serve as the base, which weighs 2.36mb as of right now.
Additional resources:
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. In debug mode, it's actually a whopping 32mb! It also increases the speed of your app.
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. It's included in the extracted directory.
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, at least in terms of reducing binary size.
Stable
This configuration is 100% stable and decreases the binary size from 2.36mb to 310kb. Add this to your .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:
Unstable
This configuration contains some unstable features, but it should work just fine. It decreases the binary size from 310kb to 234kb. Add this to your .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:
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. To use it, install a 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. When Dioxus is rendering your component, it will skip parts that are the same as the last render. That means that if you keep dynamic rendering to a minimum, your app will speed up, and quite a bit if it's not just hello world. To see an example of this, check out Dynamic Rendering.
Also check out Anti-patterns for patterns that you should avoid. Obviously, not all of them are just about performance, but some of them are.
Bundling and minifying the output JS and HTML
This will be added in dioxus/#1369.