Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Compression to Hacker News w/ Islands Example #2613

Merged
merged 12 commits into from
Jun 28, 2024

Conversation

Th3Whit3Wolf
Copy link
Contributor

@Th3Whit3Wolf Th3Whit3Wolf commented Jun 3, 2024

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.

I've updated the hackernews_islands_axum example to serve all static assets precompressed with cargo-leptos and to dynamically compress the HTML.

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%

@Th3Whit3Wolf Th3Whit3Wolf changed the title Compressed islands feat: Add Compression to Hacker News w/ Islands Example Jun 3, 2024
@Th3Whit3Wolf
Copy link
Contributor Author

Fix lints for CI

@Th3Whit3Wolf
Copy link
Contributor Author

Looks like the issue is that when building it is trying to access target/site which doesn't exist until cargo leptos build is run. I have updated the makefile to account for this.

@Th3Whit3Wolf
Copy link
Contributor Author

I also add hash_file to the Cargo.toml. Since the compressed file are served with a Cache-Control policy hash_file is necessary to ensure that client receives the correct file when updates are made to an asset. I don't expect the example files to change much but for users copying & pasting this example to base their own app off of this will be helpful.

@gbj
Copy link
Collaborator

gbj commented Jun 28, 2024

Cool -- This looks great, thanks!

@gbj gbj merged commit c53fc67 into leptos-rs:main Jun 28, 2024
59 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants