Angular 12 RC 2 - Compilation is enormously slow and crashes on large build. #20713
Comments
|
node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open Allows it to run longer than 5 minutes. Sitting at over 20 minutes at (phase: building) |
|
Hi @ganySA, Is there a way you can share the project even privately with the team? Or provide adding information such as cpu profile logs?. To generate a CPU profile you can use Are you using JIT or AOT? Thanks. |
alan-agius4
added
needs: more info
|
@alan-agius4 i have shared the repo with you. |
|
Hi @ganySA, Here are what I found;
The left your project is a broken state were now "development' builds are using "production" settings and hence cause increase in memory usage and slow rebuild times. You can run the migration by using the below command (Note, don't run the ng-update command multiple times as one of the migrations is non-idempotent)
|
|
Hi Alan Thank i will try the migrate command. Tailwind is a modern CSS framework that i believe angular CLI supports? What is interesting is that this does not happen on v11 but this could as you point out be due to the build. I will do the upgrade and give it a go. Thanks for taking the time to investigate. |
In the reproduction tailwinds is not used, because there is no tailwind configuration in the root of the project. The CLI looks for |
|
I have these under /configs/ and for some reason this has worked - i was using a custom builder. |
I don't see any |
|
I have reset my configuration to a simple configuration from a new angular 12 project and slowly added back settings. Even with a basic 'reset' configuration build takes about 4 minutes. I have not pushed will do so now. |
|
Pushed updates. |
|
I did notice that due to import path This is above, is import is quite expensive and in your case it needs to be resolved around 65 times because you import this file that many times. Previously Ps: I see don't see the |
|
The tailwind.config.js file is in the root. |
Glad we seem to have found the issue! |
|
In your tailwind configuration you have set purge to Purging should be only enabled during builds for production, using see #20015 (comment) for more context. With regards to |
|
Following some more investigation, you should get a better performance if you use the new entry-point from To run the code migration in RC 2 you can use; In RC 3 or later, this migration will run automaticity when updating |
|
Hi Thank you for your response and instructions. I have made the above changes and now the build does complete. After a number of code changes - i still receive a Javascript heap exception. Just a side note - |
|
I have compiled a list of SCSS files in your project, with the duration each of them takes to compile.
The slowest compilations have in common that they all depend on @angular/material new theming api, extract from a transitive file. @use '~@angular/material' as mat;
@function treo-light-theme($primary-palette, $accent-palette, $warn-palette) {
// Generate the Angular Material theme
$angular-material-theme: mat.define-light-theme($primary-palette, $accent-palette, $warn-palette);
// Modify and return the theme
@return _treo-modify-angular-material-theme-colors($angular-material-theme);
}
@function treo-dark-theme($primary-palette, $accent-palette, $warn-palette) {
// Generate the Angular Material theme
$angular-material-theme: mat.define-dark-theme($primary-palette, $accent-palette, $warn-palette);
// Modify and return the theme
@return _treo-modify-angular-material-theme-colors($angular-material-theme);
}
@function treo-palette($palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
@return mat.define-palette(map-get($treo-colors, $palette), $default, $lighter, $darker, $text);
}Locally the timings are a bit better, which I do expect on Windows (Which appears to be your OS) IO is slower. I tried try to force a couple of re-builds, what I did was to amend Can you please provide;
|
|
I suspect the new theming API is the challenge. Unless i refactor the entire project it will not be simple to remove given how its architectured. This is still quite a major regression. I ng v Under CLI RC3 Build at: 2021-05-11T18:39:54.431Z - Hash: 6736c7ce908561b778da - Time: 136206ms |
|
Should i log a query under @angular/material ? |
|
@clydin is working on improving the SASS compilation times in general by offloading the compilation to a worker and changing the SASS compilation asynchronous to synchronous. You can see this PR #20740. Dart-sass is synchronous can be twice as fast. From initial testing I did see some good improvements in your project, and the build time did improve by around Regarding the OOM issues, I still didn't receive answer for the following questions. I did trigger multiple rebuilds and memory usage did stay consistent;
I think this would be useful, so that it's also tracked in their repo. |
|
Sorry taken some time to work out best way to emulate a crash.
sometimes you need to do step 3 and 4 twice. |
|
@alan-agius4 did you manage to reproduce the OOM crash? |
|
Yeah, I did but so far had little luck getting to the bottom of it. Let's continue tracking the OOM in #20801 please. |
|
I thought I should make a comment here. I am not using tailwind. My SCSS bundles are not large at all sitting at 267KB I am still having the HEAP size issues, and am only able to develop by setting the The build times in my github actions have nearly tripled since I updated to 12. I am using nx.dev with a mono repo... |
|
Yesterday release (12.0.1) contains several performance improvements. Please give it a try! |
|
12.0.1 didn't improve my project's build times either. Sometimes the CI fails with a OOM error after 5 minutes and other times it takes ~25 minutes to compile when it used to compile in ~12 minutes. It sounds like the regression in around the SCSS integration? |
|
@NateRadebaugh Are those production or development build times? Sass processing was greatly improved in 12.0.1. However, in an unrelated change, the CSS optimizer plugin was also switched to use the Webpack provided plugin. This plugin has the unfortunate behavior of potentially creating an unbounded number of worker threads. In the event of this happening, performance can become significantly worse due to the large volume of context switches and can also lead to memory problems. A fix (PR #20886) to limit the number of worker threads that the Webpack plugin can use has been merged and will be included in 12.0.2. |
|
@alan-agius4 I updated with Running:
took me back down from 120 seconds to 74 seconds which is around where I was before. However it turns out that if you run the migrations multiple time it can actually disable |
|
@ganySA how is the performance in 12.0.3 and are the OOM issues resolved? |
|
Updating to 12.0.3 did not have any improvement for me. |
|
@alan-agius4 very minor improvement for me. I have a very large mono-repo using nx.dev so excuse the dramatic numbers |
|
@joelcoxokc Are those all production builds? |
|
@clydin yes. That is running ng build with aot turned on. |
|
If you have some time, can you try running them with the environment variable |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
@clydin I am not quite sure what that did. I also removed it and my build is still sitting at 4.5 minutes. If I run ngcc after my npm install the build hits about 10 minutes. But I think that is expected with ngcc. |
|
What I did to get around this issue:
Angular 11: 8 minutes Why/how? My guess is the automatic migrations aren't working correctly, and so far what others are reporting is that the cache stuff in 12 with webpack 5 is busted with the migrations as is. Migrations also aren't able to detect unsupported dependencies. |
|
@NateRadebaugh, are you using third party builders? |
This comment has been minimized.
This comment has been minimized.
|
You need to opt-in into HMR. Using if you are experiencing performance issues please share a reproduction and/or CPU profile, unfortunately without any of these we will not be able to Investigate. |
|
Thanks @alan-agius4 I have confirmed using the following script did work for HMR: And to follow up, no I'm not using any other custom bundlers. Thanks! |
|
|
|
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. |
🐞 Bug report
Command (mark with an
x)The build time for for angular 12 RC 2 is very slow - was also slow in RC0.
I have quite a big project with multiple lazy loaded modules. If i remove most of these and run its on a base set the compilation takes about 4-5minutes. When i include the lazy loaded modules it aborts after 5 minutes with a JavaScript heap memory.
With small code changes building/sealing takes 2-3 minutes.
The text was updated successfully, but these errors were encountered: