ng serve recompile time very slow

[sodepr]

🐞 Bug report

Command (mark with an x)

- [ ] serve

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Description

A clear and concise description of the problem...

ng serve recompile time very slow. It spend about 10s to recompile althought I only change one space on css ~~

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 8.3.3
Node: 10.16.3
OS: win32 x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms   
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------   
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.3
@angular-devkit/build-optimizer   0.803.3
@angular-devkit/build-webpack     0.803.3
@angular-devkit/core              8.3.3
@angular-devkit/schematics        8.3.3
@angular/cli                      8.3.3
@ngtools/webpack                  8.3.3
@schematics/angular               8.3.3
@schematics/update                0.803.3
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

[alan-agius4]

Hi @sodepr. thanks for opening the issue. Is there a way you can share your project or a reproduction so that we can take a look at?

You can read here why this is needed.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[sodepr]

This is my repos
https://github.com/letanloc1998/GFood-Angular.git

It spend about 5s - 20s when i change something (simple change as add space, add new line,...)

[sodepr]

[sodepr]

I updates new version node, npm but nothing is change ~~

Angular CLI: 8.3.7
Node: 12.11.1
OS: win32 x64
Angular:
...

Package Version

@angular-devkit/architect 0.803.7
@angular-devkit/core 8.3.7
@angular-devkit/schematics 8.3.7
@schematics/angular 8.3.7
@schematics/update 0.803.7
rxjs 6.4.0

[sodepr]

Configuration my laptop:
I5 3340M
8GB ram
Samsung ssd 860 evo 512GB

[sodepr]

I see same issue but bot auto clock ~~
#6103

[clydin]

Looks like the large amount of assets is causing the slowdown. Can you remove non-essential files from the assets directory?

[sodepr]

Looks like the large amount of assets is causing the slowdown. Can you remove non-essential files from the assets directory?

I did it, but it doesn't reduce recompile time.
You can see this commit I move file assets but nothing is change: https://github.com/letanloc1998/GFood-Angular/tree/227f63a29e003758e6e07056b561a7314137143e
At this commit, on localhost, I move all file in assets but it doesn't faster

[clydin]

There's still over 1500 files and 22 MB in the assets folder. This is going to take some time to copy.

[sodepr]

There's still over 1500 files and 22 MB in the assets folder. This is going to take some time to copy.

I return it to asset because it doesn't reduce recompile time
In localhost, I move all file in assets to orther folder, no file in asset. I don't commit this change to github because it has many file.

[sodepr]

5s recompile when i delete one line html (and about 3s reload page)

You can see no file in assets folder:

[clydin]

I'm unable to replicate the behavior you are seeing. First change below is a TS file, second a CSS file, and third an HTML file.

chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 263 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 11.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.44 MB [initial] [rendered]
Date: 2019-10-04T01:30:12.616Z - Hash: 6f221bb7fb4e9a120bb3 - Time: 7640ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:21.546Z - Hash: 6f221bb7fb4e9a120bb3
5 unchanged chunks

Time: 615ms
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:36.442Z - Hash: 7914e96ba922047d0d49
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
Time: 573ms
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:48.431Z - Hash: f8f4000a17dce840bd77
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
Time: 634ms
ℹ ｢wdm｣: Compiled successfully.

[sodepr]

I'm unable to replicate the behavior you are seeing. First change below is a TS file, second a CSS file, and third an HTML file.

chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 263 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 11.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.44 MB [initial] [rendered]
Date: 2019-10-04T01:30:12.616Z - Hash: 6f221bb7fb4e9a120bb3 - Time: 7640ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:21.546Z - Hash: 6f221bb7fb4e9a120bb3
5 unchanged chunks

Time: 615ms
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:36.442Z - Hash: 7914e96ba922047d0d49
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
Time: 573ms
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T01:30:48.431Z - Hash: f8f4000a17dce840bd77
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 160 kB [initial] [rendered]
Time: 634ms
ℹ ｢wdm｣: Compiled successfully.

It time same as project of my friend, I think nodejs or something wrong in my lap. I will install windows and run it to check. Thank you very much

Huh, What configuration of you laptop/pc?
What version of node, npm, angular you run

[alan-agius4]

@sodepr, you might also have an anti-virus that is scanning files when being accessed and is slowing the compilation.

I tried your reproduction and here's the timings

chunk {main} main.js, main.js.map (main) 156 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 263 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.44 MB [initial] [rendered]
Date: 2019-10-04T15:14:29.033Z - Hash: 608727f408d623de243c - Time: 12199ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2019-10-04T15:14:38.354Z - Hash: bc598b1bc970015bfcf4
4 unchanged chunks
chunk {styles} styles.js, styles.js.map (styles) 11.4 kB [initial] [rendered]
Time: 877ms
ℹ ｢wdm｣: Compiled successfully.

Also, having the entire fontawesome as part of the your assets doesn't seem right as it includes files that will never be used by your application and are copied redundantly.