ng build console output shows different chunk sizes than is actually created

[mdcotter]

OS?

Mac OSX (El Capitan)

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.9.2
os: darwin x64

Repro steps.

Updated to the latest angular-cli version
ran ng build --prod --env=stg --aot --no-sourcemap
compared ng output to ls -lh ./dist/

Output logs

Problem

Noticed that the ng build output displays the size as almost double of what is actually created. i.e it says the the 0.***.chunk.js is 2.06MB, but the file produced s only 938k. More the 2x the actual size.

[hansl]

That's an interesting issue. @TheLarkInn I'm pretty sure this is a webpack issue. What do you think?

[XAMelleOH]

Same for me here. Size reported in ng build output is 2 or even 3 times bigger than actual sizes.

[FunnyGhost]

For me it's 4 times higher :)

[sumitarora]

@XAMelleOH @FunnyGhost Is it still an issue?

[FunnyGhost]

Yeep. The build output says:
chunk {0} polyfills.c9a100b3d87d91c4b1e0.bundle.js (polyfills) 559 kB {4} [initial] [rendered]
chunk {1} main.5cf6336647718faef5a7.bundle.js (main) 483 kB {3} [initial] [rendered]
chunk {2} styles.401ba8300e14d7c38214.bundle.css (styles) 228 bytes {4} [initial] [rendered]
chunk {3} vendor.a054c48ca5a6abfbcf98.bundle.js (vendor) 4.12 MB [initial] [rendered]
chunk {4} inline.2f37a7929a6d875b1ffe.bundle.js (inline) 0 bytes [entry] [rendered]

and the actual sizes are
-a---- 1-6-2017 12:39 1460 inline.2f37a7929a6d875b1ffe.bundle.js
-a---- 1-6-2017 12:39 173244 main.5cf6336647718faef5a7.bundle.js
-a---- 1-6-2017 12:39 175742 polyfills.c9a100b3d87d91c4b1e0.bundle.js
-a---- 1-6-2017 12:39 154308 styles.401ba8300e14d7c38214.bundle.css
-a---- 1-6-2017 12:39 1663240 vendor.a054c48ca5a6abfbcf98.bundle.js

[renevall]

Still happening as of cli 1.1

[hansl]

There's a misunderstanding with sizes; these sizes are correct, but they're not what you're looking for.

In webpack, there are 2 sizes: assets and chunks. Assets are the actual outputted file sizes. Chunks are pre-seal and their sizes will always be different. Chunk size is basically the size of all the files in the chunk, before optimization, before adding decorations.

My PR just swap those to display the asset size of the first asset of the chunk. This should be more expected for you guys.

[hansl]

BTW, this is why you end up with a 0 bytes inline (which only contains code added by a plugin during the seal step) and CSS that has a size but nothing on disk (because the module itself has JavaScript code around it before ExtractTextPlugin runs and remove it).

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