Hacktoberfest 2026:維護者為十月標記出來的 issue,仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Proposal: Asset Budgets potentially w/ subtypes

未關閉
#13,393 18 則留言 61 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
5/5
預估耗時
一週以上
新手友好度
35/100
Issue 類型
功能
描述清晰度
基本清楚
活躍度
停滯
技術堆疊
angular, typescript, webpack
領域
build-system, cli

研究方向

此請求針對生產環境組態中的 ng build budget,並提議使用 asset:jpg、asset:svg 和 asset:png 子類型;未指定來源檔案或測試。先追蹤 ng build 使用的現有 budget 處理方式,接著驗證超過大小限制的資產是否會針對每個子類型觸發已設定的警告與錯誤閾值。

由索引模型根據 Issue 內容生成。

描述

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

主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
17 小時 21 分鐘
30 天內合併 PR
181

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。