GeezerVison is showing github.com — Proposal: Asset Budgets potentially w/ subtypes · Issue #13393 · angular/angular-cli
Proposal: Asset Budgets potentially w/ subtypes #13393DescriptionBug Report or Feature Request (mark with an x)
- [ ] bug report -> please search issues before submitting
- [x] feature request
Command (mark with an x)
- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Versions
Mac High Sierra
MacBook-Pro:~ damien$ node --version
v8.9.4
MacBook-Pro:~ damien$ npm --version
5.6.0
MacBook-Pro:daffodil damien$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.1.0
Node: 8.9.4
OS: darwin x64
Angular: 7.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.10.7
@angular-devkit/build-angular 0.10.7
@angular-devkit/build-ng-packagr 0.10.7
@angular-devkit/build-optimizer 0.10.7
@angular-devkit/build-webpack 0.10.7
@angular-devkit/core 7.1.0
@angular-devkit/schematics 7.1.0
@angular/cdk 7.1.0
@angular/cli 7.1.0
@angular/pwa 0.11.3
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.0.7
@schematics/angular 7.1.0
@schematics/update 0.11.0
ng-packagr 4.4.0
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
Repro steps
- Have bundle with 2mb budget
- Desire a budget that says all image assets are under 1mb.
- Create an asset that is 1.5mb
- Be unable to know that the asset outside of budget range as the "any" budget type will catch the bundle.
The log given by the failure
N/A
Desired functionality
I would like to set a budget specifically for image assets in my ng build. Ideally, I can configure this per image type (as each image type has different compressability.
e.g
{
...
"configurations": {
"production": {
...
budgets: [
{"type": "asset:jpg", "maximumWarning": "150kb", "maximumError": "300kb"},
{"type": "asset:svg", "maximumWarning": "15kb", "maximumError": "30kb"},
{"type": "asset:png", "maximumWarning": "150kb", "maximumError": "300kb"},
]
}
}
}
The use case here is automation around enforcing filesize requirements for assets to prevent absurd image sizes from being included. While "type": "any" meets this requirement, there are niches of asset types that should have stricter requirements (e.g. svg).
Mention any other details that might be useful
I'm trying to create budgets for the assets we use on the Daffodil project:
https://github.com/graycoreio/daffodil
Specifically, the PR in question:
graycoreio/daffodil#171 Reacted by Joel Viney, Andrew-Marks-Trisept, Guilherme Pais, Julien Marcou, McGiogen, Marek Pakes, Thomas, jaschwartzkopf, Johannes Gest, Dhanraj Padmashali and 46 more Reacted by Dhiego Hendrix Atencio and Daniel Haupt Reacted by Julien Marcou, Dhiego Hendrix Atencio and Daniel Haupt Activitymgechev commented on Jan 9, 2019 We're focused on JavaScript because it's the most expensive resource that folks ship over the network. Although budgeting images makes sense, it's likely that we'll not be able to prioritize this feature in near future.
I propose to still keep it in the backlog. damienwebdev commented on Jan 14, 2019 @mgechev @alan-agius4 I can pick up this PR pretty easily. Do you guys have any feedback on potential implementation of the proposal prior to me getting started? My concern is that there are an unknown number of file types. mgechev commented on Jan 14, 2019 mgechev commented on Jan 17, 2019 @damienwebdev during the meeting today we discussed that a better approach could be to add include and exclude globs in each object from the budgets array.
This is not a critical feature so we may not have the bandwidth to implement it in the near future. I'd add it to the community hotlist. If someone wants to work on this, please share a brief design following this template; even before that, please comment here to let us know you're working on it. Thanks! markusheinemann commented on Dec 18, 2020 I am considering working on the feature. Where should put the the design doc after evaluating a draft for implementation?
If we choose the idea with include and exclude this feature maybe also effects #17390 Reacted by Dhanraj Padmashali, McGiogen and chriswoodie dereekb commented on Feb 4, 2022 Just ran into this myself. Was looking for a way to exclude a specific sass file that is lazy loaded in a child route. For now I just increased the maximum warning. joeypedicini92 commented on Feb 9, 2022 Running into this just now, we have a federated module using bootstrap v5 being loaded into a bootstrap v4 app, so we are using shadowDom encapsulation on the remote component to prevent css clashing, which means we need to load bootstrap directly in that component. my first thought was an exclude option as well because I want to be alerted if someone maybe does the same thing in a sub component and we wouldn't catch it because the global maximum would allow it. angular-robot commented on Feb 21, 2022
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation. Reacted by Michael Kriese, C-xC-c, Dhiego Hendrix Atencio, Joe Percy, Hugh Anderson, Camo30, David P, Oli Strik, Pieterjan, Mohammad Hossein Amri and 12 more mhamri commented on Oct 23, 2022 my case is I have usage of swiper.js. I don't want to load the CSS as part of the initial load. loading the CSS in the specific component break the budget, I don't want to increase the bar for the whole app; I want an exception only for that component. but currently, I can't do that GeorgianStan commented on Dec 7, 2022 Same situation here using ag-grid. I want to import the style in the component related .scss file even though it's a global style as it's not required to load it initially when the app loads, but only when the component is rendered. achilehero commented on Dec 29, 2022 Hello! I also need this for a component that wraps swagger-ui, which comes with it's own css. Same use case as some of the above jamesjodan commented on Feb 7, 2023 I am usually using docker image trion/ng-cli to build my apps. Could any of you tell me how to mount my own angular.json file with my budget configuration or to support it with command line parameters to override the default budget?
Thanks! Andrew-Marks-Trisept commented on Aug 21, 2023 The lack of ability to target budgets by file in any way is frustrating because there are numerous cases where a certain file might fall well outside the norm for reasons beyond your control. If you hit any of those cases, the budgets effectively become useless! You just have to make them large enough to allow the worst case scenario.
Examples I've hit:
-
We "export" certain controls as web components ("Angular Elements"), using Shadow DOM encapsulation. This means we must import all the global CSS directly into those components in that case, or they wouldn't be styled properly. Obviously this means the amount of CSS in there will be far more than for a single "normal" component.
-
We have a multi-site architecture where most components are shared, but headers are not and the client can kind of do whatever they want in there. Sometimes their header CSS gets large if they have custom menus and such that aren't shared with the rest of the code base.
Reacted by Michael Kriese, Joe Percy, Tim Underhay, Nicolas Gehlert, J. Kartheininger, Adrian, Daniel Haupt and Thomas Vaags markusheinemann commented on Aug 22, 2023 Reacted by Michael Kriese, Rishabh Mahajan, JoanSernaLeiton, Nicolas Gehlert and Daniel Haupt Reacted by Michael Kriese, Georgian Stan, Joe Percy, JoanSernaLeiton, Nicolas Gehlert, Craig Smitham, Leon Hoos and Daniel Haupt Reacted by Michael Kriese and Joe Percy JoanSernaLeiton commented on Sep 5, 2023 I have been using federated modules with angular and when I call a micro frontend, it does not load its global css (I am using tailwindcss), we must encapsulate it in a component (tailwindcss), so far so good.
The bad thing is that we must increase the budget of this component and this way we increase it for all the components, I would only like to increase the budget for this specific component that is encapsulating the global styles.
It happens to me with tailwindcss but it could happen with any css lib that I want to use globally for that micro frontend. Reacted by Michael Kriese, Nicolas Gehlert, J. Kartheininger, Romain Z and mm-salesqueze ngehlert commented on May 2, 2024 any updates if this will eventually be available? can we submit PR's trying to solve this? Any feedback from the Angular team? Coudln't find anything in any other thread 😅
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|