cli 1.5.0 - slower build, larger bundle size and weird zone behaviour

[arminbaljic]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 6.4.0
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router
@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

I am having few issues with new version of Angular CLI. First is bundle size, for example, if a project is served with "angular-cli" version 1.4.9 I have this output:

ng serve --env=local

Date: 2017-11-12T16:09:30.369Z                                                          
Hash: cf712da63d384d1e9ee8
Time: 21471ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 632 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 316 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 180 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.87 MB [initial] [rendered]

ng serve -prod

Date: 2017-11-12T16:12:32.743Z                                                        
Hash: 2632294e70832c28ecfe
Time: 55478ms
chunk {0} polyfills.7f538fd6bbd74239e208.bundle.js (polyfills) 96.9 kB {4} [initial] [rendered]
chunk {1} main.f8739061dbf966754770.bundle.js (main) 542 kB {3} [initial] [rendered]
chunk {2} styles.a0ad8d98bec2f6beb168.bundle.css (styles) 118 kB {4} [initial] [rendered]
chunk {3} vendor.a8fd3d4615ed76d60848.bundle.js (vendor) 2.41 MB [initial] [rendered]
chunk {4} inline.63e09226077747646210.bundle.js (inline) 1.45 kB [entry] [rendered]

But if a project is served using "angular-cli" version 1.5.0:

ng serve --env=local

Date: 2017-11-12T15:15:39.281Z                                                          
Hash: b5fb7628959ac5ba0a92
Time: 20235ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 1.72 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 972 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 465 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 20.1 MB [initial] [rendered]

ng serve --prod

Date: 2017-11-12T15:50:22.963Z                                                          
Hash: b6b5dd7ab36c8d83b377
Time: 106645ms
chunk {0} main.9f2e56c2ea2b6cb00ee8.bundle.js (main) 2.72 MB [initial] [rendered]
chunk {1} polyfills.f3a5d662db37ccc8c68b.bundle.js (polyfills) 99.5 kB [initial] [rendered]
chunk {2} styles.cf3a9aa5073d6e36d7b2.bundle.css (styles) 118 kB [initial] [rendered]
chunk {3} inline.f542afaf0a0bc99184a5.bundle.js (inline) 1.45 kB [entry] [rendered]

Please notice that vendor bundle is three to four time larger. Why do we have this large discrepancy in the size of a bundle?

Additionally, there is an issue with speed and request duration. For example, request that gets a document by ID, if a project is served using older version duration of this request is about 40 - 50ms. With the new build, when I click the button to fetch document nothing is happening for few seconds and in total request duration is more than 10 seconds or request gets stuck for some unknown reason. Nothing is shown in console. Am I missing some configuration or is it something else?

[clydin]

For development, a different source map type is used that is integrated with the JS bundle. This increases the size but allows for faster rebuild times. This is not used in production builds.

For production builds, the time has increased because the build optimizer is now enabled by default which in the case above has decreased the overall size by at least 200KB. The build optimizer can be disabled by using the --no-build-optimizer command line option, if desired.

As to the third issue, can you open a separate issue with more detail on the problem as well as a minimal reproduction, if possible?

[Nightapes]

I have also increased production packages with 1.5.0

1.4.9

node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod --base-href ./ --aot

@angular/cli: 1.4.9
node: 8.1.4
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.4.2

Time: 218794ms
chunk {0} polyfills.e7fb9c29745da80896c8.bundle.js, polyfills.e7fb9c29745da80896c8.bundle.js.map (polyfills) 150 kB {4} [initial] [rendered]
chunk {1} styles.9305551b66515fd1d3c5.bundle.css, styles.9305551b66515fd1d3c5.bundle.css.map (styles) 388 kB {4} [initial] [rendered]
chunk {2} main.1eb396dcc9b66278a72a.bundle.js, main.1eb396dcc9b66278a72a.bundle.js.map (main) 1.5 MB {3} [initial] [rendered]
chunk {3} vendor.fcb9cb4183b76e83d8f7.bundle.js, vendor.fcb9cb4183b76e83d8f7.bundle.js.map (vendor) 1.71 MB [initial] [rendered]
chunk {4} inline.7beaab9eab3d28a46f6d.bundle.js, inline.7beaab9eab3d28a46f6d.bundle.js.map (inline) 1.51 kB [entry] [rendered]

1.5.0

node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod --base-href ./ --aot --no-build-optimize

Angular CLI: 1.5.0
Node: 8.1.4
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router


@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Time: 228727ms
chunk {0} polyfills.59559fe0d1360e07a9fd.bundle.js, polyfills.59559fe0d1360e07a9fd.bundle.js.map (polyfills) 149 kB [initial] [rendered]
chunk {1} styles.a9e84971fa23bb88834c.bundle.css, styles.a9e84971fa23bb88834c.bundle.css.map (styles) 390 kB [initial] [rendered]
chunk {2} main.eda15a6783af2a8420cc.bundle.js, main.eda15a6783af2a8420cc.bundle.js.map (main) 1.63 MB [initial] [rendered]
chunk {3} vendor.5cd468af3734e2e11d21.bundle.js, vendor.5cd468af3734e2e11d21.bundle.js.map (vendor) 2.68 MB [initial] [rendered]
chunk {4} inline.802c33cf4044edf71522.bundle.js, inline.802c33cf4044edf71522.bundle.js.map (inline) 1.51 kB [entry] [rendered]

[mbx2015]

I have the same issue but I don't know its source.

[hanvyj]

Same, my main budle increased from 246kB to 3.6MB after updating to angular 5! Production build is also taking >20 minutes where it previously took 2.

[arminbaljic]

@clydin I have revisited issue with NgZone. If the application is served with 1.4.9 version everything works fine but if I use 1.5.0 version this error is shown in the console:

VM52:164 WebSocket connection to 'ws://localhost:9000/sockjs-node/010/r5tqsitg/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400.

And a few seconds later this one:

client:164 [WDS] Disconnected!

Additionally, it looks like fonts and images happen to load with some kind of delay. The homepage is shown and only after 4+ seconds keywords will be replaced with material icons.

Network screen:

[filipesilva]

There was a similar report by @teabagp in angular/angular#20414 that shows this behaviour.

It can be reproduced by closing the https://github.com/teabagp/testapp repro.

Using Angular CLI 1.5 with Angular 5 yields these bundles:

kamik@T460p MINGW64 /d/sandbox/memory/devextreme-1.5 (master)
$ npm run ng -- build --prod --build-optimizer

> testapp3@0.0.0 ng D:\sandbox\memory\devextreme-1.5
> ng "build" "--prod" "--build-optimizer"

Date: 2017-11-14T16:49:49.445Z
Hash: 6a26ce2fa40838be799d
Time: 104027ms
chunk {0} main.95145bb94aec70fdbf9a.bundle.js (main) 4.31 MB [initial] [rendered]
chunk {1} polyfills.231da0978310c502f9fd.bundle.js (polyfills) 61.1 kB [initial] [rendered]
chunk {2} styles.7e030af824cf47ccb4b6.bundle.css (styles) 432 kB [initial] [rendered]
chunk {3} inline.ede08f418c31b5c05b4d.bundle.js (inline) 1.45 kB [entry] [rendered]

Using Angular CLI 1.4.9 with Angular 4.4.6 yields these bundles:

kamik@T460p MINGW64 /d/sandbox/memory/devextreme-1.4 (master)
$ npm run ng -- build --prod --build-optimizer

> testapp3@0.0.0 ng D:\sandbox\memory\devextreme-1.4
> ng "build" "--prod" "--build-optimizer"

Date: 2017-11-14T16:23:11.099Z
Hash: 9ea120da2d365dd155b0
Time: 31107ms
chunk {0} main.749cc747f25e73c3ba3a.bundle.js (main) 489 kB {3} [initial] [rendered]
chunk {1} polyfills.f06f39a42e33ad4cd34e.bundle.js (polyfills) 61.3 kB {3} [initial] [rendered]
chunk {2} styles.7e030af824cf47ccb4b6.bundle.css (styles) 432 kB {3} [initial] [rendered]
chunk {3} inline.418dacdad84f8c37ff07.bundle.js (inline) 1.45 kB [entry] [rendered]

So main.bundle.js went from 489kB to 4.31MB.

I also observed double the memory usage (1080MB on 1.5 versus 580MB on 1.4), so this problem might be related to #5618 right now.

[hanvyj]

@filipesilva Yes, that's exactly what I'm seeing - the main bundle specifically has gone from 246kB to 3.6MB in my project, I was also experiencing issue #5618, but that could be unrelated.

[alvachien]

I am facing the same issue.

[hanvyj]

My main bundle has gone down from the 3.6MB to just under 2MB so a great improvement with the 1.5.2 patch. Still 4x larger than the previous 246KB it was with the <1.5 CLI, is this expected? The vendor bundle has gone, but the overall size is larger.

[clydin]

Is that for a production or development target?

[hanvyj]

Full build command node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --aot --build-optimizer --output-path=dist/client

output:

Date: 2017-11-17T08:42:53.579Z
Hash: b6eb198c7a8d9bb24f33
Time: 386696ms
chunk {0} 0.aa9a07b87030086e0f08.chunk.js (common) 1.44 MB  [rendered]
chunk {1} 1.dcfba0786f8e9bd66de3.chunk.js () 39.6 kB  [rendered]
chunk {2} 2.eafe0a318a81c47283c1.chunk.js () 214 kB  [rendered]
chunk {3} 3.bbe08ecb21fb9249e28c.chunk.js () 436 kB  [rendered]
chunk {4} 4.a57bbe8dcbebb138855f.chunk.js () 153 kB  [rendered]
chunk {5} 5.0acf7c80d0c80d3afda7.chunk.js () 736 kB  [rendered]
chunk {6} 6.61dfd4d2d88ba2410748.chunk.js () 24.5 kB  [rendered]
chunk {7} 7.0f55fcc2720c41292e92.chunk.js () 33.6 kB  [rendered]
chunk {8} 8.73f5bab59557565d55d9.chunk.js () 21.7 kB  [rendered]
chunk {9} 9.d2b8399d6ef9720ebb9d.chunk.js () 33.2 kB  [rendered]
chunk {10} 10.cd61b3018979aa158966.chunk.js () 15.3 kB  [rendered]
chunk {11} 11.727682e04e133a76eb77.chunk.js () 11.2 kB  [rendered]
chunk {12} 12.f8408e3b42afdce852e6.chunk.js () 51.8 kB  [rendered]
chunk {13} main.0ee16b122da822cf8728.bundle.js (main) 1.95 MB [initial] [rendered]
chunk {14} polyfills.bb03855dbb349d0dc937.bundle.js (polyfills) 218 kB [initial] [rendered]
chunk {15} styles.60c5a27346fbeea9c352.bundle.css (styles) 236 kB [initial] [rendered]
chunk {16} inline.b88678cc1f2690ffb27e.bundle.js (inline) 1.78 kB [entry] [rendered]

Compared to old output (with a few lines less code mind):

Date: 2017-11-17T18:56:55.677Z
Hash: 08315125d2769ecc9c98
Time: 182751ms
chunk {0} 0.ab2e627cda48eb9be2d9.chunk.js (common) 1.14 MB {14}  [rendered]
chunk {1} 1.4f6162d13f7f207959be.chunk.js () 43.3 kB {2} {3} {4} {6} {7} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {2} 2.2dd8ae037e28e3274841.chunk.js () 221 kB {1} {3} {4} {6} {7} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {3} 3.eb45441fd327468d2afb.chunk.js () 504 kB {1} {2} {4} {6} {7} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {4} 4.f25be8ee67a3001d281d.chunk.js () 178 kB {1} {2} {3} {6} {7} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {5} 5.67c681313e81e97a4b2b.chunk.js () 729 kB {14}  [rendered]
chunk {6} 6.56c051390824074ac52e.chunk.js () 28.6 kB {1} {2} {3} {4} {7} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {7} 7.934486c3e06e321376ab.chunk.js () 39.3 kB {1} {2} {3} {4} {6} {8} {9} {10} {11} {12} {14}  [rendered]
chunk {8} 8.04289bfe130e80cca261.chunk.js () 25.6 kB {1} {2} {3} {4} {6} {7} {9} {10} {11} {12} {14}  [rendered]
chunk {9} 9.1de9767168f8376a570e.chunk.js () 38.8 kB {1} {2} {3} {4} {6} {7} {8} {10} {11} {12} {14}  [rendered]
chunk {10} 10.ac19c0f1ff31f76ef682.chunk.js () 18.6 kB {1} {2} {3} {4} {6} {7} {8} {9} {11} {12} {14}  [rendered]
chunk {11} 11.9d73d86023e3ce894b6e.chunk.js () 13.8 kB {1} {2} {3} {4} {6} {7} {8} {9} {10} {12} {14}  [rendered]
chunk {12} 12.464cc08105e78264cd1b.chunk.js () 58.8 kB {1} {2} {3} {4} {6} {7} {8} {9} {10} {11} {14}  [rendered]
chunk {13} polyfills.af6447d789b3807e27dd.bundle.js (polyfills) 217 kB {17} [initial] [rendered]
chunk {14} main.8f324e216b1c01d2578b.bundle.js (main) 246 kB {16} [initial] [rendered]
chunk {15} styles.60c5a27346fbeea9c352.bundle.css (styles) 236 kB {17} [initial] [rendered]
chunk {16} vendor.36ebeb19f944489f18c4.bundle.js (vendor) 1.77 MB [initial] [rendered]
chunk {17} inline.a5d7b8daa16a38fb64df.bundle.js (inline) 1.78 kB [entry] [rendered]

[hanvyj]

Hmm, I took the old branch and upgraded the CLI only to 1.5.2 (not updating angular to angular 5) and it comes up with a similar result to the 1.4:

Date: 2017-11-17T19:09:03.313Z
Hash: 9fd41304c0e956f1d992
Time: 206379ms
chunk {0} 0.cc0de07f65f22af44a76.chunk.js (common) 1.14 MB  [rendered]
chunk {1} 1.f9f13ceb4020d1d44502.chunk.js () 41.9 kB  [rendered]
chunk {2} 2.bac0af7449c6d82ac5ec.chunk.js () 221 kB  [rendered]
chunk {3} 3.f5785ca390e597848951.chunk.js () 503 kB  [rendered]
chunk {4} 4.9fae35908f69cb7c9372.chunk.js () 178 kB  [rendered]
chunk {5} 5.67c681313e81e97a4b2b.chunk.js () 727 kB  [rendered]
chunk {6} 6.64ae2f6daf9edf27f4e4.chunk.js () 28.6 kB  [rendered]
chunk {7} 7.e7a1fb9fff66f98cf944.chunk.js () 39.3 kB  [rendered]
chunk {8} 8.621fed4947fde2598575.chunk.js () 25.6 kB  [rendered]
chunk {9} 9.41dbbe94eca7fd33ab0b.chunk.js () 38.7 kB  [rendered]
chunk {10} 10.bddd28a38a468aa01abd.chunk.js () 18.6 kB  [rendered]
chunk {11} 11.d8ac09671eea9508c981.chunk.js () 13.8 kB  [rendered]
chunk {12} 12.6c700ae2478879f6ea97.chunk.js () 58.7 kB  [rendered]
chunk {13} polyfills.91ff94698d62888b96ec.bundle.js (polyfills) 217 kB [initial] [rendered]
chunk {14} main.76557a5fbb6f09435f7c.bundle.js (main) 246 kB [initial] [rendered]
chunk {15} styles.60c5a27346fbeea9c352.bundle.css (styles) 236 kB [initial] [rendered]
chunk {16} vendor.85fdc4149a785b057773.bundle.js (vendor) 1.77 MB [initial] [rendered]
chunk {17} inline.4db494c643c833c6119f.bundle.js (inline) 1.78 kB [entry] [rendered]

[clydin]

I did the math pretty quickly but the new total build is about 100KB larger. With the new main bundle (which includes vendor) being about 7KB smaller. Overall that's about a 2% increase in total size. So not ideal but not horrible either. The main bundle is also slightly smaller which is in the critical path so that at least means a slightly shorter bootstrap time. The changes in lazy loaded chunk size especially the common chunk are definitely areas that could be looked at.

Angular 4 cannot use the new Angular 5 AOT compiler which is why the results look similar to 1.4.

[hanvyj]

Great, the v5 build has a few extra lines of code that probably account for the difference. When I looked at the lack of a vendor bundle I did think that the new main might just have it incorporated. Thanks!

[angular-automatic-lock-bot]

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