v3: the frontend ships compressed, caches for good, and stops reaching for other people's servers — a review of the bundle's size found the server was the biggest cost. Oak's send() compressed nothing and sent every hashed chunk with max-age=0, so a first visit to the home page moved about 710 KB of JS and CSS where 200 KB would do, and every later one revalidated some thirty files. The build now writes .br and .gz next to every JS, CSS, JSON and SVG file (a precompress plugin, brotli 11), which send() already serves when the browser accepts them; /assets and /emojibase are cached for a year as immutable, index.html is no-cache, and static responses carry Vary: Accept-Encoding. A missing file under either prefix is a 404 rather than index.html with a 200, which an open tab after a deploy used to try to run as a script; the app now reloads on vite:preloadError, at most once a minute. manualChunks sent everything in node_modules to one vendor chunk, so react-hook-form and frimousse loaded with every page though only the lazy form and editor chunks use them, and its markdown rule missed hast, vfile, unified and property-information while every feed loads Markdown through DumpCard anyway; only react, react-dom, scheduler and react-router get a chunk of their own now, the rest is left to the bundler. Up-front JS goes from 133 to 96 KB gzip, the home page from 178 to 160. Fonts: index.html blocked rendering on a Google Fonts stylesheet, opening two more hosts and handing each visitor's IP to Google; they come from @fontsource now, with src/fonts.css declaring only the latin and latin-ext faces (the packages' own CSS declares every subset, which added 6 KB gzip to the stylesheet), so Vite hashes the woff2 files into /assets and a browser still only downloads its theme's font. The families are the variable builds ("Saira Variable" and so on); Fraunces keeps its opsz, SOFT and WONK axes. Emoji: frimousse fetched emojibase-data@latest from jsDelivr, unpinned and third-party; emojibase-data 17.0.0 is a dependency now, its data and messages for each lingui locale are emitted under /emojibase/17.0.0 (served from node_modules in dev), and the picker is pointed there.
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 45s

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-27 11:44:08 +00:00
parent bf28e49c34
commit 16b510764c
12 changed files with 330 additions and 14 deletions

View File

@@ -16,9 +16,16 @@ async function serveIndexHtml(
.replaceAll("__ICON_VERSION__", ICON_VERSION)
.replaceAll("__BANDCAMP_PLAYER__", BANDCAMP_PLAYER);
context.response.type = "text/html";
// Always revalidated: it names the hashed chunks of the current build.
context.response.headers.set("Cache-Control", "no-cache");
context.response.body = html;
}
// Build output whose URL changes whenever its content does: Vite's hashed
// chunks, and the emoji data under its package version (see vite.config.ts).
const IMMUTABLE_PREFIXES = ["/assets/", "/emojibase/"];
const ONE_YEAR_MS = 365 * 24 * 60 * 60 * 1000;
export function routeStaticFilesFrom(staticPaths: string[]) {
return async (context: Context<Record<string, object>>, next: Next) => {
const pathname = context.request.url.pathname;
@@ -29,15 +36,30 @@ export function routeStaticFilesFrom(staticPaths: string[]) {
return;
}
const immutable = IMMUTABLE_PREFIXES.some((prefix) =>
pathname.startsWith(prefix)
);
for (const path of staticPaths) {
try {
await send(context, pathname, { root: path });
// send() picks a prebuilt .br or .gz sibling when the browser accepts it.
await send(context, pathname, {
root: path,
...(immutable && { maxage: ONE_YEAR_MS, immutable: true }),
});
context.response.headers.append("Vary", "Accept-Encoding");
return;
} catch {
continue;
}
}
// A chunk from an older build (an open tab after a deploy) must fail as a
// 404, not load index.html as a script; the app reloads on that failure.
if (immutable) {
context.response.status = 404;
return;
}
// SPA fallback: serve index.html so client-side routes work on direct navigation
await serveIndexHtml(context, staticPaths[0]);
await next();