Skip to content
New issue

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

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

Already on GitHub? # to your account

feat(build): cache JS client script and compress with gzip #51

Merged
merged 5 commits into from
Jan 13, 2024

Conversation

aralroca
Copy link
Collaborator

Fixes #50

Instead of directly embedding the JavaScript code during runtime, the build process now generates a script with a unique hash. The HTML file then references this script using a src attribute and async, allowing for better version control and cache management.

Screenshot 2024-01-13 at 13 20 40

Key Changes:

  • Hashed Script Generation: During the build process, a unique hash is now generated for the JavaScript script, improving versioning and cache control.
  • HTML Script Inclusion: The HTML file references the generated script using the src attribute, linking to the script file with the associated hash. This avoids transmitting too many kb per render, and takes advantage of the browsers' cache.
  • Cache-Control Configuration: The served script now includes a Cache-Control header, enabling browsers to cache the script and request it only when the hash changes. This significantly reduces unnecessary script fetching, enhancing overall performance.
  • Gzip Compression: Additionally, I have implemented Gzip compression for the script, optimizing its size during transmission and further improving page load times.

These combined enhancements not only streamline the deployment process but also contribute to a more efficient and faster user experience by minimizing script retrieval and optimizing script delivery.

@danielart @amatiasq after gzip, Brisa client code is reduced from 5kb to 3kb, similar than preact but including signals (preact/signals is +2kb).

I also improve the build log table:

Screenshot 2024-01-13 at 13 22 32
  • The page with 3kb: use a web-component + brisa client code to run web-components and signals
  • The page with 186B: use only server code, but it's using suspense (needs 186B run replace during the streaming the placeholders to the real content).

Colors:

  • green 🟢 : if the client chunk is <= 70kb
  • yellow 🟡: if the client chunk is > 70kb and <= 100kb
  • red 🔴: if the client chunk is > 100kb

About brotli:

I would like to give it to Brotli, I will leave it for later as it is in Bun's plans, now I could do it with zlib but I prefer to wait.

@aralroca aralroca self-assigned this Jan 13, 2024
@aralroca aralroca merged commit 07028d7 into main Jan 13, 2024
1 check failed
@aralroca aralroca deleted the improve-build branch January 13, 2024 12:46
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

compress JS client code with gzip and use cache-control with a hash for each chunk
1 participant