mirror of
https://github.com/cloudflare/vinext.git
synced 2026-09-14 19:04:59 +08:00
301418a3f1
* 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>
193 lines
7.0 KiB
TypeScript
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);
|
|
});
|
|
});
|