Compilation in TypeScript taking longer than 12 seconds

Question

Compilation in TypeScript taking longer than 12 seconds

Is anyone else experiencing slow TypeScript compilation times when building an Angular 2 app with webpack and TypeScript? My build process takes around 12 seconds, which seems excessively slow due to the TypeScript compilation.

I've tried using both ts-loader and awesome-typescript-loader, but the issue persists. Removing the loader significantly reduces the build time to around 1 second.

Research suggests that some slowness is normal during TypeScript compilation, but is a 12-second build time typical?

Past suggestions have mentioned potential conflicts with node versions; I am currently using v4.4.2.

Below is my webpack configuration code in case anyone can identify any issues. The commented out code in the Uglify section is related to a bug on the Angular 2 side:

[Webpack configuration code]

I am working on a Mac, using Angular 2 beta.15 and webpack version 1.12. Here is my tsconfig.json:

[tsconfig.json code]

performance typescript angular webpack

Answer 1

Answer №1

I recommend continuing to use the awesome-typescript-loader. It offers performance-enhancing features that can be activated: a caching option and a transpile-only option:

"awesomeTypescriptLoaderOptions": {
  "useCache": true,
  "transpileOnly": true
}

Enabling both of these resulted in notable enhancements to compilation speed.

Answer 2

I recommend continuing to use the awesome-typescript-loader. It offers performance-enhancing features that can be activated: a caching option and a transpile-only option:

"awesomeTypescriptLoaderOptions": {
  "useCache": true,
  "transpileOnly": true
}

Enabling both of these resulted in notable enhancements to compilation speed.

Answer 3

Answer №2

Discover the official wiki that offers valuable insight into best practices and troubleshooting tips for compiler performance. With extensive pages filled with information, there's a plethora of resources to aid in optimization. Here's just one recommendation:

extendedDiagnostics

Use --extendedDiagnostics when running TypeScript to obtain details on where the compiler is allocating its time.
Files:                         6
Lines:                     24906
Nodes:                    112200
Identifiers:               41097
Symbols:                   27972
Types:                      8298
Memory used:              77984K
Assignability cache size:  33123
Identity cache size:           2
Subtype cache size:            0
I/O Read time:             0.01s
Parse time:                0.44s
Program time:              0.45s
Bind time:                 0.21s
Check time:                1.07s
transformTime time:        0.01s
commentTime time:          0.00s
I/O Write time:            0.00s
printTime time:            0.01s
Emit time:                 0.01s
Total time:                1.75s
Note that even though some steps overlap, the Total time may not be the sum of all preceding times since not all tasks are measured.

The key metrics most users should focus on include:

Field Meaning

Files Indicates the number of files included in the program (use --listFilesOnly to view them).

I/O Read time Elapsed time retrieving data from the filesystem - covers traversal of included folders.

Parse time Duration spent scanning and parsing the program.

Program time Aggregate time encompassing reading from the filesystem, scanning and parsing, and other calculations related to the program graph. These stages merge because loaded files via imports and exports necessitate resolution and loading processes.

Bind time Time dedicated to generating various local semantic information within a single file.

Check time Time allotted for type-checking the program.

transformTime time Time utilized to transform TypeScript ASTs (abstract syntax trees depicting source files) into formats suitable for older runtimes.

commentTime Time spent calculating comments in output files.

I/O Write time Time taken for writing/updating files on disk.

printTime Time expended on computing the string representation of an output file and emitting it to disk.

Considering this information, you might want to inquire about:

If the number of files/lines of code aligns with your project's structure. Use --listFiles if necessary.

If Program time or I/O Read time appear excessively high, verify the correctness of your include/exclude configurations.

If other timings seem irregular, consider raising an issue! Diagnostic steps could involve

Activating emitDeclarationOnly if printTime is lengthy.

Referencing guidelines on Reporting Compiler Performance Issues for further assistance.

Answer 4

Discover the official wiki that offers valuable insight into best practices and troubleshooting tips for compiler performance. With extensive pages filled with information, there's a plethora of resources to aid in optimization. Here's just one recommendation:

extendedDiagnostics

Use --extendedDiagnostics when running TypeScript to obtain details on where the compiler is allocating its time.
Files:                         6
Lines:                     24906
Nodes:                    112200
Identifiers:               41097
Symbols:                   27972
Types:                      8298
Memory used:              77984K
Assignability cache size:  33123
Identity cache size:           2
Subtype cache size:            0
I/O Read time:             0.01s
Parse time:                0.44s
Program time:              0.45s
Bind time:                 0.21s
Check time:                1.07s
transformTime time:        0.01s
commentTime time:          0.00s
I/O Write time:            0.00s
printTime time:            0.01s
Emit time:                 0.01s
Total time:                1.75s
Note that even though some steps overlap, the Total time may not be the sum of all preceding times since not all tasks are measured.

The key metrics most users should focus on include:

Field Meaning

Files Indicates the number of files included in the program (use --listFilesOnly to view them).

I/O Read time Elapsed time retrieving data from the filesystem - covers traversal of included folders.

Parse time Duration spent scanning and parsing the program.

Program time Aggregate time encompassing reading from the filesystem, scanning and parsing, and other calculations related to the program graph. These stages merge because loaded files via imports and exports necessitate resolution and loading processes.

Bind time Time dedicated to generating various local semantic information within a single file.

Check time Time allotted for type-checking the program.

transformTime time Time utilized to transform TypeScript ASTs (abstract syntax trees depicting source files) into formats suitable for older runtimes.

commentTime Time spent calculating comments in output files.

I/O Write time Time taken for writing/updating files on disk.

printTime Time expended on computing the string representation of an output file and emitting it to disk.

Considering this information, you might want to inquire about:

If the number of files/lines of code aligns with your project's structure. Use --listFiles if necessary.

If Program time or I/O Read time appear excessively high, verify the correctness of your include/exclude configurations.

If other timings seem irregular, consider raising an issue! Diagnostic steps could involve

Activating emitDeclarationOnly if printTime is lengthy.

Referencing guidelines on Reporting Compiler Performance Issues for further assistance.

Answer 5

Answer №3

Kindly provide your tsconfig.json. It seems probable that you have the noEmitOnError option set to true, requiring the compiler to perform a full type check on the entire codebase before emitting anything.

Consider changing this setting to false.

Answer 6

Kindly provide your tsconfig.json. It seems probable that you have the noEmitOnError option set to true, requiring the compiler to perform a full type check on the entire codebase before emitting anything.

Consider changing this setting to false.

Compilation in TypeScript taking longer than 12 seconds

Answer №1

Answer №2

`extendedDiagnostics`

Answer №3

Similar questions

The module "@angular/compiler-cli/ngcc" could not be located

What is the process for creating a new type from a nested part of an existing type?

Unable to establish a simulated environment and trial period for experimentation

Best practices for transferring date objects between a frontend developed in JavaScript/TypeScript and a backend built in ASP.net Core 5

How can I refresh the information in the navbar in Angular2?

Errors in the @babel/types during the ng build process in Angular version 8.2.14

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

What is the reason for TypeScript allowing this promise chain without any compilation errors?

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

How to use TypeScript to set a value in ng2-ckeditor

The initial processing step for the export namespace is to utilize the `@babel/plugin-proposal-export-namespace-from` plugin. Previous attempts to resolve this issue have been

Guide to adding a custom font to your Angular 5 project

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

Optimizing performance by serving Vue JS chunks lazily from a CDN

Is there a circular dependency issue with ManyToMany relationships in Typescript TypeORM?

Sharing data between two components in Angular 7

Loading Highcharts in Angular app

The double curly brackets in Angular for text interpolation are failing to work, causing the variable values to not be shown on display

Guide on how to conditionally display a button or link in a Next.js Component using TypeScript

Angular 8 form controls becoming unresponsive while the list is being loaded

Field	Meaning
`Files`	Indicates the number of files included in the program (use `--listFilesOnly` to view them).
`I/O Read time`	Elapsed time retrieving data from the filesystem - covers traversal of included folders.
`Parse time`	Duration spent scanning and parsing the program.
`Program time`	Aggregate time encompassing reading from the filesystem, scanning and parsing, and other calculations related to the program graph. These stages merge because loaded files via `import`s and `export`s necessitate resolution and loading processes.
`Bind time`	Time dedicated to generating various local semantic information within a single file.
`Check time`	Time allotted for type-checking the program.
`transformTime time`	Time utilized to transform TypeScript ASTs (abstract syntax trees depicting source files) into formats suitable for older runtimes.
`commentTime`	Time spent calculating comments in output files.
`I/O Write time`	Time taken for writing/updating files on disk.
`printTime`	Time expended on computing the string representation of an output file and emitting it to disk.