Bundle budgets incorrectly erroring when differential loading is enabled

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Not sure

Description

When enabling differential loading on our app the bundle budgets started failing. You can see the issue in the terminal output here. Note how the reported file size is 3.73mb (this is correct) but the budget is erroring and says the outputted file is 4.88 MB. This was working ok with just an es2015 target, but as soon as we changed the browserslist file to support IE11 the budget started to error.

Lazy Chunk Files                            | Names                |      Size
15-es5.876ea0762db6ac92ac4f.js              | -                    |   4.00 MB
15-es2015.876ea0762db6ac92ac4f.js           | -                    |   3.73 MB

~omitted for brevity~

Error: 15-es2015.876ea0762db6ac92ac4f.js exceeded maximum budget. Budget 3.75 MB was not met by 1.13 MB with a total of 4.88 MB.

🔬 Minimal Reproduction

It seems to be caused by the anyScript budget

{
  "type": "anyScript",
  "maximumWarning": "400kb",
  "maximumError": "3.75mb"
},

And enabling differential loading

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11

If that’s not enough to reproduce please let me know and I can try and make a repo on github, just didn’t want to spend the time doing it in case a maintainer knows where the issue might be straight away 😄

🔥 Exception or Error


Error: 15-es2015.876ea0762db6ac92ac4f.js exceeded maximum budget. Budget 3.75 MB was not met by 1.13 MB with a total of 4.88 MB.

🌍 Your Environment

Angular CLI: 11.0.6
Node: 14.13.1
OS: darwin x64

Angular: 11.0.8
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/cdk                    9.0.1
@angular/cli                    11.0.6
@angular/google-maps            11.0.3
@schematics/angular             11.0.6
@schematics/update              0.1100.6
ng-packagr                      11.0.3
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

1 possible answer(s) on “Bundle budgets incorrectly erroring when differential loading is enabled

  1. I did some digging into this today and the root cause is in the any budget calculator, processResults is ignored inside the any script calculator so the wrong file size is used for the budgets. I think I can make a PR with a test case for this and probably a fix as well.