Skip to content

Production bundle size information does not match real file sizes #7045

Closed
@DorianGrey

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions