Production bundle size information does not match real file sizes

[DorianGrey]

Bug Report or Feature Request (mark with an x)

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

I've recognized that the bundle sizes displayed by the production build do not match the actual file sizes. This is quite misleading when trying to figure out how to optimize these sizes, while it may not be required at all.
On a new generated project - without further modifications - I've executed ng build --prod, which displayed this information:

Hash: cbfbfa38570350ee0a54                                                              
Time: 8786ms
chunk    {0} polyfills.71b130084c52939ca448.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.1fbd003a57c08e9f4efa.bundle.js (main) 13.6 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.b3913f9216978a61a873.bundle.js (vendor) 849 kB [initial] [rendered]
chunk    {4} inline.2c504ac70e900c76a9d2.bundle.js (inline) 0 bytes [entry] [rendered]

Doing a ls | xargs du -h in the dist directory afterwards resulted in (shortened):

8,0K	3rdpartylicenses.txt
16K	favicon.ico
12K	index.html
12K	inline.2c504ac70e900c76a9d2.bundle.js
16K	main.1fbd003a57c08e9f4efa.bundle.js
72K	polyfills.71b130084c52939ca448.bundle.js
8,0K	styles.d41d8cd98f00b204e980.bundle.css
220K	vendor.b3913f9216978a61a873.bundle.js

Which shows a drastically difference - e.g. for the vendor bundle, we're talking about a difference of 629 kB.

Versions.

@angular/cli: 1.2.1
node: 6.10.2
os: linux x64
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/compiler-cli: 4.3.0
@angular/platform-server: 4.3.0
@ngtools/webpack: 1.5.1

OS: Ubuntu 16.04.

Repro steps.

• Generate a new project, e.g. using ng new angular-cli-test-project.
• Move to that directory.
• Use ng build --prod to create a production build.
• Compare the displayed file sizes from the build with the real ones, e.g. using ls | xargs du -h in the dist directory.
• Recognize that these do not match - they might differ quite drastically.

The log given by the failure.

No specific log, just the stuff mentioned in the description above.

Desired functionality.

The bundle sizes displayed by the production build should at least approximately match the real file sizes.

Mention any other details that might be useful.

I'm currently investigating if it makes sense to switch from my own template to angular-cli as a base for new projects. An error like this does not occur when building this template project, although it performs an (almost?) equivalent set of build steps and optimizations.

[clydin]

The webpack output currently used displays the pre-optimization sizes.

This PR addresses the issue: #6989

[shairez]

@Brocco can be closed

[DorianGrey]

Sorry for the duplicate - haven't found the first report of this issue in time.
For reference: #3565

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