Build time doesn't change with Esbuild

[B1Z1]

Command

build

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.3

Description

Hi! We just tried to implement esbuild to our application and we didn't see any improvements in build time. We have a big application with ~1700 components, I can show you the boot time and change time to compare.

Minimal Reproduction

We cannot share with you our codebase. Near I'm sending timings for initial boot without Angular cache and for change in different files in build --watch mode:

Boot:

Webpack:

1. 105805ms
2. 47047ms
3. 45886ms

Esbuild:

1. 80338ms
2. 45667ms
3. 49865ms

Change:

Example code: constructor() { console.log('wait'); }

Webpack:

1. Module which is used several times - 30277ms
2. AppModule - 32818ms
3. Generic module, multiple usages - 20478ms

Esbuild:

1. Module which is used several times - 12914ms
2. AppModule - 12914ms
3. Generic module, multiple usages - 21485ms

For us, it looks strange because Esbuild must be faster than webpack xxx times. I know that you implemented Esbuild in experimental mode, but if you need some help we can try to give you more information from us. We are interested in a new builder for Angular, because we are struggling with build time problems for a long time.

Exception or Error

No response

Your Environment

Node : 16.16.0
   OS   : darwin arm64
   yarn : 1.22.4

   nx : 15.1.1
   @nrwl/angular : 15.1.1
   @nrwl/cypress : 15.1.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.1.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.1.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.1.1
   @nrwl/js : 15.1.1
   @nrwl/linter : 15.1.1
   @nrwl/nest : 15.1.1
   @nrwl/next : Not Found
   @nrwl/node : 15.1.1
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.1.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.1.1
   @nrwl/web : 15.1.1
   @nrwl/webpack : 15.1.1
   @nrwl/workspace : 15.1.1
   typescript : 4.8.2
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
   	 @ngneat/transloco: 4.1.1
   	 @ngrx/effects: 12.5.1
   	 @ngrx/entity: 12.5.1
   	 @ngrx/store: 12.5.1
   	 @ngrx/store-devtools: 12.5.1
   	 @rx-angular/cdk: 1.0.0-rc.3
   	 @rx-angular/state: 1.7.0
   	 @rx-angular/template: 1.0.0-rc.4
   	 @storybook/angular: 6.5.12
   	 @testing-library/angular: 11.0.4

Anything else relevant?

No response

[clydin]

Thank you for taking the time to try out the experimental esbuild-based builder. To provide some more insight into the Angular/TypeScript compiler elements of the build process, you can run the build with the NG_BUILD_DEBUG_PERF environment variable set (e.g., NG_BUILD_DEBUG_PERF=1 ng build -c development --watch). This will only show information for the esbuild builder though.

As to the timings, the initial build times generally should not be varying much between the first and later initial builds. esbuild especially since it currently has no persistent caching. Is there some other form of caching active (potentially nx related)?

For the rebuilds in watch mode, the first rebuild is currently ~2x slower than subsequent rebuilds within the same execution (mainly due to template type-checker initialization). This is something we are working on improving. But when taking measurements, the second (or later) rebuild is generally the more useful number from a performance analysis perspective. However, from those numbers it does appear that the rebuild times for two of those cases have been reduce by over half (50-60%). The third case not seeing any improvement may be due to the modules usage throughout the program which required the AOT compiler to perform more analysis prior to emitting updated files. This is something that the debug environment variable mentioned above may help to provide more insight.

The type of stylesheets (CSS/Sass/etc.) in use would also be useful to know; as well as the amount/usage of global stylesheets (styles build option). Also of note is that while esbuild is used for bundling, a TypeScript compilation is still currently taking place to support Angular AOT compilation and type-checking of both code and templates.

Thank you again for trying out the build system. Information about projects such as yours will definitely be helpful in improving the performance of the build process.

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}