Skip to content
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

Budget warnings calculated incorrectly with esbuild builder #29040

Open
1 task done
rubiesonthesky opened this issue Dec 4, 2024 · 2 comments
Open
1 task done

Budget warnings calculated incorrectly with esbuild builder #29040

rubiesonthesky opened this issue Dec 4, 2024 · 2 comments

Comments

@rubiesonthesky
Copy link

rubiesonthesky commented Dec 4, 2024

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18 (Well, with webpack, I did not test esbuild builder with Angular 18)

Description

This inconsistency is between esbuild and webpack builders. I have set that "styles" budget is 310.82kB, but I get warning while building saying styles failed to meet minimum budget. Budget 317.25 kB was not met by 6.44 kB with a total of 310.82 kB..

After writing scripts to calculate these sizes myself, it seems that in version 18 with webpack builder, bytes where converted to kB with multiplier 1024. With esbuild, it seems that kB sizes are calculated with multiplied 1000. So when stats.json says bytes: 34607, you need to multiply it with 1000 to get the same size that build report gives

styles-7LUPB3L5.css   | styles                            | 310.82 kB |                33.90 kB
polyfills-4HAGG4WH.js | polyfills                         |  34.61 kB |                11.34 kB

But then it gives warnings

▲ [WARNING] styles failed to meet minimum budget. Budget 317.25 kB was not met by 6.44 kB with a total of 310.82 kB.
▲ [WARNING] polyfills failed to meet minimum budget. Budget 35.34 kB was not met by 728 bytes with a total of 34.61 kB.

My angular.json has this

                {
                  "type": "bundle",
                  "name": "styles",
                  "baseline": "310.816kB",
                  "warning": "1kB",
                  "error": "100kB"
                },
                {
                  "type": "bundle",
                  "name": "polyfills",
                  "baseline": "34.607kB",
                  "warning": "0.1kB",
                  "error": "5kB"
                },

So I think those warnings are reported incorrectly. It seems that the values are taken from angular.json and then multiplied to get 317.25 kB and 35.34 kB when they should not be multiplied.

Minimal Reproduction

I can repro this with new Angular 19 app, which uses "builder": "@angular-devkit/build-angular:application",

I added budget constraint to angular.json

                {
                  "type": "bundle",
                  "name": "main",
                  "baseline": "208.23kB",
                  "warning": "1b",
                  "error": "5kB"
                },

After which I get warning

❯ ng build
Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-IEYM3F25.js      | main          | 208.23 kB |                56.85 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 242.75 kB |                68.13 kB

Application bundle generation complete. [1.775 seconds]

▲ [WARNING] main failed to meet minimum budget. Budget 213.23 kB was not met by 4.99 kB with a total of 208.23 kB.

Exception or Error


Your Environment

This is from newly created project



     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.0.2
Node: 20.11.1
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.2
@angular-devkit/build-angular   19.0.2
@angular-devkit/core            19.0.2
@angular-devkit/schematics      19.0.2
@angular/cli                    19.0.2
@schematics/angular             19.0.2
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

No response

@rubiesonthesky
Copy link
Author

rubiesonthesky commented Dec 4, 2024

It seems that format-bytes uses multiplier 1000 but bundle calculator uses 1024.

I think, it would be nice, that with 1024 multiplier the unit would be kiB etc to make it more clear how they are calculated.

@rubiesonthesky
Copy link
Author

Patching bundle calculator to use 1000 locally fixed the problem! :)

@alan-agius4 alan-agius4 changed the title Budget warnings calculated inccorectly with esbuild builder Budget warnings calculated incorrectly with esbuild builder Dec 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants