perf(@angular/build): use direct transpilation with isolated modules #27752
Conversation
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
eneajaho
reviewed
May 30, 2024
packages/angular/build/src/tools/esbuild/angular/compilation/aot-compilation.ts
Outdated
Show resolved
Hide resolved
clydin
force-pushed
the
application/angular-direct-transpile
branch
3 times, most recently
from
3ee9073
to
ea8e2fc
Compare
JoostK
reviewed
May 30, 2024
packages/angular/build/src/tools/esbuild/angular/compilation/aot-compilation.ts
Show resolved
Hide resolved
clydin
force-pushed
the
application/angular-direct-transpile
branch
3 times, most recently
from
7e58dfd
to
28e5eb5
Compare
When using the application builder and the TypeScript `isolatedModules` option is enabled and script sourcemaps are disabled, TypeScript code will be transpiled via the bundler instead of the current behavior of using TypeScript. The use of the `isolatedModules` option ensures that TypeScript code can be safely transpiled without the need for the type-checker. This mode of operation has several advantages. The bundler (esbuild in this case) will know have knowledge of the TypeScript code constructs, such as enums, and can optimize the output code based on that knowledge including inlining both const and regular enums where possible. Additionally, this allows for the removal of the babel-based optimization passes for all TypeScript code. These passes are still present for all JavaScript code such as from third-party libraries/packages. These advantages lead to an improvement in build time, especially in production configurations. To ensure optimal output code size in this setup, the `useDefineForClassFields` TypeScript option should either be removed or set to `true` which enables ECMAScript standard compliant behavior. Initial testing reduced a warm production build of a newly generated project from ~2.3 seconds to ~2.0 seconds.
clydin
force-pushed
the
application/angular-direct-transpile
branch
from
28e5eb5
to
5bb936c
Compare
clydin
added
the
action: review
alan-agius4
added
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When using the application builder and the TypeScript
isolatedModulesoption is enabled and script sourcemaps are disabled, TypeScript code will be transpiled via the bundler instead of the current behavior of using TypeScript. The use of theisolatedModulesoption ensures that TypeScript code can be safely transpiled without the need for the type-checker. This mode of operation has several advantages. The bundler (esbuild in this case) will know have knowledge of the TypeScript code constructs, such as enums, and can optimize the output code based on that knowledge including inlining both const and regular enums where possible. Additionally, this allows for the removal of the babel-based optimization passes for all TypeScript code. These passes are still present for all JavaScript code such as from third-party libraries/packages. These advantages lead to an improvement in build time, especially in production configurations. To ensure optimal output code size in this setup, theuseDefineForClassFieldsTypeScript option should either be removed or set totruewhich enables ECMAScript standard compliant behavior.Initial testing reduced a warm production build of a newly generated project from ~2.3 seconds to ~2.0 seconds.