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.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

vite.config.ts

@@ -1,6 +1,10 @@
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { lingui } from "@lingui/vite-plugin";
+import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { brotliCompressSync, constants as zlib, gzipSync } from "node:zlib";
+import linguiConfig from "./lingui.config.ts";
 
 const SITE_NAME = process.env.GERBEUR_SITE_NAME || "gerbeur";
 const SITE_EMOJI = process.env.GERBEUR_SITE_EMOJI || "🚚";
@@ -16,7 +20,77 @@ function emojiToCodepoint(emoji: string): string {
 }
 const ICON_VERSION = emojiToCodepoint(SITE_EMOJI);
 
+// The emoji picker (frimousse) reads emojibase-data from ${url}/${locale}/{data,messages}.json.
+// It is served from here rather than a CDN; the version is in the path so the
+// files can be cached for good, and bumping the package moves the URL.
+const EMOJIBASE_DIR = resolve("node_modules/emojibase-data");
+const EMOJIBASE_VERSION = JSON.parse(readFileSync(join(EMOJIBASE_DIR, "package.json"), "utf8")).version;
+const EMOJIBASE_URL = `/emojibase/${EMOJIBASE_VERSION}`;
+const EMOJIBASE_FILES = linguiConfig.locales.flatMap((locale) => [`${locale}/data.json`, `${locale}/messages.json`]);
+
+function emojibase(): Plugin {
+  return {
+    name: "emojibase",
+    configureServer(server) {
+      server.middlewares.use(EMOJIBASE_URL, (req, res, next) => {
+        const file = req.url?.split("?")[0].slice(1) ?? "";
+        if (!EMOJIBASE_FILES.includes(file)) return next();
+        res.setHeader("Content-Type", "application/json");
+        res.end(readFileSync(join(EMOJIBASE_DIR, file)));
+      });
+    },
+    generateBundle() {
+      for (const file of EMOJIBASE_FILES) {
+        this.emitFile({
+          type: "asset",
+          fileName: `${EMOJIBASE_URL.slice(1)}/${file}`,
+          source: readFileSync(join(EMOJIBASE_DIR, file)),
+        });
+      }
+    },
+  };
+}
+
+// Writes .br and .gz next to every compressible file in the build, which Oak's
+// send() serves in place of the original when the browser accepts them. The
+// server itself compresses nothing. index.html is left out: the server fills in
+// its placeholders at runtime (see api/lib/static.ts).
+const COMPRESSIBLE = /\.(js|css|json|svg|webmanifest)$/;
+function precompress(): Plugin {
+  let outDir = "";
+  return {
+    name: "precompress",
+    apply: "build",
+    configResolved(config) {
+      outDir = resolve(config.root, config.build.outDir);
+    },
+    closeBundle() {
+      const walk = (dir: string) => {
+        for (const name of readdirSync(dir)) {
+          const path = join(dir, name);
+          if (statSync(path).isDirectory()) walk(path);
+          else if (COMPRESSIBLE.test(name)) compress(path);
+        }
+      };
+      const compress = (path: string) => {
+        const raw = readFileSync(path);
+        if (raw.length < 1024) return;
+        const br = brotliCompressSync(raw, {
+          params: { [zlib.BROTLI_PARAM_QUALITY]: 11, [zlib.BROTLI_PARAM_SIZE_HINT]: raw.length },
+        });
+        const gz = gzipSync(raw, { level: 9 });
+        if (br.length < raw.length * 0.9) writeFileSync(`${path}.br`, br);
+        if (gz.length < raw.length * 0.9) writeFileSync(`${path}.gz`, gz);
+      };
+      walk(outDir);
+    },
+  };
+}
+
 export default defineConfig({
+  define: {
+    "import.meta.env.VITE_EMOJIBASE_URL": JSON.stringify(EMOJIBASE_URL),
+  },
   server: {
     port: 3000,
     watch: {
@@ -26,11 +100,12 @@ export default defineConfig({
   build: {
     rollupOptions: {
       output: {
+        // Only the framework, which every page needs and which changes least, gets
+        // a chunk of its own so it stays cached across deploys. Everything else is
+        // left to the bundler, so libraries only the lazy chunks use (the emoji
+        // picker, forms) stay out of the first load.
         manualChunks(id) {
-          if (id.includes("react-markdown") || id.includes("remark-gfm") || id.includes("remark-parse") || id.includes("mdast") || id.includes("micromark") || id.includes("unist")) {
-            return "vendor-markdown";
-          }
-          if (id.includes("node_modules")) {
+          if (/node_modules\/(react|react-dom|scheduler|react-router)\//.test(id)) {
             return "vendor";
           }
         },
@@ -54,6 +129,8 @@ export default defineConfig({
             : html,
       },
     },
+    emojibase(),
+    precompress(),
     lingui(),
     react({
       plugins: [["@lingui/swc-plugin", {}]],