-
Notifications
You must be signed in to change notification settings - Fork 12k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@angular-devkit/build-angular): switch to use Sass modern API
Sass modern API provides faster compilations times when used in an async manner. Users can temporary opt-out from using the modern API by setting `NG_BUILD_LEGACY_SASS` to `true` or `1`. Application compilation duration | Sass API and Compiler -- | -- 60852ms | dart-sass legacy sync API 52666ms | dart-sass modern API Note: https://github.com/johannesjo/super-productivity was used for benchmarking. Prior art: http://docs/document/d/1CvEceWMpBoEBd8SfvksGMdVHxaZMH93b0EGS3XbR3_Q?resourcekey=0-vFm-xMspT65FZLIyX7xWFQ
- Loading branch information
1 parent
88c3b71
commit c748753
Showing
8 changed files
with
646 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
250 changes: 250 additions & 0 deletions
250
packages/angular_devkit/build_angular/src/sass/legacy/sass-service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,250 @@ | ||
| /** | ||
| * @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 { | ||
| LegacyAsyncImporter as AsyncImporter, | ||
| LegacyResult as CompileResult, | ||
| LegacyException as Exception, | ||
| LegacyImporterResult as ImporterResult, | ||
| LegacyImporterThis as ImporterThis, | ||
| LegacyOptions as Options, | ||
| LegacySyncImporter as SyncImporter, | ||
| } from 'sass'; | ||
| import { MessageChannel, Worker } from 'worker_threads'; | ||
| import { maxWorkers } from '../../utils/environment-options'; | ||
|
|
||
| /** | ||
| * The maximum number of Workers that will be created to execute render requests. | ||
| */ | ||
| const MAX_RENDER_WORKERS = maxWorkers; | ||
|
|
||
| /** | ||
| * The callback type for the `dart-sass` asynchronous render function. | ||
| */ | ||
| type RenderCallback = (error?: Exception, result?: CompileResult) => void; | ||
|
|
||
| /** | ||
| * An object containing the contextual information for a specific render request. | ||
| */ | ||
| interface RenderRequest { | ||
| id: number; | ||
| workerIndex: number; | ||
| callback: RenderCallback; | ||
| importers?: (SyncImporter | AsyncImporter)[]; | ||
| } | ||
|
|
||
| /** | ||
| * A response from the Sass render Worker containing the result of the operation. | ||
| */ | ||
| interface RenderResponseMessage { | ||
| id: number; | ||
| error?: Exception; | ||
| result?: CompileResult; | ||
| } | ||
|
|
||
| /** | ||
| * A Sass renderer implementation that provides an interface that can be used by Webpack's | ||
| * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering | ||
| * with the `dart-sass` package. The `dart-sass` synchronous render function is used within | ||
| * the worker which can be up to two times faster than the asynchronous variant. | ||
| */ | ||
| export class SassWorkerImplementationLegacy { | ||
| 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. | ||
| * This mimics enough of the `dart-sass` value to be used with the `sass-loader`. | ||
| */ | ||
| get info(): string { | ||
| return 'dart-sass\tworker'; | ||
| } | ||
|
|
||
| /** | ||
| * The synchronous render function is not used by the `sass-loader`. | ||
| */ | ||
| renderSync(): never { | ||
| throw new Error('Sass renderSync is not supported.'); | ||
| } | ||
|
|
||
| /** | ||
| * Asynchronously request a Sass stylesheet to be renderered. | ||
| * | ||
| * @param options The `dart-sass` options to use when rendering the stylesheet. | ||
| * @param callback The function to execute when the rendering is complete. | ||
| */ | ||
| render(options: Options<'async'>, callback: RenderCallback): void { | ||
| // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred. | ||
| // If any additional function options are added in the future, they must be excluded as well. | ||
| const { functions, importer, logger, ...serializableOptions } = options; | ||
|
|
||
| // The CLI's configuration does not use or expose the ability to defined custom Sass functions | ||
| if (functions && Object.keys(functions).length > 0) { | ||
| throw new Error('Sass custom functions are not supported.'); | ||
| } | ||
|
|
||
| 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(workerIndex, callback, importer); | ||
| this.requests.set(request.id, request); | ||
|
|
||
| this.workers[workerIndex].postMessage({ | ||
| id: request.id, | ||
| hasImporter: !!importer, | ||
| options: serializableOptions, | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Shutdown the Sass render worker. | ||
| * Executing this method will stop any pending render requests. | ||
| */ | ||
| close(): void { | ||
| for (const worker of this.workers) { | ||
| try { | ||
| void worker.terminate(); | ||
| } catch {} | ||
| } | ||
| this.requests.clear(); | ||
| } | ||
|
|
||
| private createWorker(): Worker { | ||
| const { port1: mainImporterPort, port2: workerImporterPort } = new MessageChannel(); | ||
| const importerSignal = new Int32Array(new SharedArrayBuffer(4)); | ||
|
|
||
| const workerPath = require.resolve('./worker'); | ||
| const worker = new Worker(workerPath, { | ||
| workerData: { workerImporterPort, importerSignal }, | ||
| transferList: [workerImporterPort], | ||
| }); | ||
|
|
||
| worker.on('message', (response: RenderResponseMessage) => { | ||
| const request = this.requests.get(response.id); | ||
| if (!request) { | ||
| return; | ||
| } | ||
|
|
||
| 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 | ||
| // a Uint8Array that does not have the expected `toString` behavior of a `Buffer`. | ||
| const { css, map, stats } = response.result; | ||
| const result: CompileResult = { | ||
| // This `Buffer.from` override will use the memory directly and avoid making a copy | ||
| css: Buffer.from(css.buffer, css.byteOffset, css.byteLength), | ||
| stats, | ||
| }; | ||
| if (map) { | ||
| // This `Buffer.from` override will use the memory directly and avoid making a copy | ||
| result.map = Buffer.from(map.buffer, map.byteOffset, map.byteLength); | ||
| } | ||
| request.callback(undefined, result); | ||
| } else { | ||
| request.callback(response.error); | ||
| } | ||
| }); | ||
|
|
||
| mainImporterPort.on( | ||
| 'message', | ||
| ({ | ||
| id, | ||
| url, | ||
| prev, | ||
| fromImport, | ||
| }: { | ||
| id: number; | ||
| url: string; | ||
| prev: string; | ||
| fromImport: boolean; | ||
| }) => { | ||
| const request = this.requests.get(id); | ||
| if (!request?.importers) { | ||
| mainImporterPort.postMessage(null); | ||
| Atomics.store(importerSignal, 0, 1); | ||
| Atomics.notify(importerSignal, 0); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| this.processImporters(request.importers, url, prev, fromImport) | ||
| .then((result) => { | ||
| mainImporterPort.postMessage(result); | ||
| }) | ||
| .catch((error) => { | ||
| mainImporterPort.postMessage(error); | ||
| }) | ||
| .finally(() => { | ||
| Atomics.store(importerSignal, 0, 1); | ||
| Atomics.notify(importerSignal, 0); | ||
| }); | ||
| }, | ||
| ); | ||
|
|
||
| mainImporterPort.unref(); | ||
|
|
||
| return worker; | ||
| } | ||
|
|
||
| private async processImporters( | ||
| importers: Iterable<SyncImporter | AsyncImporter>, | ||
| url: string, | ||
| prev: string, | ||
| fromImport: boolean, | ||
| ): Promise<ImporterResult> { | ||
| let result = null; | ||
| for (const importer of importers) { | ||
| result = await new Promise<ImporterResult>((resolve) => { | ||
| // Importers can be both sync and async | ||
| const innerResult = (importer as AsyncImporter).call( | ||
| { fromImport } as ImporterThis, | ||
| url, | ||
| prev, | ||
| resolve, | ||
| ); | ||
| if (innerResult !== undefined) { | ||
| resolve(innerResult); | ||
| } | ||
| }); | ||
|
|
||
| if (result) { | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| return result; | ||
| } | ||
|
|
||
| private createRequest( | ||
| workerIndex: number, | ||
| callback: RenderCallback, | ||
| importer: SyncImporter | AsyncImporter | (SyncImporter | AsyncImporter)[] | undefined, | ||
| ): RenderRequest { | ||
| return { | ||
| id: this.idCounter++, | ||
| workerIndex, | ||
| callback, | ||
| importers: !importer || Array.isArray(importer) ? importer : [importer], | ||
| }; | ||
| } | ||
| } |
Oops, something went wrong.