Minimize WASM size - Githubissues

seed-rs / seed-quickstart-webpack

Template for web apps with Seed (Rust framework), TailwindCSS and Webpack.

https://quickstart-webpack.seed-rs.org

Other

110 stars 13 forks source link

Minimize WASM size #9

Open MartinKavik opened 4 years ago

MartinKavik commented 4 years ago

What can be added into Cargo.toml:

[profile.release]
lto = true
opt-level = 'z'
codegen-units = 1

Other ideas?

@TatriX - you (will) have the project based on the current seed-quickstart-webpack template - I would be glad if you can confirm, that it helps or if you find other options. Don't hurry, I plan to integrate it to next release without ETA. Thanks!

TatriX commented 4 years ago

What is the current bundle size? I think we can put similar chart to the site/readme:

Source: https://elm-lang.org/

MartinKavik commented 4 years ago

Seed RealWorld is based on a rust quickstart that isn't very optimized (I plan to work on that quickstart but in several months at the earliest) - it's gzipped wasm file (by Netlify) is 404 KB.
kavik.cz (based on this quickstart) is 119 KB (without suggested optimizations above).
seed-rs.org (based on this quickstart) is 179 KB (without suggested optimizations above and all text content is inlined into binary).

MartinKavik commented 4 years ago

How to reduce WASM size:

Use wasm-opt - this QS already uses it (code), but maybe we can use it better.
Use alternative Rust allocator.
Use/write browser specific libraries - see e.g. https://github.com/seed-rs/seed/issues/226#issuecomment-544923393.
Set compile flags (like the ones at the first comment in this issue).
Optimize formatting somehow - https://jamesmunns.com/blog/fmt-unreasonably-expensive/.
Replace / remove big dependencies. Twiggy can help.
Customize std with xargo - https://github.com/johnthagen/min-sized-rust#optimize-libstd-with-xargo

TatriX commented 4 years ago

I think we cannot directly compare js bundle size vs wasm bundle size, because as far as I know wasm was optimized for streaming and interpretation speed, i.e. wasm bundle with equal size should be faster because browser don't need to parse the whole script.

That being said, I think bundle size is already quite good.

MartinKavik commented 4 years ago

That being said, I think bundle size is already quite good.

Yeah, that's the reason why it isn't my priority now, but it can be better. And I think that the small size is also quite good for marketing - especially in comparison with e.g. Blazor and other wasm frameworks.

MartinKavik commented 4 years ago

Update in the latest version (0.4.1) - I've added flags from the first comment and it reduced WASM file size:

Before: 520 KB (141 gzipped)
After: 348 KB (124 gzipped)

alun commented 4 years ago

It definitely would be worthwhile to get some improvements here I'm comparing todo mvc example in yew https://todomvc.yew.rs/ and in seed which I build with cargo make build from seed/examples/todomvc.

Sizes of wasm output file relate as (yew/seed):

82303/765571 = 0.10750 gzipped 229422/2801459 = 0.08189 ungzipped

So it looks like yew is 90% smaller which makes a huge difference IMO.

Disclaimer: I'm new to both so maybe I don't know about some required optimisation flags yet.

MartinKavik commented 4 years ago

@alun cargo make build generates a huge and slow debug build. Try something like cargo make build_release. I've just tried to build a new Seed TodoMVC (it's not published yet, I'm writing a new tutorial for seed-rs.org) and it has 320KB uncompressed. So the gzipped version should be comparable to the yew's one. Also we plan to optimize Seed for size and speed in the future, so it will be much better I hope.