search

leptos-rs / leptos

Build fast web applications with Rust.
https://leptos.dev
MIT License
15.28k stars 599 forks source link

feat: Add Hacker News examples w/ Islands & Compression #2608

Closed Th3Whit3Wolf closed 3 weeks ago

Th3Whit3Wolf commented 1 month ago

One of the things I love about leptos is how easy it is to ship a small frontend.

Leptos provides islands that reduce the amount of total HTML generated and it's build tool minifies CSS with lightningcss, soon will be minifying javascript with swc, and it can even precompress these static assets. That last of which I think may be the most important because web assembly compress fairly well and it allows the user to ship their entire app as 1 static binary (with musl).

Since precompression was added as a feature in cargo-leptos I haven't seen it mentioned a whole lot so I wanted to help people see how to use it. I have also seen a couple question about setting up compression in general so I added that too.

In this example all static assets are compressed with cargo-leptos and the HTML is dynamically compressed.

The type of compression sent will depend on what the client supports.

The resulting network usage

Asset No Compression Compression Difference
HTML 16.25 kB 4.80 kB - 70.46%
CSS 3.84 kB 1.17 kB - 69.53%
JS 16.86 kB 4.63 kB - 72.53%
WASM 200.15 kB 69.93 kB - 65.06%
ICON 15.54 kB 3.29 kB - 78.83%
TOTAL 252.64 kB 83.82 kB - 66.82%

NOTE: My local cargo-leptos is built with PR 285 so the javascript is a bit smaller than what the current will produces.

EDIT: Reran and fixed numbers in table

gbj commented 1 month ago

Could you clarify for me — Is the application code here different from hackernews_islands_axum, or just serving precompressed assets? If it's the same application, I'd love to have this as a PR to the existing islands example, rather than two separate examples.

(I'd also suggest adding a few comments explaining the changes: for example, the predicate filtering etc.)

Th3Whit3Wolf commented 1 month ago

The only real difference is that it serves the precompressed assets, dynamically compresses the HTML before serving it, and embeds the precompressed assets. It also returns a 404 instead of 500 when a request is made for an asset that doesn't exist.

Th3Whit3Wolf commented 1 month ago

I made another PR in case you'd prefer an update to the current hackernews_islands_axum example