PoC: Vite plugin for build-time router optimization with PreparedRegExpRouter

[taku-hatano]

Hi team!

I built a PoC Vite plugin that replaces Hono's default router with a PreparedRegExpRouter at build time.

The full implementation and details are available in the README of my repository:
https://github.com/taku-hatano/hono-jsx-dom-with-vite

Bundle size comparison of dist/_worker.js from vite build:

	Bundle Size
Before	26.88 kB
After	19.71 kB

7.17 kB reduction (26.7%)

Note: benchmarks have not been conducted yet.

I hope this could be useful for the team.

[usualoma]

Hi @taku-hatano
Thank you.
You've got it! Now it's just a matter of how to wrap things up.

[yusukebe]

@taku-hatano

Awesome! I'll play it.

[L4Ph]

import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { buildInitParams, serializeInitParams } from "hono/router/reg-exp-router";
import { createServer, type Plugin } from "vite-plus";

const here = dirname(fileURLToPath(import.meta.url));
const backendDir = resolve(here, "..");
const entry = resolve(backendDir, "src/index.ts");
const outFile = resolve(backendDir, "src/generated/router-init.ts");

const cloudflareShim: Plugin = {
  name: "cloudflare-shim",
  resolveId(id) {
    if (id.startsWith("cloudflare:")) return `\0${id}`;
  },
  load(id) {
    if (!id.startsWith("\0cloudflare:")) return;
    return `
      export class DurableObject {
        constructor(state, env) { this.state = state; this.env = env; }
      }
      export class WorkerEntrypoint {}
      export class WorkflowEntrypoint {}
      export const env = {};
    `;
  },
};

async function generateRouterInit(): Promise<string> {
  const server = await createServer({
    configFile: false,
    root: backendDir,
    plugins: [cloudflareShim],
    server: { middlewareMode: true },
    appType: "custom",
    logLevel: "warn",
  });
  try {
    const mod = (await server.ssrLoadModule(entry)) as {
      app?: { routes: { path: string }[] };
    };
    if (!mod.app) throw new Error("backend/src/index.ts must named-export `app`");

    const paths = Array.from(new Set(mod.app.routes.map((r) => r.path)));
    const serialized = serializeInitParams(buildInitParams({ paths }));
    return `// Generated by vite-plugins/prepare-router.ts — do not edit by hand.
// @ts-nocheck
/* oxlint-disable */
import type { PreparedRegExpRouter } from "hono/router/reg-exp-router";

// prettier-ignore
export const routerParams: ConstructorParameters<typeof PreparedRegExpRouter> = ${serialized};
`;
  } finally {
    await server.close();
  }
}

function writeIfChanged(content: string): boolean {
  let prev: string | null = null;
  try {
    prev = readFileSync(outFile, "utf8");
  } catch {
    // file does not exist yet
  }
  if (prev === content) return false;
  mkdirSync(dirname(outFile), { recursive: true });
  writeFileSync(outFile, content);
  return true;
}

export function prepareRouterPlugin(): Plugin {
  return {
    name: "prepare-router",
    apply: "build",
    async buildStart() {
      const generated = await generateRouterInit();
      if (writeIfChanged(generated)) {
        this.info("[prepare-router] regenerated src/generated/router-init.ts");
      }
    },
  };
}

This was written rather haphazardly, but it works for now.

hono optimize didn't work with calls like import { DurableObject } from "cloudflare:workers";, so I've implemented a rather workaround.