Budget warnings calculated incorrectly with esbuild builder

[rubiesonthesky]

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]

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]

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

[santoshyadavdev]

Thanks @rubiesonthesky your initial investigation saved me lot of time, raised a PR to fix this issue

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