perf(@angular-devkit/build-angular): patch fetch to load assets from memory

This commit refactors the assets SSG asset loading from memory to use a patched version of `fetch` instead of spawning a separate server.

(cherry picked from commit 68b6a57)

Author: alan-agius4

package.json

@@ -209,6 +209,7 @@
     "ts-node": "^10.9.1",
     "tslib": "2.6.2",
     "typescript": "5.2.2",
+    "undici": "5.27.0",
     "verdaccio": "5.27.0",
     "verdaccio-auth-memory": "^10.0.0",
     "vite": "4.5.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -201,6 +201,7 @@ ts_library(
         "@npm//tree-kill",
         "@npm//tslib",
         "@npm//typescript",
+        "@npm//undici",
         "@npm//vite",
         "@npm//webpack",
         "@npm//webpack-dev-middleware",

packages/angular_devkit/build_angular/package.json

@@ -64,6 +64,7 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
+    "undici": "5.27.0",
     "vite": "4.5.0",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",

packages/angular_devkit/build_angular/src/builders/prerender/routes-extractor-worker.ts

@@ -51,7 +51,7 @@ async function extract(): Promise<string[]> {
   );
 
   const routes: string[] = [];
-  for await (const { route, success } of extractRoutes(bootstrapAppFnOrModule, document, '')) {
+  for await (const { route, success } of extractRoutes(bootstrapAppFnOrModule, document)) {
     if (success) {
       routes.push(route);
     }

packages/angular_devkit/build_angular/src/utils/routes-extractor/extractor.ts

@@ -78,12 +78,11 @@ async function* getRoutesFromRouterConfig(
 export async function* extractRoutes(
   bootstrapAppFnOrModule: (() => Promise<ApplicationRef>) | Type<unknown>,
   document: string,
-  url: string,
 ): AsyncIterableIterator<RouterResult> {
   const platformRef = createPlatformFactory(platformCore, 'server', [
     {
       provide: INITIAL_CONFIG,
-      useValue: { document, url },
+      useValue: { document, url: '' },
     },
     {
       provide: ɵConsole,

packages/angular_devkit/build_angular/src/utils/server-rendering/fetch-patch.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { lookup as lookupMimeType } from 'mrmime';
+import { readFile } from 'node:fs/promises';
+import { extname } from 'node:path';
+import { workerData } from 'node:worker_threads';
+import { Response, fetch } from 'undici';
+
+/**
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { assetFiles } = workerData as {
+  assetFiles: Record</** Destination */ string, /** Source */ string>;
+};
+
+const assetsCache: Map<string, { headers: undefined | Record<string, string>; content: Buffer }> =
+  new Map();
+
+const RESOLVE_PROTOCOL = 'resolve:';
+
+export function patchFetchToLoadInMemoryAssets(): void {
+  const global = globalThis as unknown as { fetch: typeof fetch };
+  const originalFetch = global.fetch;
+  const patchedFetch: typeof fetch = async (input, init) => {
+    let url: URL;
+    if (input instanceof URL) {
+      url = input;
+    } else if (typeof input === 'string') {
+      url = new URL(input, RESOLVE_PROTOCOL + '//');
+    } else if (typeof input === 'object' && 'url' in input) {
+      url = new URL(input.url, RESOLVE_PROTOCOL + '//');
+    } else {
+      return originalFetch(input, init);
+    }
+
+    const { pathname, protocol } = url;
+
+    if (protocol !== RESOLVE_PROTOCOL || !assetFiles[pathname]) {
+      // Only handle relative requests or files that are in assets.
+      return originalFetch(input, init);
+    }
+
+    const cachedAsset = assetsCache.get(pathname);
+    if (cachedAsset) {
+      const { content, headers } = cachedAsset;
+
+      return new Response(content, {
+        headers,
+      });
+    }
+
+    const extension = extname(pathname);
+    const mimeType = lookupMimeType(extension);
+    const content = await readFile(assetFiles[pathname]);
+    const headers = mimeType
+      ? {
+          'Content-Type': mimeType,
+        }
+      : undefined;
+
+    assetsCache.set(pathname, { headers, content });
+
+    return new Response(content, {
+      headers,
+    });
+  };
+
+  global.fetch = patchedFetch;
+}