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

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?

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 15 (4 by maintainers)

Commits related to this issue

Most upvoted comments

There was a similar report by @teabagp in https://github.com/angular/angular/issues/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 https://github.com/angular/angular-cli/issues/5618 right now.

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.