perf(@angular/build): share i18n translations with the inliner workers by reference

`inlineForLocale` passes the locale's translations to `workerPool.run()` once per file, so every
request structure-clones the whole set of messages into a Worker. For an application with a few
thousand localized chunks and a catalog of tens of thousands of messages, that is tens of
gigabytes of short-lived allocation and minutes of serialization on the builder's main thread.
Because each clone is several megabytes it lands in V8's large object space, where only a major
collection reclaims it, so a build with a heap ceiling sized for the machine can exhaust the
machine before the collector intervenes.

The messages are now serialized once per locale and passed as a Blob. Cloning a Blob shares its
data by reference, which is the same reason the application files are already passed that way.
Each Worker deserializes the messages once per locale and retains only the active locale, so at
most one set of messages is held per Worker.

`node:v8` serialization is used rather than JSON so that the messages arrive in the Worker
exactly as the structured clone delivered them today. `translate` only reads from the messages,
so sharing one deserialized set across the files of a locale is safe.

Measured on an application with 1,721 localized chunks across 9 locales, where the largest
catalog serializes to 6.0MB: inlining 400 chunks across 4 locales went from 23,679ms and 14,504MB
peak RSS to 915ms and 1,118MB, with byte-identical output.

(cherry picked from commit 596847f)

Author: mattlewis92

packages/angular/build/src/tools/esbuild/i18n-inliner-worker.ts

@@ -9,6 +9,7 @@
 import remapping, { type EncodedSourceMap, type SourceMapInput } from '@ampproject/remapping';
 import { MagicString } from 'magic-string';
 import assert from 'node:assert';
+import { deserialize } from 'node:v8';
 import { workerData } from 'node:worker_threads';
 import { Visitor, parseSync } from 'oxc-parser';
 
@@ -28,9 +29,11 @@ interface InlineFileRequest {
   locale: string;
 
   /**
-   * The translation messages for the locale that should be used during the inlining process of the file.
+   * The serialized translation messages for the locale that should be used during the inlining
+   * process of the file. A Blob is used so that the messages are shared with the Worker by
+   * reference instead of being copied into it for every request.
    */
-  translation?: Record<string, unknown>;
+  translation?: Blob;
 }
 
 /**
@@ -53,19 +56,55 @@ interface InlineCodeRequest {
   locale: string;
 
   /**
-   * The translation messages for the locale that should be used during the inlining process of the file.
+   * The serialized translation messages for the locale that should be used during the inlining
+   * process of the file. A Blob is used so that the messages are shared with the Worker by
+   * reference instead of being copied into it for every request.
    */
-  translation?: Record<string, unknown>;
+  translation?: Blob;
 }
 
 // Extract the application files and common options used for inline requests from the Worker context
-// TODO: Evaluate overall performance difference of passing translations here as well
 const { files, missingTranslation, shouldOptimize } = (workerData || {}) as {
   files: ReadonlyMap<string, Blob>;
   missingTranslation: 'error' | 'warning' | 'ignore';
   shouldOptimize: boolean;
 };
 
+/**
+ * The translation messages deserialized for the locale most recently requested of this Worker.
+ * Locales are inlined one at a time, so retaining only the active locale is enough to avoid
+ * deserializing the messages once per file while holding at most one set of messages in memory.
+ */
+let activeTranslation: { locale: string; messages: Promise<Record<string, unknown>> } | undefined;
+
+/**
+ * Deserializes the translation messages for an inline request, reusing the result for any
+ * subsequent request that targets the same locale.
+ * @param request An inline request containing the locale and its serialized messages.
+ * @returns The translation messages, or undefined if the locale has no translations.
+ */
+function loadTranslation(
+  request: InlineFileRequest | InlineCodeRequest,
+): Promise<Record<string, unknown>> | undefined {
+  const { locale, translation } = request;
+  if (!translation) {
+    return undefined;
+  }
+
+  if (activeTranslation?.locale !== locale) {
+    activeTranslation = {
+      locale,
+      // Deserializing within the stored promise ensures that concurrent requests for a locale
+      // share the one deserialization instead of each performing their own.
+      messages: translation
+        .arrayBuffer()
+        .then((buffer) => deserialize(new Uint8Array(buffer)) as Record<string, unknown>),
+    };
+  }
+
+  return activeTranslation.messages;
+}
+
 /**
  * Inlines the provided locale and translation into a JavaScript file that contains `$localize` usage.
  * This function is the main entry for the Worker's action that is called by the worker pool.
@@ -80,7 +119,12 @@ export default async function inlineFile(request: InlineFileRequest) {
 
   const code = await data.text();
   const map = await files.get(request.filename + '.map')?.text();
-  const result = await transformWithOxc(code, map && (JSON.parse(map) as SourceMapInput), request);
+  const result = await transformWithOxc(
+    code,
+    map && (JSON.parse(map) as SourceMapInput),
+    request,
+    await loadTranslation(request),
+  );
 
   return {
     file: request.filename,
@@ -98,7 +142,12 @@ export default async function inlineFile(request: InlineFileRequest) {
  * @returns An object containing the inlined code.
  */
 export async function inlineCode(request: InlineCodeRequest) {
-  const result = await transformWithOxc(request.code, undefined, request);
+  const result = await transformWithOxc(
+    request.code,
+    undefined,
+    request,
+    await loadTranslation(request),
+  );
 
   return {
     output: result.code,
@@ -136,12 +185,14 @@ async function loadLocalizeTools(): Promise<LocalizeUtilityModule> {
  * @param code A string containing the JavaScript code to transform.
  * @param map A sourcemap object for the provided JavaScript code.
  * @param options The inline request options to use.
+ * @param translation The translation messages to inline, or undefined for an untranslated locale.
  * @returns An object containing the code, map, and diagnostics from the transformation.
  */
 async function transformWithOxc(
   code: string,
   map: SourceMapInput | undefined,
   options: InlineFileRequest,
+  translation: Record<string, unknown> | undefined,
 ) {
   const { program } = parseSync(options.filename, code, {
     sourceType: 'unambiguous',
@@ -169,10 +220,10 @@ async function transformWithOxc(
 
         const [translatedParts, translatedSubstitutions] = translate(
           diagnostics,
-          options.translation || {},
+          translation || {},
           messageParts,
           node.quasi.expressions.map((_, index) => index),
-          options.translation === undefined ? 'ignore' : missingTranslation,
+          translation === undefined ? 'ignore' : missingTranslation,
         );
 
         // Reconstruct the new template/string literal replacement

packages/angular/build/src/tools/esbuild/i18n-inliner.ts

@@ -9,6 +9,7 @@
 import assert from 'node:assert';
 import { createHash } from 'node:crypto';
 import { extname, join } from 'node:path';
+import { serialize } from 'node:v8';
 import { WorkerPool } from '../../utils/worker-pool';
 import { type BuildOutputFile, BuildOutputFileType, createOutputFile } from './bundler-files';
 import { type PersistentCacheStore, createPersistentCacheStore } from './cache';
@@ -19,6 +20,20 @@ import { type PersistentCacheStore, createPersistentCacheStore } from './cache';
  */
 const LOCALIZE_KEYWORD = '$localize';
 
+/**
+ * Serializes the translation messages for a locale for transfer to an inliner Worker.
+ *
+ * A Blob is used because cloning one shares its data by reference, whereas sending the messages
+ * themselves copies them into a Worker for every request that carries them. A locale can contain
+ * tens of thousands of messages, which makes that copy the dominant cost of inlining a locale.
+ *
+ * @param translation The translation messages for a locale, if the locale has any.
+ * @returns A Blob containing the serialized messages, or undefined if the locale has none.
+ */
+function serializeTranslation(translation: Record<string, unknown> | undefined): Blob | undefined {
+  return translation && new Blob([serialize(translation)]);
+}
+
 /**
  * Inlining options that should apply to all transformed code.
  */
@@ -125,6 +140,10 @@ export class I18nInliner {
     await this.initCache();
 
     const { shouldOptimize, missingTranslation } = this.options;
+
+    // Serialized once here and then shared by the request for every file of this locale
+    const translationBlob = serializeTranslation(translation);
+
     // Request inlining for each file that contains localize calls
     const requests = [];
 
@@ -160,7 +179,11 @@ export class I18nInliner {
           return cachedResult;
         }
 
-        const result = await this.#workerPool.run({ filename, locale, translation });
+        const result = await this.#workerPool.run({
+          filename,
+          locale,
+          translation: translationBlob,
+        });
         if (this.#cache && cacheKey) {
           try {
             // Failure to set the value should not fail the transform
@@ -227,7 +250,12 @@ export class I18nInliner {
     }
 
     const { output, messages } = await this.#workerPool.run(
-      { code: templateCode, filename: templateId, locale, translation },
+      {
+        code: templateCode,
+        filename: templateId,
+        locale,
+        translation: serializeTranslation(translation),
+      },
       { name: 'inlineCode' },
     );