Repository navigation
cli 1.5.0 - slower build, larger bundle size and weird zone behaviour #8457
Description
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?
Activity
clydin commentedon Nov 12, 2017
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-optimizercommand 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 commentedon Nov 13, 2017
I have also increased production packages with
1.5.01.4.9
node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod --base-href ./ --aot1.5.0
node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod --base-href ./ --aot --no-build-optimizembx2015 commentedon Nov 13, 2017
I have the same issue but I don't know its source.
hanvyj commentedon Nov 13, 2017
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 commentedon Nov 14, 2017
@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:
And a few seconds later this one:
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 commentedon Nov 14, 2017
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:
Using Angular CLI 1.4.9 with Angular 4.4.6 yields these bundles:
So
main.bundle.jswent 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 commentedon Nov 14, 2017
@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 commentedon Nov 15, 2017
I am facing the same issue.
fix(@ngtools/webpack): remove app decorators on AOT
fix(@ngtools/webpack): remove app decorators on AOT
fix(@ngtools/webpack): remove app decorators on AOT
fix(@ngtools/webpack): remove app decorators on AOT
hanvyj commentedon Nov 17, 2017
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 commentedon Nov 17, 2017
Is that for a production or development target?
hanvyj commentedon Nov 17, 2017
Full build command
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --aot --build-optimizer --output-path=dist/clientoutput:
Compared to old output (with a few lines less code mind):
hanvyj commentedon Nov 17, 2017
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:
clydin commentedon Nov 17, 2017
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 commentedon Nov 17, 2017
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!
fix(@ngtools/webpack): remove app decorators on AOT
angular-automatic-lock-bot commentedon Sep 7, 2019
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.
fix(@ngtools/webpack): remove app decorators on AOT