Buildtime increased by 50% in v12

🐞 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

@kemsky

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.

@JoostK

@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.

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.

@JoostK

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

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.

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).

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.

@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

@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!

@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.

@kemsky

@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"

@JoostK

@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)

@JoostK

@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

Okay so I tried this and I'm actually getting similar times for v11 and v12, however in v11 the Terser processing is cached whereas in v12 it doesn't appear to be. This results in inconsistent results for v11, as cold runs are ~12s vs ~7s for cached runs; unlike v12 which always takes ~12s.

@whyboris

@whyboris It doesn't for me:

Is there a particular change I should be making?

@JoostK

@JoostK thank you for testing! I was so frustrated I quit for the day, but thanks to your message I had new hope 😅

I ran rm -rf node_modules and npm install again ~~and it looks like I'm back to fast~~ 🚀

Build at: 2021-07-07T20:46:38.298Z - Hash: f2c33b8ef37564ec1ef0 - Time: 1713ms 🙇

~~Sorry for the scare~~ 🙇

update: 🤦 turns out it still takes ~22 seconds when you just add console.log in some component

@whyboris

@whyboris Thanks for getting back. Good to hear it's fast again, hopefully it stays that way. If you do run into it again please report back so we can have another look.

@JoostK

@JoostK 🤦 sorry -- the reload was fast because I simply saved the file with no changes ... but when I add console.log somewhere - thereby changing the file, the compilation takes a long time again:

Build at: 2021-07-07T20:50:32.591Z - Hash: 0a430155980e29d73d08 - Time: 23324ms 😢

It seems to hang on the ... bundles (phase: sealing)... step

@whyboris

@whyboris Oh, it's just a misconfiguration. In Angular 12 some builder defaults have changed in support of the new production builds by default for ng build. I am not sure how you updated but I don't see any changes to angular.json in the pull request; ng update should have updated it to pin the configuration options to their prior defaults to retain the previous behavior. If I run ng update @angular/cli --migrate-only --from 11 --to 12 then the angular.json file is indeed updated. Please review the changes as I notice in your case that aot will be set to false, which may or may not be desirable.

@JoostK

@JoostK thank you very much for the suggestion!
I went back to my main branch (before my attempt to upgrade to angular 12) and ran the command you gave:
ng update @angular/cli --migrate-only --from 11 --to 12
It updated my angular.json file and now the app recompiles quickly after every save 🚀
https://github.com/whyboris/Video-Hub-App/pull/666/files
Thank you 🤝 🙇 ❤️

@whyboris

@whyboris it seems like you set "aot": false which should be set to true (if I'm not misstaken)

@DavidBowdoin

Just wanted to let you know that I did the migration again the way @DavidBowdoin suggested (remove custom builder before ng update).
Aaaand there is no slowdown anymore! 🥳

Not sure what the issue was, maybe it was actually fixed with the newest version of the custom webpack builder (as @simeyla suggested). My angular.json was not touched by the migration at all (although I removed the custom builder before the migration!), so I guess that was not the problem.

But anyway, I am happy that we can update now!
Thanks again everyone! :)

Maybe this can solve this problem https://dev.to/brandontroberts/speeding-up-the-development-serve-after-upgrading-to-angular-v12-5db5

It appears that the root cause of the problem is misconfigurations and not an issue in the Angular CLI.

If you are still experiencing slow production builds please open a new issue with a production.

Removing "emitDecoratorMetadata": true from tsconfig.json reduced our build time significantly for production.

Success! I found steps to get good performance when using @angular-builders/custom-webpack

TLDR; before upgrading angular, remove all traces of custom-webpack so the migrations run in full, and then re-install custom-webpack

Here is what worked for me, starting with an Angular 11 project:

In angular.json, replaced all traces of @angular-builders/custom-webpack:browser with @angular-devkit/build-angular:browser (and delete the customWebpackConfig block)

Removed @angular-builders/custom-webpack from package.json

Deleted node_modules and package_lock.json

Ran npm install

Ran ng update @angular/cdk @angular/cli @angular/core

Added v12 of @angular-builders/custom-webpack back into package.json

Ran npm install

In angular.json, changed back to @angular-builders/custom-webpack:browser and restored the customWebpackConfig block.

I confirmed that the migrations in angular.json (that were getting skipped) make the difference (2x slower ng serve build time)

Benchmarking gives similar results as with angular 11 and markedly better results when I use NG_PERSISTENT_BUILD_CACHE=1

Like @mrucelum our project uses @angular-builders/custom-webpack to specify several packages as externals (legacy code needs the package as well, so don't want to double load them) Is there any chance ng update could do migrations when custom-webpack is in use? Or the ability to specify external packages without using custom-webpack? Thanks everyone for the info that lead me to this solution!

This solved my issue! Thanks :)

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.}

Navigation Menu

Repository navigation

Buildtime increased by 50% in v12 #20792

🐞 Bug report

Command (mark with an `x`)

Description

113 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Buildtime increased by 50% in v12 #20792

Description

🐞 Bug report

Command (mark with an x)

Description

Activity

JoostK commented on May 14, 2021

kemsky commented on May 14, 2021

JoostK commented on May 14, 2021

kemsky commented on May 14, 2021

joshwiens commented on May 14, 2021

JoostK commented on May 14, 2021

JoostK commented on May 14, 2021

joshwiens commented on May 14, 2021

JoostK commented on May 14, 2021

kemsky commented on May 15, 2021

joshwiens commented on May 15, 2021

joshwiens commented on May 15, 2021

JoostK commented on May 15, 2021

JoostK commented on May 15, 2021

113 remaining items

JoostK commented on Jul 7, 2021

whyboris commented on Jul 7, 2021

JoostK commented on Jul 7, 2021

whyboris commented on Jul 7, 2021

JoostK commented on Jul 7, 2021

whyboris commented on Jul 8, 2021

the-ult commented on Jul 8, 2021

MadeleineCodes commented on Jul 12, 2021

vugar005 commented on Jul 12, 2021

alan-agius4 commented on Jul 20, 2021

zeshan321 commented on Jul 28, 2021

monsieur-ricky commented on Aug 12, 2021

angular-automatic-lock-bot commented on Sep 12, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Command (mark with an `x`)