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.

Sign up for GitHub

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

Jump to bottom

Budget warnings calculated incorrectly with esbuild builder #29040

Open
1 task done
rubiesonthesky opened this issue Dec 4, 2024 · 3 comments · May be fixed by #29234
Open
1 task done

Budget warnings calculated incorrectly with esbuild builder #29040

rubiesonthesky opened this issue Dec 4, 2024 · 3 comments · May be fixed by #29234
Labels
angular/build:application area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix

Comments

@rubiesonthesky
Copy link

rubiesonthesky commented Dec 4, 2024 •
edited
Loading

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 •
edited
Loading

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
santoshyadavdev added a commit to santoshyadavdev/angular-cli that referenced this issue Dec 28, 2024
@santoshyadavdev
fix(@angular-devkit/build-angular) : fix incorrect budget calculation
656defa 
Fixes angular#29040
@santoshyadavdev santoshyadavdev linked a pull request Dec 28, 2024 that will close this issue
Open
13 tasks
@santoshyadavdev
Copy link
Contributor

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

santoshyadavdev added a commit to santoshyadavdev/angular-cli that referenced this issue Dec 28, 2024
@santoshyadavdev
fix(@angular-devkit/build-angular) : fix incorrect budget calculation
3394f77 
Fixes angular#29040
santoshyadavdev added a commit to santoshyadavdev/angular-cli that referenced this issue Jan 7, 2025
@santoshyadavdev
fix(@angular/build): fix incorrect budget calculation
27710bb 
Fixes angular#29040
santoshyadavdev added a commit to santoshyadavdev/angular-cli that referenced this issue Jan 7, 2025
@santoshyadavdev
fix(@angular/build): fix incorrect budget calculation
5f49618 
Fixes angular#29040
santoshyadavdev added a commit to santoshyadavdev/angular-cli that referenced this issue Jan 7, 2025
@santoshyadavdev
fix(@angular/build): fix incorrect budget calculation
ae19e25 
This PR makes change to kB value which was incorrect earlier

Fixes angular#29040
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular/build:application area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular) : fix incorrect budget calculation santoshyadavdev/angular-cli
3 participants
@rubiesonthesky @santoshyadavdev @alan-agius4