Repository navigation
Production bundle size information does not match real file sizes #7045
Description
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 --prodto create a production build. - Compare the displayed file sizes from the build with the real ones, e.g. using
ls | xargs du -hin 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.
Activity
clydin commentedon Jul 19, 2017
The webpack output currently used displays the pre-optimization sizes.
This PR addresses the issue: #6989
shairez commentedon Jul 19, 2017
@Brocco can be closed
DorianGrey commentedon Jul 20, 2017
Sorry for the duplicate - haven't found the first report of this issue in time.
For reference: #3565
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.