Skip to content

perf: Content-hash the bundle assets and take the icons from their package - #903

Open
lfrancke wants to merge 3 commits into
mainfrom
perf/hashed-assets
Open

perf: Content-hash the bundle assets and take the icons from their package#903
lfrancke wants to merge 3 commits into
mainfrom
perf/hashed-assets

Conversation

@lfrancke

@lfrancke lfrancke commented Jul 28, 2026

Copy link
Copy Markdown
Member

Description

In earlier PRs I worked on PageSpeed where it complained about caching that isn't aggressive enough. We couldn't fully fix it then because our assets (JS, CSS etc.) all had static names (foo.css). So when we'd say "cache this for a day" we wouldn't see updates for a longish time.

This PR changes three things:

  • Assets (CSSs & JS) are now content-hashed (foo-.css) so every time we change the content the hash changes and therefore we can cache them for a long time. The partials keep referring to the unhashed names and are being rewritten.
  • In a recent PR we introduced an icons.svg file with just the icons from FontAwesome we actually use. This PR changes it again to generate that file dynamically as well
    • This should finally move all our dependencies into package.json and not be some special snowflake anymore
      *Preloads noto-sans-700 (Lighthouse showed it arriving late through the css chain on pages with bold text above the fold).

lfrancke added 3 commits July 28, 2026 14:48
…ckage

The css and js entry file names now carry a content hash: vite emits
hashed names, the mermaid dist entry gets a sha-based one (its chunks
are hashed upstream), and the partials referencing them are rewritten
from the manifest while being staged. That makes the files safely
cacheable forever, so the netlify rules serve css/js as immutable;
fonts and images keep stable names with moderate lifetimes. The rules
are non-overlapping on purpose: netlify applies every matching header
rule, and overlaps would emit duplicate Cache-Control.

The icon sprite is now generated at build time from the
@fortawesome/fontawesome-free package instead of vendored path data,
so the icons are version-managed like every other dependency. The
attribution comments carry the actual package version.
mermaid, pagefind, @asciidoctor/tabs, highlight.js, fontawesome and
fontsource each get consumed in a non-obvious way; the README now says
how and why, plus how the asset hashing works.
Lighthouse showed noto-sans-700 arriving late through the css chain on
pages that use bold text above the fold.
@netlify

netlify Bot commented Jul 28, 2026

Copy link
Copy Markdown

Deploy Preview for stackable-docs ready!

Name Link
🔨 Latest commit 4ac60cb
🔍 Latest deploy log https://app.netlify.com/projects/stackable-docs/deploys/6a68a54c6d19170008e9425a
😎 Deploy Preview https://deploy-preview-903--stackable-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@lfrancke lfrancke self-assigned this Jul 29, 2026
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.

1 participant