perf(@angular-devkit/build-angular): render Sass using a pool of workers

A pool of Workers is now used to process Sass render requests. This change allows multiple synchronous render operations to occur at the same time. Sass synchronous render operations can be up to two times faster than the asynchronous variant. The benefit will be most pronounced in applications with large amounts of Sass stylesheets.

Author: clydin

packages/angular_devkit/build_angular/src/sass/sass-service.ts

@@ -9,6 +9,11 @@
 import { Importer, ImporterReturnType, Options, Result, SassException } from 'sass';
 import { MessageChannel, Worker } from 'worker_threads';
 
+/**
+ * The maximum number of Workers that will be created to execute render requests.
+ */
+const MAX_RENDER_WORKERS = 4;
+
 /**
  * The callback type for the `dart-sass` asynchronous render function.
  */
@@ -19,6 +24,7 @@ type RenderCallback = (error?: SassException, result?: Result) => void;
  */
 interface RenderRequest {
   id: number;
+  workerIndex: number;
   callback: RenderCallback;
   importers?: Importer[];
 }
@@ -39,9 +45,11 @@ interface RenderResponseMessage {
  * the worker which can be up to two times faster than the asynchronous variant.
  */
 export class SassWorkerImplementation {
-  private worker?: Worker;
+  private readonly workers: Worker[] = [];
+  private readonly availableWorkers: number[] = [];
   private readonly requests = new Map<number, RenderRequest>();
   private idCounter = 1;
+  private nextWorkerIndex = 0;
 
   /**
    * Provides information about the Sass implementation.
@@ -74,14 +82,23 @@ export class SassWorkerImplementation {
       throw new Error('Sass custom functions are not supported.');
     }
 
-    if (!this.worker) {
-      this.worker = this.createWorker();
+    let workerIndex = this.availableWorkers.pop();
+    if (workerIndex === undefined) {
+      if (this.workers.length < MAX_RENDER_WORKERS) {
+        workerIndex = this.workers.length;
+        this.workers.push(this.createWorker());
+      } else {
+        workerIndex = this.nextWorkerIndex++;
+        if (this.nextWorkerIndex >= this.workers.length) {
+          this.nextWorkerIndex = 0;
+        }
+      }
     }
 
-    const request = this.createRequest(callback, importer);
+    const request = this.createRequest(workerIndex, callback, importer);
     this.requests.set(request.id, request);
 
-    this.worker.postMessage({
+    this.workers[workerIndex].postMessage({
       id: request.id,
       hasImporter: !!importer,
       options: serializableOptions,
@@ -96,7 +113,9 @@ export class SassWorkerImplementation {
    * is only needed if early cleanup is needed.
    */
   close(): void {
-    this.worker?.terminate();
+    for (const worker of this.workers) {
+      void worker.terminate();
+    }
     this.requests.clear();
   }
 
@@ -117,6 +136,7 @@ export class SassWorkerImplementation {
       }
 
       this.requests.delete(response.id);
+      this.availableWorkers.push(request.workerIndex);
 
       if (response.result) {
         // The results are expected to be Node.js `Buffer` objects but will each be transferred as
@@ -193,11 +213,13 @@ export class SassWorkerImplementation {
   }
 
   private createRequest(
+    workerIndex: number,
     callback: RenderCallback,
     importer: Importer | Importer[] | undefined,
   ): RenderRequest {
     return {
       id: this.idCounter++,
+      workerIndex,
       callback,
       importers: !importer || Array.isArray(importer) ? importer : [importer],
     };