Extremely slow ng serve performance [Source Map compiling]

Bug Report or Feature Request (mark with an `x`)

- [x ] bug report
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [ ] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

npm: 5.6.0

Angular CLI: 7.0.6
Node: 8.9.4
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.6
@angular-devkit/build-angular 0.10.6
@angular-devkit/build-optimizer 0.10.6
@angular-devkit/build-webpack 0.10.6
@angular-devkit/core 7.0.6
@angular-devkit/schematics 7.0.6
@angular/cdk 7.1.0
@angular/cli 7.0.6
@angular/compiler-cli 7.1.0
@angular/flex-layout 7.0.0-beta.19
@angular/language-service 7.1.0
@ngtools/webpack 7.0.6
@schematics/angular 7.0.6
@schematics/update 0.10.6
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

Repro steps

Needs LARGE project, NOT empty project with ng new ...,
run npm start
make changes
wait for 10 min

The log given by the failure

N/A

Desired functionality

We have big project, and we've faced problem with ng serve updating/recompiling during update.
Now faster to re-run ng serve instead wait for rebuilding

Mention any other details that might be useful

we use simple ng serve without AOT or PROD flag

I'm having similar performance problems with ng server after updating my large project to 7.1.0.

@djleonskennedy

Hi @djleonskennedy, does turning off the sourceMaps result in good rebuild times? Also is vendorSourceMap enabled or disabled?

When you say large project, can you kindly provide some data such as number of Ts files, Css/Scss files etc?

Thanks.

Hi,
This could help investigating the issue...

With a fresh project (ng new with all default parameters), ng serve complete after 15sec. Then :

1st change: 3901ms
2nd change: 2516ms
3rd change: 2125ms
4th change: 2068ms

After reverting @angular-devkit/build-angular to 0.10.7, I get the following times :

1st change: 2584ms
2nd change: 477ms
3rd change: 477ms
4th change: 432ms

@alan-agius4

@alan-agius4 I'll check it vendorSourceMap, will let you know asap, Thank you

@mselerin

@mselerin your issue doesn’t seem to be related to sourcemaps.

But more to this issue: #13102

@alan-agius4

@alan-agius4 I have seen this issue before but I don't think it's related to mine... (it's not aot but jit with serve)

But thanks for the reply :-)

@alan-agius4

@alan-agius4 Summary of out app

We have SharedModule for common components, pipes etc.
We have 219 lazy loaded modules, we use lazy loading every where
In general we have over 80 000 lines of types script

Could you say what i can provide for you to get more info?

Thank you :)

Hi,

Thanks for the info provided. If you don't mind can you try a couple of things that will help is determine what's the root cause.

Can you check how are the build/rebuild times with sourceMap turned off?
Can you confirm if you have vendorSourceMap enabled or disabled?
Can you open node_modules/@ngtools/webpack/src/benchmark.js, Change const _benchmark = false to true and run ng serve --verbose --no-progress it should indicate which parts of the compilation is taking more time. (Would be great if you could post the timings here of an initial and incremental build, and the console timings). Or preferably you can profile the ng serve using NG_CLI_PROFILING enviorment variable. So something like NG_CLI_PROFILING=$HOME/build ng serve would record and generate a CPU profile that chrome can load and show you performance analysis and provide a link to it here.
And out of curiosity can you also run npm ls webpack-sources? This should not return any version prior to 1.2.0.

@alan-agius4

@alan-agius4 will try asap, thank you

Hello,
I had exactly the same issue tonight... and I found one solution ....

package.json/devDependencies :
I downgraded from 0.11
"@angular-devkit/build-angular": "^0.6.8",

and now it is fast (1.2 sec).... (without aot)
then I tested 0.8.8 ... it is OK (1.2 sec)
then I tested 0.10.7 ... slow for the first change (8 sec), then OK
then I tested 0.12.0-beta.0 .. it is not OK (11 seconds at 1st, 2nd, 3rd change)
so I go back to 0.10.7 ....

For me, it is still ~50 seconds for ng serve .. but then a change is 1 second instead of 12 seconds with 0.11
(with --aot it is 157 seconds to serve and between 50 and 157 for a basic change)

My Config :

Angular CLI: 7.1.1
Node: 10.14.1
OS: win32 x64
Angular: 7.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 7.1.1
@ngtools/webpack 6.0.8
@schematics/angular 7.1.1
@schematics/update 0.11.1
rxjs 6.3.3
typescript 3.1.3
webpack 4.8.3

I have made some test with const _benchmark = true; and @angular-devkit/build-angular 0.11.1 vs 0.10.7.

What I see is AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram slower in 0.11.1 :

Run	v0.11.1	v0.10.7
1st	5737.993ms	3809.414ms
2nd	3647.592ms	132.386ms
3rd	3084.749ms	52.066ms

@alan-agius4

@alan-agius4 Also the longest part
when compiling is finished, dev servers show this

i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /runtime.js
i ｢wdm｣: wait until bundle finished: /polyfills.js
i ｢wdm｣: wait until bundle finished: /styles.js
i ｢wdm｣: wait until bundle finished: /scripts.js
i ｢wdm｣: wait until bundle finished: /vendor.js
i ｢wdm｣: wait until bundle finished: /main.js

Date: 2018-12-10T12:33:03.273Z - Hash: 20e56d973a6541e3360f - Time: 98224ms
216 unchanged chunks
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /scripts.js.map
i ｢wdm｣: wait until bundle finished: /styles.js.map
i ｢wdm｣: wait until bundle finished: /assets/i18n/de.json
i ｢wdm｣: wait until bundle finished: /assets/i18n/en.json
i ｢wdm｣: wait until bundle finished: /containers-products-container-products-container-module.js
i ｢wdm｣: wait until bundle finished: /common.js

Why is it so long ? I guess it should not be recompiled each time

Same issue.
Any workarounds ?

@AndriiDidkivsky

@AndriiDidkivsky downgrade @angular-devkit/build-angular to 0.10.7

npm i @angular-devkit/build-angular@0.10.7 --save-dev

@igorivaniuk

@igorivaniuk sure? have same issue with 0.10.6

@djleonskennedy

@djleonskennedy i use 0.10.7 for now, and all perfectly.


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.1.2
Node: 10.13.0
OS: linux x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.1.2
@angular/cdk                      7.1.1
@angular/flex-layout              7.0.0-beta.19
@angular/material                 7.1.1
@ngtools/webpack                  7.0.7
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Date: 2018-12-11T12:37:27.240Z - Hash: 4d7e5deaa20b9ad72c9e - Time: 109ms
3 unchanged chunks
chunk {main} main.js, main.8977aecd0bb97b10f1a4.hot-update.js (main) 199 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2018-12-11T12:37:50.575Z - Hash: 00a3ec9ecfa63f5286fe - Time: 107ms
3 unchanged chunks
chunk {main} main.js, main.4d7e5deaa20b9ad72c9e.hot-update.js (main) 199 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2018-12-11T12:47:48.582Z - Hash: 91cd5715b1a62a6f5c3f - Time: 1736ms
3 unchanged chunks
chunk {main} main.js, main.00a3ec9ecfa63f5286fe.hot-update.js (main) 202 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2018-12-11T12:48:18.096Z - Hash: 0547970366cf928e0100 - Time: 155ms
3 unchanged chunks
chunk {main} main.js, main.91cd5715b1a62a6f5c3f.hot-update.js (main) 202 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2018-12-11T12:49:27.900Z - Hash: 3dbe60a6ed940a2ca8bd - Time: 112ms
3 unchanged chunks
chunk {main} main.js, main.0547970366cf928e0100.hot-update.js (main) 202 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

Date: 2018-12-11T12:49:58.583Z - Hash: a718ac8b13c6a39d89a9 - Time: 210ms
3 unchanged chunks
chunk {main} main.js, main.3dbe60a6ed940a2ca8bd.hot-update.js (main) 202 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 30.9 kB [entry] [rendered]
ℹ ｢wdm｣: Compiled successfully.

@igorivaniuk

@igorivaniuk how big your project ?

@djleonskennedy

@djleonskennedy small, about 20 components.

We have a big project (75k LoC), with "@angular-devkit/build-angular": "~0.11.1", e have recompile time about 20s

with version "@angular-devkit/build-angular": "^0.10.7" it's about 6s

Hi all,

I've been looking into this regression in #13102 (comment). At this point I'm very confident that these two issues are the same and it's better if we continue the discussion there.

Please subscribe to that issue for further updates.

Meanwhile, using @angular-devkit/build-angular@0.10.7 is a good workaround for the performance regression.

If you have a medium/large size project it will might help to increase the node memory limit (#5618 (comment)).

@filipesilva

@filipesilva Seems fixed in 0.12.0, thank you

Hi,

after upgrading our application to angular8, i have similar problems with ng server. In my case ng serve hangs / hold on and nothing happens.

git:(angular8) node --max_old_space_size=4048 ./node_modules/.bin/ng serve es2015 --no-progress --verbose=true --sourceMap=false
AngularCompilerPlugin._setupOptions: 3.813ms
AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram: 5436.932ms
AngularCompilerPlugin._make.resolveEntryModuleFromMain: 14.080ms
AngularCompilerPlugin._listLazyRoutesFromProgram.createProgram: 1.063ms
AngularCompilerPlugin._listLazyRoutesFromProgram.listLazyRoutes: 2900.738ms
AngularCompilerPlugin._emit.ts.getOptionsDiagnostics: 0.154ms
AngularCompilerPlugin._emit.ts.gatherDiagnostics.ts.getSyntacticDiagnostics: 1.151ms

Angular CLI: 8.1.3
Node: 12.7.0
OS: darwin x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.801.3
@angular-devkit/build-angular 0.801.3
@angular-devkit/build-optimizer 0.801.3
@angular-devkit/build-webpack 0.801.3
@angular-devkit/core 8.1.3
@angular-devkit/schematics 8.1.3
@angular/cdk 7.3.7
@angular/http 7.2.15
@angular/material 7.3.7
@angular/material-moment-adapter 7.3.7
@ngtools/webpack 8.1.3
@schematics/angular 8.1.3
@schematics/update 0.801.3
rxjs 6.5.2
typescript 3.4.5
webpack 4.35.2

i have no idea how to debug this problem. Our projects include 8 internal library and the main application has ~90k lines of code. Any ideas how to get more information about the process or how to get more verbose information.

Thanks!

@moohkooh

@moohkooh try @angular-devkit/build-angular@0.802.0-rc.0 with Angular 8.2.0-rc.0 and TypeScript 3.5.3. There were some performance issues addressed in those versions. If that doesn't really work can you open a new issue with a repro please?

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

Extremely slow ng serve performance [Source Map compiling] #13087

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)

Versions

Package Version

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Package Version

17 remaining items

Package Version

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Extremely slow ng serve performance [Source Map compiling] #13087

Description

Bug Report or Feature Request (mark with an x)

Command (mark with an x)

Versions

Package Version

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Activity

jmsegrev commented on Nov 30, 2018

alan-agius4 commented on Dec 3, 2018

mselerin commented on Dec 3, 2018

djleonskennedy commented on Dec 3, 2018

alan-agius4 commented on Dec 3, 2018

mselerin commented on Dec 3, 2018

djleonskennedy commented on Dec 4, 2018

alan-agius4 commented on Dec 4, 2018

djleonskennedy commented on Dec 4, 2018

samfrach commented on Dec 4, 2018

Package Version

mselerin commented on Dec 5, 2018

17 remaining items

djleonskennedy commented on Dec 10, 2018

AndriiDidkivsky commented on Dec 11, 2018

igorivaniuk commented on Dec 11, 2018

djleonskennedy commented on Dec 11, 2018

igorivaniuk commented on Dec 11, 2018

djleonskennedy commented on Dec 11, 2018

igorivaniuk commented on Dec 11, 2018

elvirdolic commented on Dec 12, 2018

filipesilva commented on Dec 13, 2018

djleonskennedy commented on Jan 10, 2019

moohkooh commented on Jul 31, 2019

Package Version

filipesilva commented on Jul 31, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)