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

Copy link
Copy Markdown
Member

Description

Closes out the caching story from the perf batch, and removes the last dependency that did not live in package.json:

Content-hashed assets + immutable caching

  • The css and js entry files carry a content hash in their names (css/site-DYksAs3N.css, js/site-CeflqSYq.js, ...). Vite emits the hashed names; the mermaid dist entry gets a sha-based name (its chunks already carry upstream hashes); the hbs partials keep referencing unhashed names in the source and are rewritten from the build manifest while being staged.
  • netlify now serves /_/css/* and /_/js/* as immutable, max-age=1y; fonts (stable names, effectively never change) get a week, images a day. The rules are deliberately non-overlapping - netlify applies every matching header rule, so overlapping rules would emit duplicate Cache-Control headers.
  • This finishes the Lighthouse "efficient cache lifetimes" audit properly; the interim 1-hour TTL and its stale-asset window are gone.

Icons from their package

  • The icon sprite img/icons.svg is generated at build time from @fortawesome/fontawesome-free (new devDependency, 6.7.2) instead of vendored path data - the last piece of third-party code that was not version-managed via package.json. Attribution comments in the sprite and NOTICE now carry the actual package version. Note: 6.2.1 -> 6.7.2 may redraw individual glyphs subtly.

Docs

  • ui/README.adoc gains a "dependency special cases" section (mermaid verbatim-dist copy, pagefind living outside the bundle, tabs' explicit browser/style paths, highlight.js language curation, fontsource url alias) and an asset-caching section.

Also preloads noto-sans-700 (Lighthouse showed it arriving late through the css chain on pages with bold text above the fold).

Verification

Full local site build with the new bundle: 3,821 asset references across all pages checked, zero unresolved - every hashed reference in every rendered page points at an existing file, including the rewritten mermaid import and the generated sprite. Lint clean. Note for the deploy preview: sanity-check an icon (external-link arrow) and the search UI, since the sprite is now built from FA 6.7.2 artwork.

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.

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