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.