-
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.
fix(@angular-devkit/build-angular): support WASM-based esbuild optimi…
…zer fallback In the event that the Angular CLI is executed on a platform that does not yet have native support for esbuild, the WASM-based variant of esbuild will now be used. If the first attempt to optimize a file fails to execute the native variant of esbuild, future executions will instead use the WASM-based variant instead which will execute regardless of the native platform. The WASM-based variant, unfortunately, can be significantly slower than the native version (some cases can be several times slower). For install time concerns regarding the esbuild post-install step, esbuild is now listed as an optional dependency which will allow the post-install step to fail but allow the full npm install to pass. This install scenario should only occur in the event that the esbuild native binary cannot be installed or is otherwise unavailable.
- Loading branch information
Showing
10 changed files
with
348 additions
and
67 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
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,16 @@ | ||
/** | ||
* @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 | ||
*/ | ||
|
||
// If the platform does not support the native variant of esbuild, this will crash. | ||
// This script can then be spawned by the CLI to determine if native usage is supported. | ||
require('esbuild') | ||
.formatMessages([], { kind: 'error ' }) | ||
.then( | ||
() => {}, | ||
() => {}, | ||
); |
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
131 changes: 131 additions & 0 deletions
131
packages/angular_devkit/build_angular/src/webpack/plugins/esbuild-executor.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,131 @@ | ||
/** | ||
* @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 { spawnSync } from 'child_process'; | ||
import type { | ||
FormatMessagesOptions, | ||
PartialMessage, | ||
TransformOptions, | ||
TransformResult, | ||
} from 'esbuild'; | ||
import * as path from 'path'; | ||
|
||
/** | ||
* Provides the ability to execute esbuild regardless of the current platform's support | ||
* for using the native variant of esbuild. The native variant will be preferred (assuming | ||
* the `usingWasm` constructor option is `false) due to its inherent performance advantages. | ||
* At first use of esbuild, a supportability test will be automatically performed and the | ||
* WASM-variant will be used if needed by the platform. | ||
*/ | ||
export class EsbuildExecutor | ||
implements Pick<typeof import('esbuild'), 'transform' | 'formatMessages'> | ||
{ | ||
private esbuildTransform: this['transform']; | ||
private esbuildFormatMessages: this['formatMessages']; | ||
private initialized = false; | ||
|
||
/** | ||
* Constructs an instance of the `EsbuildExecutor` class. | ||
* | ||
* @param usingWasm If true, the WASM-variant will be preferred and no support test will be | ||
* performed; if false (default), the native variant will be preferred. | ||
*/ | ||
constructor(private usingWasm = false) { | ||
this.esbuildTransform = this.esbuildFormatMessages = () => { | ||
throw new Error('esbuild implementation missing'); | ||
}; | ||
} | ||
|
||
/** | ||
* Determines whether the native variant of esbuild can be used on the current platform. | ||
* | ||
* @returns True, if the native variant of esbuild is support; False, if the WASM variant is required. | ||
*/ | ||
static hasNativeSupport(): boolean { | ||
// Try to use native variant to ensure it is functional for the platform. | ||
// Spawning a separate esbuild check process is used to determine if the native | ||
// variant is viable. If check fails, the WASM variant is initialized instead. | ||
// Attempting to call one of the native esbuild functions is not a viable test | ||
// currently since esbuild spawn errors are currently not propagated through the | ||
// call stack for the esbuild function. If this limitation is removed in the future | ||
// then the separate process spawn check can be removed in favor of a direct function | ||
// call check. | ||
try { | ||
const { status, error } = spawnSync(process.execPath, [ | ||
path.join(__dirname, '../../../esbuild-check.js'), | ||
]); | ||
|
||
return status === 0 && error === undefined; | ||
} catch { | ||
return false; | ||
} | ||
} | ||
|
||
/** | ||
* Initializes the esbuild transform and format messages functions. | ||
* | ||
* @returns A promise that fulfills when esbuild has been loaded and available for use. | ||
*/ | ||
private async ensureEsbuild(): Promise<void> { | ||
if (this.initialized) { | ||
return; | ||
} | ||
|
||
// If the WASM variant was preferred at class construction or native is not supported, use WASM | ||
if (this.usingWasm || !EsbuildExecutor.hasNativeSupport()) { | ||
await this.useWasm(); | ||
this.initialized = true; | ||
|
||
return; | ||
} | ||
|
||
try { | ||
// Use the faster native variant if available. | ||
const { transform, formatMessages } = await import('esbuild'); | ||
|
||
this.esbuildTransform = transform; | ||
this.esbuildFormatMessages = formatMessages; | ||
} catch { | ||
// If the native variant is not installed then use the WASM-based variant | ||
await this.useWasm(); | ||
} | ||
|
||
this.initialized = true; | ||
} | ||
|
||
/** | ||
* Transitions an executor instance to use the WASM-variant of esbuild. | ||
*/ | ||
private async useWasm(): Promise<void> { | ||
const { transform, formatMessages } = await import('esbuild-wasm'); | ||
this.esbuildTransform = transform; | ||
this.esbuildFormatMessages = formatMessages; | ||
|
||
// The ESBUILD_BINARY_PATH environment variable cannot exist when attempting to use the | ||
// WASM variant. If it is then the binary located at the specified path will be used instead | ||
// of the WASM variant. | ||
delete process.env.ESBUILD_BINARY_PATH; | ||
|
||
this.usingWasm = true; | ||
} | ||
|
||
async transform(input: string, options?: TransformOptions): Promise<TransformResult> { | ||
await this.ensureEsbuild(); | ||
|
||
return this.esbuildTransform(input, options); | ||
} | ||
|
||
async formatMessages( | ||
messages: PartialMessage[], | ||
options: FormatMessagesOptions, | ||
): Promise<string[]> { | ||
await this.ensureEsbuild(); | ||
|
||
return this.esbuildFormatMessages(messages, options); | ||
} | ||
} |
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
Oops, something went wrong.