Buildtime increased by 50% in v12

[kemsky]

🐞 Bug report

Command (mark with an x)

• build

Description

This is v11.2.13:

$ ng build --prod
√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files                   | Names         |      Size
main.1bbe17e891e0e81a6bae.js          | main          |   3.20 MB
scripts.5b3322e07a3cdcf6af69.js       | scripts       |   1.48 MB
styles.19406af932cc90ae2667.css       | styles        | 152.44 kB
polyfills-es5.2cb7395a5fd592fe7443.js | polyfills-es5 |  85.88 kB
runtime.23c71f07ba7ec5c3766a.js       | runtime       |   1.51 kB

                                      | Initial Total |   4.92 MB

Build at: 2021-05-14T11:00:10.476Z - Hash: 034e3176df64cbc0b60a - Time: 88357ms

Verbose log (logging itself causes slowdown, unfortunately...):
angular11.txt

Angular CLI: 11.2.13
Node: 14.17.0
OS: win32 x64

Angular: 11.2.13
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.13
@angular-devkit/build-angular   0.1102.13
@angular-devkit/core            11.2.13
@angular-devkit/schematics      11.2.13
@angular/cdk                    11.2.12
@angular/material               11.2.12
@schematics/angular             11.2.13
@schematics/update              0.1102.13
rxjs                            6.6.7
typescript                      4.1.5

This is v12 with yarn.lock and node_modules removed and reinstalled:

$ ng build --configuration production
Warning: Support was requested for IE 11 in the project's browserslist configuration. IE 11 support is deprecated since Angular v12.
For more information, see https://angular.io/guide/browser-support
√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files                   | Names         |      Size
main.25755cb56d908f1ffa0c.js          | main          |   3.19 MB
scripts.5b3322e07a3cdcf6af69.js       | scripts       |   1.48 MB
styles.51baf6c2a9fbe6837aa1.css       | styles        | 154.28 kB
polyfills-es5.b787b17c5e8d81a4b18e.js | polyfills-es5 |  90.75 kB
runtime.bf3db8034d6e10a74a56.js       | runtime       |   1.20 kB

                                      | Initial Total |   4.92 MB

Build at: 2021-05-14T11:18:16.175Z - Hash: 8806f0a3a3b1271495e0 - Time: 157125ms

Verbose log (logging itself causes slowdown, unfortunately...):
angular12.txt

Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: yarn 1.22.5
OS: win32 x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

We have a single small *.scss file (overriding some material colors) and it was updated by migration. The application has only one module. I tried removing scss and css from angular.json, but it is still slower than v11.

On average it is 50% slower.

-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
TypeScript                    1011          10391           2652          54543
HTML                           311            629              7           7832
CSS                             66            344             30           2109
Sass                             1             15             14             63
JavaScript                       1              9              3             55
JSON                             1              0              0              3
-------------------------------------------------------------------------------
SUM:                          1391          11388           2706          64605
-------------------------------------------------------------------------------

---

Recorded profile using node 12:

https://link.nithins.me/s2Uca0Ti

[JoostK]

I am having little luck with loading the profiling events into chrome://tracing (it stays empty).

@kemsky if you are able to run with a debugger and then record a profiling session, that would be very helpful.

[kemsky]

@JoostK, I was not able to load it either. I tried recording on node 14.17 but it crashes at the very beginning. Ok, will try to do it using a debugger.

[JoostK]

After some debugging of Chrome's tracing tool, it appears that the +600MB of tracing data exceeds the maximum string length 🤣 v8/v8@ea56bf5. Importing the file itself just results in an empty string, whereas loading the zip crashes during decompression when all uncompressed bytes are converted into a single string.

[kemsky]

@JoostK, JSON contains a simple array, so you can cut it if necessary into two parts.

[joshwiens]

I'm having the same issue with build times, the initial report looks to be fairly thorough but feel free to @ me if you would like further tracing / info.

[JoostK]

With some sed magic to remove the common path prefix I managed to get the trace size down to fit:

Unfortunately I can't make a comparison with 11 as I don't have a trace for that run, but Webpack processing itself is now longer than the full build took before.

The pruned trace can be downloaded here can be downloaded as a much smaller zip here (only available for a week).

[JoostK]

I am not sure how to proceed here. We'd likely still need some runnable reproduction in order to establish what can be done to improve the situation here. If anyone can share a repro privately that would be super helpful.

[joshwiens]

@JoostK - Mine is a fairly large monorepo, I'll get to work on a repo you can access that is a bit more focused. Give me a hour or two

[JoostK]

@JoostK - Mine is a fairly large monorepo, I'll get to work on a repo you can access that is a bit more focused. Give me a hour or two

Thanks. Also take your time as it's almost 2 AM for me so I'm calling it a day!

[kemsky]

@JoostK, this is v11 profile: https://link.nithins.me/9NfVUS9T

I'm not sure if these are comparable...

Devtools are crashing also, I can only take a partial profile.

[joshwiens]

@kemsky - You can either give v8 more memory globally or chrome itself.

Globally ( imo the useful way ): NODE_OPTIONS=--max_old_space_size=8192
To Chrome: Chrome.app --args --js-flags="--max_old_space_size=8192"

[joshwiens]

@JoostK - I threw a new v11 CLI app up, added material and a basic component so it imports some styles. It's super minimal but should work for a reproduction, if not i'll just get you collab access to my work repo to poke around.

Main branch is cli v11.2.13 (~6000ms --prod) and upgrade-v12 is that branch upgraded. (~13200ms --prod).

https://github.com/EasyMetrics/v12-upgrade-performance

[JoostK]

@JoostK, this is v11 profile: https://link.nithins.me/9NfVUS9T

I'm not sure if these are comparable...

Devtools are crashing also, I can only take a partial profile.

Not sure how to interpret those results. The angular-compiler block stays the same across v11 vs v12 which is to be expected, but what follows is so vastly different that I can't say what the real problem is. Terser is reported surprisingly differently in a way that in v12 it spans 60s vs just 10s in v11, but that may just be because the profiling events are generated differently. Additionally, the v11 trace spans almost 6 minutes vs 3.5 minutes in the v12 trace, so that's suspicious as well (especially because the angular-compiler trace has stayed consistent)