Proposal: Asset Budgets potentially w/ subtypes

Open
#13,393 18 comments 61 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript, webpack
Domain
build-system, cli

Research direction

The request targets ng build budgets in the production configuration and proposes asset:jpg, asset:svg, and asset:png subtypes; no source file or test is identified. Start by tracing the existing budget handling used by ng build, then verify that oversized assets trigger the configured warning and error thresholds for each subtype.

Written by the indexing model from the issue text.

Description

area: @angular-devkit/build-angular devkit/build-angular:browser feature feature: insufficient votes
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

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.