feat(builders): parallelize renders in prerender builder (#1396)

## Goal
Increase the performance of the prerender builder. I tested against 800 routes that each make a single http.get request and observed approximately a 5 times speedup.

## Child Process
We chose to fork child processes using the child_process API because:

We are not sure if these operations are thread safe
fork is used specifically to spawn new Node.js processes, which is our exact use case
Implementation
render.ts
This file is specifically designed to be called as a child process. It expects specific arguments to be passed and expects process.send to exist (which only happens when a parent process exists). The args that this file expects are:

indexHtml: The base html for rendering routes
serverBundlePath: The path to the server module bundle
browserOutputPath: The path to the browser builders output
allRoutes: The rest of the arguments passed are the routes to be rendered
index.ts
Calling _renderUniversal now forks child processes that run render.ts to render the routes in parallel.

There is an issue with forking processes within an angular builder where the parent process will exit before the child processes finish. This is likely because somewhere in our builder logic we call process.exit or something like that which kills the parent process early. To fix this issue, we wrap child processes in promises that resolve when the process finishes (either by exiting or erring).

## Tests
These changes completely break existing unit tests. Although helper functions such as getRange in render.ts can still be unit tested, integration tests should be what we really depend on. It might be worth it to move unit testable helper functions to a utils.ts file.

Author: wagnermaciel

modules/builders/src/prerender/index.ts

@@ -8,12 +8,13 @@
 
 import { BuilderContext, BuilderOutput, createBuilder, targetFromTargetString } from '@angular-devkit/architect';
 import { json } from '@angular-devkit/core';
-import { Buffer } from 'buffer';
+import { fork } from 'child_process';
+
 import * as fs from 'fs';
 import * as path from 'path';
 
 import { Schema } from './schema';
-import { getRoutes } from './utils';
+import { getRoutes, shardArray } from './utils';
 
 export type PrerenderBuilderOptions = Schema & json.JsonObject;
 
@@ -67,6 +68,38 @@ async function _scheduleBuilds(
   }
 }
 
+async function _parallelRenderRoutes(
+  shardedRoutes: string[][],
+  context: BuilderContext,
+  indexHtml: string,
+  outputPath: string,
+  serverBundlePath: string,
+  ): Promise<void> {
+  const workerFile = path.join(__dirname, 'render.js');
+  const childProcesses = shardedRoutes.map(routes =>
+    new Promise((resolve, reject) => {
+      fork(workerFile, [
+        indexHtml,
+        serverBundlePath,
+        outputPath,
+        ...routes,
+      ])
+        .on('message', data => {
+          if (data.success) {
+            context.logger.info(`CREATE ${data.outputIndexPath} (${data.bytes} bytes)`);
+          } else {
+            context.logger.error(`Error: ${data.error.message}`);
+            context.logger.error(`Unable to render ${data.outputIndexPath}`);
+          }
+        })
+        .on('exit', resolve)
+        .on('error', reject);
+    })
+  );
+
+  await Promise.all(childProcesses);
+}
+
 /**
  * Renders each route in options.routes and writes them to
  * <route>/index.html for each output path in the browser result.
@@ -76,91 +109,33 @@ async function _renderUniversal(
   context: BuilderContext,
   browserResult: BuildBuilderOutput,
   serverResult: BuildBuilderOutput,
+  numProcesses?: number,
 ): Promise<BuildBuilderOutput> {
   // We need to render the routes for each locale from the browser output.
   for (const outputPath of browserResult.outputPaths) {
-    const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
     const browserIndexOutputPath = path.join(outputPath, 'index.html');
     const indexHtml = fs.readFileSync(browserIndexOutputPath, 'utf8');
-    const { AppServerModuleDef, renderModuleFn } =
-      await _getServerModuleBundle(serverResult, localeDirectory);
 
-    context.logger.info(`\nPrerendering ${routes.length} route(s) to ${outputPath}`);
-
-    // Render each route and write them to <route>/index.html.
-    for (const route of routes) {
-      const renderOpts = {
-        document: indexHtml + '<!-- This page was prerendered with Angular Universal -->',
-        url: route,
-      };
-      const html = await renderModuleFn(AppServerModuleDef, renderOpts);
-
-      const outputFolderPath = path.join(outputPath, route);
-      const outputIndexPath = path.join(outputFolderPath, 'index.html');
-
-      // This case happens when we are prerendering "/".
-      if (browserIndexOutputPath === outputIndexPath) {
-        const browserIndexOutputPathOriginal = path.join(outputPath, 'index.original.html');
-        fs.writeFileSync(browserIndexOutputPathOriginal, indexHtml);
-      }
-
-      try {
-        fs.mkdirSync(outputFolderPath, { recursive: true });
-        fs.writeFileSync(outputIndexPath, html);
-        const bytes = Buffer.byteLength(html).toFixed(0);
-        context.logger.info(
-          `CREATE ${outputIndexPath} (${bytes} bytes)`
-        );
-      } catch {
-        context.logger.error(`Unable to render ${outputIndexPath}`);
-      }
+    const { baseOutputPath = '' } = serverResult;
+    const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
+    const serverBundlePath = path.join(baseOutputPath, localeDirectory, 'main.js');
+    if (!fs.existsSync(serverBundlePath)) {
+      throw new Error(`Could not find the main bundle: ${serverBundlePath}`);
     }
-  }
 
-  return browserResult;
-}
-
-/**
- * If the app module bundle path is not specified in options.appModuleBundle,
- * this method searches for what is usually the app module bundle file and
- * returns its server module bundle.
- *
- * Throws if no app module bundle is found.
- */
-async function _getServerModuleBundle(
-  serverResult: BuildBuilderOutput,
-  browserLocaleDirectory: string,
-) {
-  const { baseOutputPath = '' } = serverResult;
-  const serverBundlePath = path.join(baseOutputPath, browserLocaleDirectory, 'main.js');
-
-  if (!fs.existsSync(serverBundlePath)) {
-    throw new Error(`Could not find the main bundle: ${serverBundlePath}`);
-  }
+    const shardedRoutes = shardArray(routes, numProcesses);
+    context.logger.info(`\nPrerendering ${routes.length} route(s) to ${outputPath}`);
 
-  const {
-    AppServerModule,
-    AppServerModuleNgFactory,
-    renderModule,
-    renderModuleFactory,
-  } = await import(serverBundlePath);
-
-  if (renderModuleFactory && AppServerModuleNgFactory) {
-    // Happens when in ViewEngine mode.
-    return {
-      renderModuleFn: renderModuleFactory,
-      AppServerModuleDef: AppServerModuleNgFactory,
-    };
+    await _parallelRenderRoutes(
+      shardedRoutes,
+      context,
+      indexHtml,
+      outputPath,
+      serverBundlePath,
+    );
   }
 
-  if (renderModule && AppServerModule) {
-    // Happens when in Ivy mode.
-    return {
-      renderModuleFn: renderModule,
-      AppServerModuleDef: AppServerModule,
-    };
-  }
-  throw new Error(`renderModule method and/or AppServerModule were not exported from: ${serverBundlePath}.`);
+  return browserResult;
 }
 
 /**
@@ -182,7 +157,7 @@ export async function execute(
     return { success, error } as BuilderOutput;
   }
 
-  return _renderUniversal(routes, context, browserResult, serverResult);
+  return _renderUniversal(routes, context, browserResult, serverResult, options.numProcesses);
 }
 
 export default createBuilder(execute);

modules/builders/src/prerender/render.ts

@@ -0,0 +1,83 @@
+/**
+ * @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 * as fs from 'fs';
+import * as path from 'path';
+
+const [
+  indexHtml,
+  serverBundlePath,
+  browserOutputPath,
+  ...routes
+] = process.argv.slice(2);
+
+/**
+ * Handles importing the server bundle.
+ */
+async function getServerBundle(bundlePath: string) {
+  const {
+    AppServerModule,
+    AppServerModuleNgFactory,
+    renderModule,
+    renderModuleFactory,
+  } = await import(bundlePath);
+
+  if (renderModuleFactory && AppServerModuleNgFactory) {
+    // Happens when in ViewEngine mode.
+    return {
+      renderModuleFn: renderModuleFactory,
+      AppServerModuleDef: AppServerModuleNgFactory,
+    };
+  }
+
+  if (renderModule && AppServerModule) {
+    // Happens when in Ivy mode.
+    return {
+      renderModuleFn: renderModule,
+      AppServerModuleDef: AppServerModule,
+    };
+  }
+  throw new Error(`renderModule method and/or AppServerModule were not exported from: ${serverBundlePath}.`);
+}
+
+/**
+ * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
+ */
+(async () => {
+  const { renderModuleFn, AppServerModuleDef } = await getServerBundle(serverBundlePath);
+  const browserIndexOutputPath = path.join(browserOutputPath, 'index.html');
+  for (const route of routes) {
+    const renderOpts = {
+      document: indexHtml + '<!-- This page was prerendered with Angular Universal -->',
+      url: route,
+    };
+    const html = await renderModuleFn(AppServerModuleDef, renderOpts);
+
+    const outputFolderPath = path.join(browserOutputPath, route);
+    const outputIndexPath = path.join(outputFolderPath, 'index.html');
+
+    // This case happens when we are prerendering "/".
+    if (browserIndexOutputPath === outputIndexPath) {
+      const browserIndexOutputPathOriginal = path.join(browserOutputPath, 'index.original.html');
+      fs.writeFileSync(browserIndexOutputPathOriginal, indexHtml);
+    }
+
+    try {
+      fs.mkdirSync(outputFolderPath, { recursive: true });
+      fs.writeFileSync(outputIndexPath, html);
+      const bytes = Buffer.byteLength(html).toFixed(0);
+      if (process.send) {
+        process.send({ success: true, outputIndexPath, bytes });
+      }
+    } catch (e) {
+      if (process.send) {
+        process.send({ success: false, error: e, outputIndexPath });
+      }
+    }
+  }
+})().then().catch();

modules/builders/src/prerender/schema.json

@@ -26,6 +26,11 @@
         "uniqueItems": true
       },
       "default": []
+    },
+    "numProcesses": {
+      "type": "number",
+      "description": "The number of cpus to use. Defaults to all but one.",
+      "minimum": 1
     }
   },
   "required": [

modules/builders/src/prerender/schema.ts

@@ -11,6 +11,10 @@ export interface Schema {
    * Target to build.
    */
   browserTarget: string;
+  /**
+   * The number of cpus to use. Defaults to all but one.
+   */
+  numProcesses?: number;
   /**
    * The routes to render.
    */

modules/builders/src/prerender/utils.spec.ts

@@ -7,7 +7,7 @@
  */
 
 import * as fs from 'fs';
-import { getRoutes } from './utils';
+import { getRoutes, shardArray } from './utils';
 
 describe('Prerender Builder Utils', () => {
   describe('#getRoutes', () => {
@@ -35,4 +35,32 @@ describe('Prerender Builder Utils', () => {
       expect(routes).toEqual(['/route1', '/route2', '/route3']);
     });
   });
+
+  describe('#shardArray', () => {
+    const ARRAY = [0, 1, 2, 3, 4];
+    it('Should shard an array into numshards shards', () => {
+      const result1 = shardArray(ARRAY, 1);
+      const result2 = shardArray(ARRAY, 2);
+      const result3 = shardArray(ARRAY, 3);
+      const result4 = shardArray(ARRAY, 4);
+      const result5 = shardArray(ARRAY, 5);
+      expect(result1).toEqual([[0, 1, 2, 3, 4]]);
+      expect(result2).toEqual([[0, 2, 4], [1, 3]]);
+      expect(result3).toEqual([[0, 3], [1, 4], [2]]);
+      expect(result4).toEqual([[0, 4], [1], [2], [3]]);
+      expect(result5).toEqual([[0], [1], [2], [3], [4]]);
+    });
+
+    it('Should handle 0 or less numshards', () => {
+      const result1 = shardArray(ARRAY, 0);
+      const result2 = shardArray(ARRAY, -1);
+      expect(result1).toEqual([]);
+      expect(result2).toEqual([]);
+    });
+
+    it('Should not shard more than the total number of items in the array', () => {
+      const result = shardArray(ARRAY, 7);
+      expect(result).toEqual([[0], [1], [2], [3], [4]]);
+    });
+  });
 });

modules/builders/src/prerender/utils.ts

@@ -7,6 +7,7 @@
  */
 
 import * as fs from 'fs';
+import * as os from 'os';
 import * as path from 'path';
 
 /**
@@ -28,3 +29,19 @@ export function getRoutes(
 
   return [...new Set([...routesFileResult, ...routes])];
 }
+
+/**
+ * Evenly shards items in an array.
+ * e.g. shardArray([1, 2, 3, 4], 2) => [[1, 2], [3, 4]]
+ */
+export function shardArray<T>(items: T[], numProcesses: number = os.cpus().length - 1): T[][] {
+  const shardedArray = [];
+  const numShards = Math.min(numProcesses, items.length);
+  for (let i = 0; i < numShards; i++) {
+    shardedArray.push(
+      items.filter((_, index) => index % numShards === i)
+    );
+  }
+
+  return shardedArray;
+}