Files
cloudflare__vinext/tests/app-route-module-loader.test.ts
T
Nathan Nguyen 301418a3f1 perf(app-router): defer layout, template and boundary modules to first request (#2145)
* perf(app-router): defer layout, template and boundary modules to first request

The generated RSC entry statically imported every route's layout, template,
loading/error/not-found/forbidden/unauthorized boundary and parallel-slot
module at the top level. On a cold isolate — and on the dev server's first
request — that eagerly evaluated the whole app's segment tree, including
routes never visited in that lifetime. Page and route-handler modules were
already lazy; the surrounding segment modules were not.

Emit those modules as lazy `() => import()` loaders paired with `null`
placeholders in the manifest, and hydrate them onto the route's synchronous
fields in `ensureAppRouteModulesLoaded` before any read (extended from
page/handler to layouts, templates, boundaries and parallel-slot modules).
Intercept layouts hydrate via the dedicated `loadAppInterceptLayouts` because
they live on the match object, not the route. Every reader already runs behind
`ensureAppRouteModulesLoaded` (handler dispatch and `buildPageElements`) or the
intercept resolvers, so no synchronous module field is read before hydration.

The shared intercept `interceptLayouts` arrays keep their `readonly` public
types; the loader is their sole writer and fills slots through one
boundary-local cast, so route metadata stays immutable to callers.

Dev cold start is unchanged on page-heavy apps — pages were already lazy — but
on a boundary-heavy app (80 independent sections, each with
layout+template+error+loading+not-found) first-request module compile drops
704ms -> 534ms (~24%) and time-to-first-200 1917ms -> 1665ms. The saving scales
with the number of unrelated segments deferred.

* test(app-router): localize react max header font fixture

* fix(app-router): dedupe lazy intercept module loads

* fix(app-router): share intercept load state across matches

* docs(app-router): explain root layout loader reuse

---------

Co-authored-by: James <james@eli.cx>
2026-06-19 14:49:29 +01:00

193 lines
7.0 KiB
TypeScript

import { describe, expect, it, vi } from "vitest";
import {
ensureAppRouteModulesLoaded,
loadAppInterceptLayouts,
type LazyLoadableRoute,
} from "../packages/vinext/src/server/app-route-module-loader.js";
describe("ensureAppRouteModulesLoaded", () => {
it("returns the route synchronously when there are no lazy thunks (eager route)", () => {
const pageModule = { default: () => null };
const route: LazyLoadableRoute = { page: pageModule };
const result = ensureAppRouteModulesLoaded(route);
// No promise — eager routes resolve synchronously.
expect(result).toBe(route);
expect(route.page).toBe(pageModule);
expect(route.__loaded).toBe(true);
});
it("hydrates a lazy page module onto route.page", async () => {
const pageModule = { default: () => null, generateMetadata: () => ({}) };
const __loadPage = vi.fn(async () => pageModule);
const route: LazyLoadableRoute = { page: null, __loadPage };
const loaded = await ensureAppRouteModulesLoaded(route);
expect(loaded).toBe(route);
expect(route.page).toBe(pageModule);
expect(route.routeHandler).toBeUndefined();
expect(__loadPage).toHaveBeenCalledTimes(1);
});
it("hydrates a lazy route-handler module onto route.routeHandler", async () => {
const handlerModule = { GET: () => new Response("ok") };
const __loadRouteHandler = vi.fn(async () => handlerModule);
const route: LazyLoadableRoute = { routeHandler: null, __loadRouteHandler };
await ensureAppRouteModulesLoaded(route);
expect(route.routeHandler).toBe(handlerModule);
});
it("loads both page and route handler in parallel", async () => {
const pageModule = { default: () => null };
const handlerModule = { POST: () => new Response() };
const route: LazyLoadableRoute = {
page: null,
routeHandler: null,
__loadPage: async () => pageModule,
__loadRouteHandler: async () => handlerModule,
};
await ensureAppRouteModulesLoaded(route);
expect(route.page).toBe(pageModule);
expect(route.routeHandler).toBe(handlerModule);
});
it("is idempotent: a second call does not re-import", async () => {
const pageModule = { default: () => null };
const __loadPage = vi.fn(async () => pageModule);
const route: LazyLoadableRoute = { page: null, __loadPage };
await ensureAppRouteModulesLoaded(route);
const second = ensureAppRouteModulesLoaded(route);
// Already loaded → returns the route synchronously (not a promise).
expect(second).toBe(route);
expect(__loadPage).toHaveBeenCalledTimes(1);
});
it("dedups concurrent calls into a single import", async () => {
let resolveImport: (mod: unknown) => void = () => {};
const importPromise = new Promise((resolve) => {
resolveImport = resolve;
});
const pageModule = { default: () => null };
const __loadPage = vi.fn(() => importPromise);
const route: LazyLoadableRoute = { page: null, __loadPage };
const a = ensureAppRouteModulesLoaded(route);
const b = ensureAppRouteModulesLoaded(route);
// Both callers observe the same in-flight promise.
expect(a).toBe(b);
resolveImport(pageModule);
await Promise.all([a, b]);
expect(__loadPage).toHaveBeenCalledTimes(1);
expect(route.page).toBe(pageModule);
});
it("does not cache a failed import: re-throws and retries on the next call", async () => {
const pageModule = { default: () => null };
const __loadPage = vi
.fn()
.mockRejectedValueOnce(new Error("chunk load failed"))
.mockResolvedValueOnce(pageModule);
const route: LazyLoadableRoute = { page: null, __loadPage };
// First call rejects and the rejection propagates to the caller.
await expect(ensureAppRouteModulesLoaded(route)).rejects.toThrow("chunk load failed");
// The failure is not stuck: state is reset for a retry.
expect(route.__loaded).toBeFalsy();
expect(route.__loading).toBeNull();
// Next call retries the import and succeeds.
await ensureAppRouteModulesLoaded(route);
expect(route.page).toBe(pageModule);
expect(__loadPage).toHaveBeenCalledTimes(2);
});
it("tolerates null / undefined routes", () => {
expect(ensureAppRouteModulesLoaded(null)).toBeNull();
expect(ensureAppRouteModulesLoaded(undefined)).toBeUndefined();
});
it("hydrates array module fields positionally, skipping null loaders and pre-filled slots", async () => {
const rootLayout = { default: () => null };
const childLayout = { default: () => null };
const eagerLayout = { default: () => null };
// Index 1 has a null loader (no module at that position); index 2 is already
// populated and must not be re-imported — mirrors the manifest emitting
// `[null, load_x]` plus an eagerly-set entry.
const __loadLayouts = [vi.fn(async () => rootLayout), null, vi.fn(async () => childLayout)];
const route: LazyLoadableRoute = {
layouts: [null, null, eagerLayout],
__loadLayouts,
};
await ensureAppRouteModulesLoaded(route);
expect(route.layouts).toEqual([rootLayout, null, eagerLayout]);
expect(__loadLayouts[0]).toHaveBeenCalledTimes(1);
expect(__loadLayouts[2]).not.toHaveBeenCalled();
});
it("ignores array loaders beyond the manifest placeholder length", async () => {
const layout = { default: () => null };
const outOfRangeLoader = vi.fn(async () => layout);
const route: LazyLoadableRoute = {
layouts: [null],
__loadLayouts: [null, outOfRangeLoader],
};
await ensureAppRouteModulesLoaded(route);
expect(route.layouts).toEqual([null]);
expect(outOfRangeLoader).not.toHaveBeenCalled();
});
it("hydrates parallel-slot modules onto each slot", async () => {
const slotPage = { default: () => null };
const slotLayout = { default: () => null };
const __loadPage = vi.fn(async () => slotPage);
const __loadLayout = vi.fn(async () => slotLayout);
const route: LazyLoadableRoute = {
slots: {
"@modal": { page: null, layout: null, __loadPage, __loadLayout },
},
};
await ensureAppRouteModulesLoaded(route);
expect(route.slots?.["@modal"].page).toBe(slotPage);
expect(route.slots?.["@modal"].layout).toBe(slotLayout);
});
});
describe("loadAppInterceptLayouts", () => {
it("hydrates intercept layouts from their loaders and returns the array", async () => {
const layoutA = { default: () => null };
const layoutB = { default: () => null };
const intercept = {
interceptLayouts: [null, null],
__loadInterceptLayouts: [async () => layoutA, async () => layoutB],
};
const result = await loadAppInterceptLayouts(intercept);
expect(intercept.interceptLayouts).toEqual([layoutA, layoutB]);
expect(result).toBe(intercept.interceptLayouts);
});
it("resolves synchronously to the existing array when there are no loaders", () => {
const intercept = { interceptLayouts: [] as unknown[] };
// No loaders → returns a resolved promise wrapping the same array, no imports.
return expect(loadAppInterceptLayouts(intercept)).resolves.toBe(intercept.interceptLayouts);
});
});