feat(@angular-devkit/build-angular): add bundle budget for component styles #15127
Conversation
alan-agius4
added
the
target: major
At the moment child compilation warnings and errors are being lost as they are not passed to the root compilation. This means that any errors that are being set by clean-css for component styles are being lost.
…styles It’s very easy to inadvertently import toplevel css in component styles. Since component css is standalone and self-contained, it will never be shared between components and remains as a single large bundle for each component. This in turn adds a large amount of code that must be processed and increases bundle size. Related to: TOOL-949
| const overrides = { | ||
| aot: true, | ||
| optimization: true, | ||
| budgets: [{ type: 'anyComponentStyle', maximumWarning: '1b' }], |
There was a problem hiding this comment.
What's the plan for showing this warning overall? Will we update bundle budgets in 9 for all projects?
There was a problem hiding this comment.
I think the best option would be to do it for 9 for existing projects since users won't typically run migrations on minor and for new projects we can do it right away.
- What should be the value
maximumWarningandmaximumErrorfor new projects? - I am guessing that for the migration we will not want to add
maximumErroras this will break exiting projects, right?
There was a problem hiding this comment.
Yeah I think it should be for 9 too. We should add the migration to this PR as well.
As for the default numbers, I'm not really sure. UTF-8 uses 1 to 4 bytes for each char, most commonly only 1 byte for US ASCII chars. So 1kb would be 1024 chars. Off the top of my head warning on 5kb and erroring on 20kb sounds within the realm of reasonable. @mgechev do you have a recommendation?
There was a problem hiding this comment.
Ill start working on the migrations, and than we just change the number when we have more feedback from @mgechev.
There was a problem hiding this comment.
A good source for setting up good defaults will be http://bit.ly/perf-budget-calculator
I'd recommend bumping the error limit up with few extra 100s of KBs.
There was a problem hiding this comment.
@alan-agius4 do we have a way forward with a global css bundle budget? Not asking to have it included in this PR, just asking if the changes in this PR would get in the way of that. I imagine a anyGlobalCss budget or something.
There was a problem hiding this comment.
Global styles meaning styles in general or that are set globally ie imported via style.css?
For the later we already have the AnyCalculator which can be used to set budgets on global css.
However, if we'd want to add a budget for css within the component + global css we can do it and this PR will provide a way forward for that.
My concerns would be that if want to sum up css from all the components and global stylesheet, you might end up with a misleading budget. Let's say the result of total CSS is 500Kb, when having lazy loading this will never be loaded/parsed at once.
There was a problem hiding this comment.
Dynamic budgets, such as LightWallet would be great in such scenario. In the same time, we might be able to estimate what would be loaded initially, right? In webpack we have this metadata in the compilation stats.
There was a problem hiding this comment.
But this is indeed is the enabler for that :)
There was a problem hiding this comment.
We already have some budgets for initial chunks
packages/schematics/angular/migrations/update-9/update-workspace-config.ts
Outdated
Show resolved
Hide resolved
In CLI 8.2 we introduced a new budget see: angular/angular-cli#15127 PR Close #31955
In CLI 8.2 we introduced a new budget see: angular/angular-cli#15127 PR Close #31955
In CLI 8.2 we introduced a new budget see: angular/angular-cli#15127 PR Close angular#31955
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
It’s very easy to inadvertently import toplevel css in component styles. Since component css is standalone and self-contained, it will never be shared between components and remains as a single large bundle for each component. This in turn adds a large amount of code that must be processed and increases bundle size.
Note: this will only work for AOT compilations
Related to: TOOL-949