Show gzip compression size after build

[splincode]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

$ ng build
- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
- Generating ES5 bundles for differential loading...
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
- Copying assets...
✔ Copying assets complete.
- Generating index html...
✔ Index html generation complete.
Initial Chunk Files                    | Names                |      Size
main-es5.99064527cd544b123bc9.js       | main                 | 175.56 kB
main-es2015.99064527cd544b123bc9.js    | main                 | 149.94 kB
polyfills-es5.90dd4e2aec326855ce1b.js  | polyfills-es5        |  93.01 kB
styles.0b064ae4068cf2388220.css        | styles               |   5.02 kB
runtime-es2015.a0da3e8506fcfd740c60.js | runtime              |   1.16 kB
runtime-es5.a0da3e8506fcfd740c60.js    | runtime              |   1.16 kB
| Initial ES5 Total    | 274.75 kB
| Initial ES2015 Total | 156.12 kB
Build at: 2021-07-21T10:58:01.250Z - Hash: 2398fbe5637097cd0447 - Time: 17873ms

Describe the solution you'd like

$ ng build
- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
- Generating ES5 bundles for differential loading...
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
- Copying assets...
✔ Copying assets complete.
- Generating index html...
✔ Index html generation complete.
Initial Chunk Files                    | Names                |      Size                 |      GZip
main-es5.99064527cd544b123bc9.js       | main                 | 175.56 kB                 | 100.26 kB
main-es2015.99064527cd544b123bc9.js    | main                 | 149.94 kB                 | 80.14 kB
polyfills-es5.90dd4e2aec326855ce1b.js  | polyfills-es5        |  93.01 kB                 |  43.11 kB
styles.0b064ae4068cf2388220.css        | styles               |   5.02 kB                 |   2.02 kB
runtime-es2015.a0da3e8506fcfd740c60.js | runtime              |   1.16 kB                 |   0.42 kB
runtime-es5.a0da3e8506fcfd740c60.js    | runtime              |   1.16 kB                 |   0.42 kB
| Initial ES5 Total    | 274.75 kB | 154.75 kB
| Initial ES2015 Total | 156.12 kB | 86.12 kB
Build at: 2021-07-21T10:58:01.250Z - Hash: 2398fbe5637097cd0447 - Time: 17873ms

In many ways, we always know that the real size of a completely different will be transmitted over the network by the user

[alan-agius4]

This is quite interesting however, I think this is quite misleading because there is no real equation to determine the true gzip size that the file will be served with from the actual web-server.

Gzip have 9 different compression levels which can vary from one server or hosting provider to another. The higher the compression level, the smaller the file and the more computationally expensive the compression is. Typically hosting providers set the level somewhere the middle range, to have a good balance between size and compression cost.

Considering this, I don’t think it would be a good idea to display these sizes, since one might expect that, what we display is what is transferred over the network, which in many cases it will not be the case for the reasons explained above.

All in all, while compression would improve one of the performance matrix which is reducing the data transfer over the wire. The file size still matters as compressing the file with Gzip or even Brotli will not improve the scripting time, where the true size of the file matters.

[splincode]

 Then by what parameters does the webpack bundle analyzer display sizes in gzip?

[alan-agius4]

It uses gzip-size, which uses Gzip level 9
https://github.com/sindresorhus/gzip-size/blob/fdb1ec139fef8fec1fb3e2c8219f1fc87b279128/index.js#L8.

This means that webpack-bundle-analyzer displays the smallest possible gzip size, but it is very unlikely this reflects the true gzipped size served by a web-server. Since, it's highly unlikely that a web-server will use gzip level 9.

[splincode]

I should close issue?

[alan-agius4]

We did discuss this in our weekly meeting, and we decided that providing an "estimate transfer size" would be beneficial. We also discussed that this size should be done by using Node.JS Brotli API.

[santoshyadavdev]

Hey @alan-agius4 let me know if I can take this one.