Proposal: Asset Budgets potentially w/ subtypes

[damienwebdev]

Bug 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

1. Have bundle with 2mb budget
2. Desire a budget that says all image assets are under 1mb.
3. Create an asset that is 1.5mb
4. 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: https://github.com/graycoreio/daffodil/pull/171

[mgechev]

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]

@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]

@damienwebdev let us come back to you later this week.

[mgechev]

@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]

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

[PsyGik]

+1 on creating a PR. We are also facing the same issue as of #17390 where there is one component style which exceeds the set budget, and the component is from a 3rd party so we really cannot do any possible optimizations to it.

We can add something along the lines of

"budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb",
                  "exclude": ["third-party.scss"]
                }
              ]

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[dereekb]

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]

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[bot]]

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.

[mhamri]

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]

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]

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]

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]

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.

[markusheinemann]

Since this problem has gained some attention over time, I have started working on a corresponding design document. It is based on the idea of @mgechev with the include and exclude option: https://docs.google.com/document/d/1L5GmB97ffy5b5iL-tHP3KxbenB7v38Hnb87QLBlwN9A/preview

I am new to contributing to this project so I am looking forward to your feedback.

[JoanSernaLeiton]

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.

[ngehlert]

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 😅