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

Bundle budgets incorrectly erroring when differential loading is enabled #19849

Closed
1 of 15 tasks
mattlewis92 opened this issue Jan 22, 2021 · 3 comments · Fixed by #19868
Closed
1 of 15 tasks

Bundle budgets incorrectly erroring when differential loading is enabled #19849

mattlewis92 opened this issue Jan 22, 2021 · 3 comments · Fixed by #19868
Labels
area: devkit/build-angular devkit/build-angular:browser needs: investigation Requires some digging to determine if action is needed
Milestone
needsTriage

Comments

@mattlewis92
Copy link
Contributor

mattlewis92 commented Jan 22, 2021 •
edited by Splaktar

🐞 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?
@ngbot ngbot bot added this to the needsTriage milestone Jan 22, 2021
@Splaktar
Copy link
Member

I just wanted to add a note that Nx is also in use here:

  nx : Not Found
  @nrwl/angular : 11.1.4
  @nrwl/cli : 11.1.4
  @nrwl/cypress : 11.1.4
  @nrwl/devkit : 11.1.4
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 11.1.4
  @nrwl/linter : 11.1.4
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.1.4
  @nrwl/web : Not Found
  @nrwl/workspace : 11.1.4
  typescript : 4.0.5

Additionally, the following tsconfig.json settings are in place:

    "target": "es5",
    "module": "es2020"

@mattlewis92
Copy link
Contributor Author

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.

@mattlewis92 mattlewis92 mentioned this issue Jan 25, 2021
Merged
mattlewis92 added a commit to mattlewis92/angular-cli that referenced this issue Jan 27, 2021
@mattlewis92
fix(@angular-devkit/build-angular): fix budgets for any script with d…
f33bdef 
…ifferential loading enabled

Fixes angular#19849
mattlewis92 added a commit to mattlewis92/angular-cli that referenced this issue Jan 27, 2021
@mattlewis92
fix(@angular-devkit/build-angular): fix budgets for any script with d…
95a270e 
…ifferential loading enabled

Fixes angular#19849
alan-agius4 pushed a commit that referenced this issue Jan 28, 2021
@mattlewis92 @alan-agius4
fix(@angular-devkit/build-angular): fix budgets for any script with d…
42e439f 
…ifferential loading enabled

Fixes #19849
alan-agius4 pushed a commit that referenced this issue Jan 28, 2021
@mattlewis92 @alan-agius4
fix(@angular-devkit/build-angular): fix budgets for any script with d…
8a063e8 
…ifferential loading enabled

Fixes #19849

(cherry picked from commit 42e439f)
@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 Feb 28, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: devkit/build-angular devkit/build-angular:browser needs: investigation Requires some digging to determine if action is needed
Projects
None yet
Milestone
needsTriage
Development

Successfully merging a pull request may close this issue.

Fix bundle budgets with any script and differential loading mattlewis92/angular-cli
3 participants
@Splaktar @mattlewis92 @alan-agius4