ClintchizandClaude Opus 5
361129b6ac
The runtime budgets measured raw source, which counts comments -- and the
production build minifies, so comments cost a visitor nothing. The metric
therefore rewarded deleting explanatory comments over writing smaller code,
and could not tell a real feature from a wall of prose.
They now measure the minified output, which is what is actually served:
/__wrnexus/reactive.js is its own file, minified, with an immutable year-long
cache. The reactive runtime is 69684 minified against a 80000 budget, from
175246 raw -- roughly 21kB gzipped, fetched once.
Also fixes two real bugs found while testing the showcase:
- object-valued props were serialised as a bare {...} attribute, which the
compiler read as interpolation and tried to parse as JavaScript. That
returned 500 for /components/navbar. Arrays start with [ and were never
affected, which is why only object props broke. All 108 pages now render.
- the runtime walked text nodes inside textarea, script and style, so a
JSON sample in a textarea was evaluated away.
Navbar styles move out of ui.css into the component, matching the rest of the
navigation group. No declarations changed: 4519 before and after.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
/**
|
|
* Report the minified size of each browser runtime, as JSON on stdout.
|
|
*
|
|
* Run under Bun because minifying is what the production build does, and this
|
|
* has to measure the same thing. The security audit runs under Node and shells
|
|
* out to this.
|
|
*
|
|
* Measuring the raw source instead would count comments, which the production
|
|
* minifier strips -- so they cost a visitor nothing while still consuming the
|
|
* budget. That made the old metric reward deleting explanatory comments over
|
|
* writing smaller code.
|
|
*/
|
|
import {
|
|
getReactiveRuntime,
|
|
getNavRuntime,
|
|
getRealtimeRuntime,
|
|
} from "../../packages/csr/src/index.ts";
|
|
|
|
const runtimes: Record<string, string> = {
|
|
"reactive-runtime.ts": getReactiveRuntime(),
|
|
"nav-runtime.ts": getNavRuntime(),
|
|
"realtime-runtime.ts": getRealtimeRuntime(),
|
|
};
|
|
|
|
const sizes: Record<string, number> = {};
|
|
|
|
for (const [name, source] of Object.entries(runtimes)) {
|
|
const built = await Bun.build({
|
|
// A blob entrypoint keeps this off the filesystem, so a failed run cannot
|
|
// leave scratch files behind in the repository.
|
|
entrypoints: ["runtime.js"],
|
|
target: "browser",
|
|
format: "esm",
|
|
minify: true,
|
|
plugins: [
|
|
{
|
|
name: "inline-runtime",
|
|
setup(build) {
|
|
build.onResolve({ filter: /^runtime\.js$/ }, () => ({
|
|
path: "runtime.js",
|
|
namespace: "inline",
|
|
}));
|
|
build.onLoad({ filter: /.*/, namespace: "inline" }, () => ({
|
|
contents: source,
|
|
loader: "js",
|
|
}));
|
|
},
|
|
},
|
|
],
|
|
});
|
|
if (!built.success || !built.outputs.length) {
|
|
throw new Error(`Failed to minify ${name}:\n${built.logs.map(String).join("\n")}`);
|
|
}
|
|
sizes[name] = (await built.outputs[0]!.text()).length;
|
|
}
|
|
|
|
process.stdout.write(JSON.stringify(sizes));
|