Skip to content

Show gzip compression size after build #21394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 of 15 tasks
splincode opened this issue Jul 22, 2021 · 7 comments · Fixed by #22172
Closed
1 of 15 tasks

Show gzip compression size after build #21394

splincode opened this issue Jul 22, 2021 · 7 comments · Fixed by #22172

Comments

@splincode
Copy link

🚀 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
Copy link
Collaborator

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
Copy link
Author

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

image

@alan-agius4
Copy link
Collaborator

alan-agius4 commented Jul 22, 2021

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
Copy link
Author

I should close issue?

@alan-agius4 alan-agius4 added area: @angular-devkit/build-angular feature Issue that requests a new feature labels Jul 22, 2021
@ngbot ngbot bot modified the milestone: Backlog Jul 22, 2021
@alan-agius4
Copy link
Collaborator

alan-agius4 commented Jul 22, 2021

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
Copy link
Contributor

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

@clydin clydin modified the milestones: Backlog, v13.1 Candidates Nov 9, 2021
clydin added a commit to clydin/angular-cli that referenced this issue Nov 16, 2021
…uild output report

When optimizations are enabled (either scripts or styles), an additional column will now be present in the output report shown in the console for an application build. This additonal column will display the estimated transfer size for each file as well as the total initial estimated transfer size for the initial files. The estimated transfer size is determined by calculating the compressed size of the file using brotli's default settings. In a development configuration (a configuration with optimizations disabled), the calculations are not performed to avoid any potential increase in rebuild speed due to the large size of unoptimized files.

Closes: angular#21394
clydin added a commit to clydin/angular-cli that referenced this issue Nov 16, 2021
…uild output report

When optimizations are enabled (either scripts or styles), an additional column will now be present in the output report shown in the console for an application build. This additonal column will display the estimated transfer size for each file as well as the total initial estimated transfer size for the initial files. The estimated transfer size is determined by calculating the compressed size of the file using brotli's default settings. In a development configuration (a configuration with optimizations disabled), the calculations are not performed to avoid any potential increase in rebuild speed due to the large size of unoptimized files.

Closes: angular#21394
clydin added a commit to clydin/angular-cli that referenced this issue Nov 17, 2021
…uild output report

When optimizations are enabled (either scripts or styles), an additional column will now be present in the output report shown in the console for an application build. This additonal column will display the estimated transfer size for each file as well as the total initial estimated transfer size for the initial files. The estimated transfer size is determined by calculating the compressed size of the file using brotli's default settings. In a development configuration (a configuration with optimizations disabled), the calculations are not performed to avoid any potential increase in rebuild speed due to the large size of unoptimized files.

Closes: angular#21394
dgp1130 pushed a commit that referenced this issue Nov 17, 2021
…uild output report

When optimizations are enabled (either scripts or styles), an additional column will now be present in the output report shown in the console for an application build. This additonal column will display the estimated transfer size for each file as well as the total initial estimated transfer size for the initial files. The estimated transfer size is determined by calculating the compressed size of the file using brotli's default settings. In a development configuration (a configuration with optimizations disabled), the calculations are not performed to avoid any potential increase in rebuild speed due to the large size of unoptimized files.

Closes: #21394
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 18, 2021
@clydin clydin removed their assignment Jun 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
4 participants