perf: preload discovered client entries

Author: brookslybrand

app/controllers/blog/controller.test.ts

@@ -25,6 +25,9 @@ describe("Blog route", () => {
     );
     expect(html).toContain("Featured Articles");
     expect(html).toContain('action="/_actions/newsletter"');
+    expect(html).toContain(
+      '<link rel="modulepreload" href="/assets/app/assets/newsletter-subscribe.tsx"',
+    );
 
     let mainNavigation = html.match(/<nav aria-label="Main".*?<\/nav>/s)?.[0];
     if (!mainNavigation) throw new Error("Missing main navigation");

app/controllers/home/controller.test.ts

@@ -71,27 +71,21 @@ describe("home route", () => {
     expect(html).not.toContain('rel="stylesheet" href="/styles/app.css"');
     expect(html).not.toContain("fonts.googleapis.com");
     expect(html).not.toContain("fonts.gstatic.com");
-    expect(html).toContain(
-      '<link rel="modulepreload" href="/assets/app/assets/document-head-sync.tsx"',
-    );
-    expect(html).toContain(
-      '<link rel="modulepreload" href="/assets/app/assets/remix-landing/landing-enhancements.tsx"',
-    );
-    expect(html).toContain(
-      '<link rel="modulepreload" href="/assets/app/assets/remix-landing/components/feature-section.tsx"',
-    );
-    expect(html).toContain(
-      '<link rel="modulepreload" href="/assets/app/assets/remix-landing/components/particle-canvas.tsx"',
-    );
-    expect(html).not.toContain(
-      '<link rel="modulepreload" href="/assets/app/assets/fps-counter.tsx"',
+    let modulePreloads = [
+      ...html.matchAll(/<link rel="modulepreload" href="([^"]+)"/g),
+    ].map((match) => match[1]);
+    let bootstrapSrc = html.match(
+      /<script type="module" async src="([^"]+)"/,
+    )?.[1];
+
+    expect(modulePreloads).toContain(
+      "/assets/app/assets/remix-landing/landing-enhancements.tsx",
     );
-    expect(
-      html.indexOf("/assets/app/assets/remix-landing/landing-enhancements.tsx"),
-    ).toBeLessThan(html.indexOf("/assets/app/assets/fathom.ts"));
-    expect(html).toContain(
-      '<script type="module" async src="/assets/app/assets/entry.ts"',
+    expect(modulePreloads).toContain(
+      "/assets/app/assets/fps-counter-toggle.tsx",
     );
+    expect(modulePreloads).not.toContain("/assets/app/assets/fps-counter.tsx");
+    expect(bootstrapSrc).toBe("/assets/app/assets/entry.ts");
 
     expect(html).toMatch(/class="loading-screen-overlay\b/);
     expect(html).not.toContain("@keyframes loading-screen-dismiss");

app/controllers/home/controller.tsx

@@ -1,14 +1,10 @@
 import { routes } from "../../routes.ts";
 import { assetPaths } from "../../utils/asset-paths.ts";
 import { CACHE_CONTROL } from "../../utils/cache-control.ts";
-import { preloadAssetEntries } from "../../middleware/asset-entry.ts";
 import type { AppContext } from "../../middleware/render.ts";
-import { HomePage, homeBrowserEntries } from "./page.tsx";
-
-export async function homeHandler(context: AppContext) {
-  let { render, request } = context;
-  await preloadAssetEntries(context.assetEntry, homeBrowserEntries);
+import { HomePage } from "./page.tsx";
 
+export async function homeHandler({ render, request }: AppContext) {
   let requestUrl = new URL(request.url);
   let pageUrl = `${requestUrl.origin}${routes.home.href()}`;
   let previewImage = `${requestUrl.origin}${assetPaths.marketing.defaultOgImage}`;

app/controllers/home/page.tsx

@@ -1,7 +1,6 @@
 import { css, type Handle } from "remix/ui";
 import { FpsCounterToggle } from "../../assets/fps-counter-toggle.tsx";
 import { RemixLandingEnhancements } from "../../assets/remix-landing/landing-enhancements.tsx";
-import { LandingNewsletterSubscribeForm } from "../../assets/remix-landing/components/feature-section.tsx";
 import { LoadingScreen } from "../../assets/remix-landing/components/loading-screen.tsx";
 import { RUNNER_AVIF_SRC } from "../../assets/remix-landing/runner-media.ts";
 import { colors } from "../../assets/remix-landing/styles/tokens.ts";
@@ -18,14 +17,6 @@ const HOME_TITLE = "Remix - A Web Framework for Building Anything";
 const HOME_DESCRIPTION =
   "Remix is a batteries-included, ultra-productive, zero dependencies and bundler-free framework, ready to develop with in a agent-first world.";
 
-// Preload the hydration roots needed for the initial experience and let the
-// asset server follow their imports. The FPS counter stays out of this graph so
-// its event-triggered dynamic import remains lazy.
-export let homeBrowserEntries = [
-  RemixLandingEnhancements.$entryId,
-  LandingNewsletterSubscribeForm.$entryId,
-];
-
 export function HomePage(handle: Handle<HomePageProps>) {
   return () => (
     <Document

app/middleware/asset-entry.ts

@@ -4,13 +4,11 @@ import {
   type Middleware,
   type RequestContext,
 } from "remix/router";
-import { DocumentHeadSync } from "../assets/document-head-sync.tsx";
 import { assetServer } from "../utils/assets.server.ts";
 
 export interface AssetEntry {
-  sourceEntries: string[];
+  source: string;
   src: string;
-  preloads: string[];
 }
 
 export let assetEntryContext = createContextKey<AssetEntry>();
@@ -26,38 +24,20 @@ export function loadAssetEntry(
   entry = defaultEntry,
 ): Middleware<AssetEntryContextEntry> {
   return async (context, next) => {
-    let entries = [entry, DocumentHeadSync.$entryId];
-    let [src, preloads] = await Promise.all([
-      assetServer.getHref(entry),
-      assetServer.getPreloads(entries),
-    ]);
+    let src = await assetServer.getHref(entry);
 
     context.set(
       assetEntryContext,
       {
-        sourceEntries: entries,
+        source: entry,
         src,
-        preloads: preloads.filter((href) => href !== src),
       },
       { property: "assetEntry" },
     );
     return next();
   };
 }
 
-export async function preloadAssetEntries(
-  assetEntry: AssetEntry,
-  entries: readonly string[],
-) {
-  // Resolve one graph so Remix can keep every root ahead of deeper imports.
-  assetEntry.sourceEntries = [
-    ...new Set([...assetEntry.sourceEntries, ...entries]),
-  ];
-  assetEntry.preloads = (
-    await assetServer.getPreloads(assetEntry.sourceEntries)
-  ).filter((href) => href !== assetEntry.src);
-}
-
 export function setAssetEntry(context: RequestContext, assetEntry: AssetEntry) {
   context.set(assetEntryContext, assetEntry, { property: "assetEntry" });
 }