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
- fix(@ngtools/webpack): remove app decorators on AOT Based on @clydin's great work in #8456. I had to adapt it to use the StandardTransform model we use currently but the logic is his. Should address... — committed to filipesilva/angular-cli by filipesilva 7 years ago
- fix(@ngtools/webpack): remove app decorators on AOT Based on @clydin's great work in #8456. I had to adapt it to use the StandardTransform model we use currently but the logic is his. Should address... — committed to filipesilva/angular-cli by filipesilva 7 years ago
- fix(@ngtools/webpack): remove app decorators on AOT Based on @clydin's great work in #8456. I had to adapt it to use the StandardTransform model we use currently but the logic is his. Should address... — committed to angular/angular-cli by filipesilva 7 years ago
- fix(@ngtools/webpack): remove app decorators on AOT Based on @clydin's great work in #8456. I had to adapt it to use the StandardTransform model we use currently but the logic is his. Should address... — committed to angular/angular-cli by filipesilva 7 years ago
- fix(@ngtools/webpack): remove app decorators on AOT Based on @clydin's great work in #8456. I had to adapt it to use the StandardTransform model we use currently but the logic is his. Should address... — committed to d2clouds/speedray-cli by filipesilva 7 years ago
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:
Using Angular CLI 1.4.9 with Angular 4.4.6 yields these bundles:
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.