Configuring default options for different mat components results in the entire component being in the initial bundle
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When configuring default options for mat-components in `ApplicationConfig`, the entire component is being included in the initial bundle rather than being lazy-loaded along with the components that use them.
Obviously, you could load the config at every component, but that would be quite annoying.
```typescript
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes),
/*{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
subscriptSizing: "dynamic",
appearance: "outline",
floatLabel: "always",
} as MatFormFieldDefaultOptions,
},*/
]
};
```
Example with the app in the Stackblitz with the options commented:
```
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-UP2ZEWFZ.js | - | 136.87 kB | 40.26 kB
main-GUD7ZPGJ.js | main | 78.08 kB | 19.85 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 214.96 kB | 60.12 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-5PV7XSBR.js | test-component | 59.39 kB | 10.30 kB
```
Without the comment:
```
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-NOK43ORO.js | - | 195.29 kB | 49.77 kB
main-EVKXTY5S.js | main | 78.18 kB | 19.88 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 273.47 kB | 69.65 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-IGEEQONQ.js | test-component | 304 bytes | 304 bytes
```
If you happen to configure snack-bar, form-field, and dialog, you already reach a bundle size of 405kB, which is just shy of the 500kB warning for initial bundle size. If you add anything remotely big like a CSS theme, you're easily over that limit. Note that if you add a pre-built Material theme, it adds an extra 7kB.
I'm not sure about the internals of the library, but it seems rather odd. I feel like the injection tokens shouldn't cause the rest of the features to be loaded.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/ldgbpznx-ia2hbzsb?file=src%2Ftest.ts,src%2Fmain.ts
### Expected Behavior
Load the actual components lazily.
### Actual Behavior
The components are in the initial bundle.
### Environment
```
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.0.2
Node: 22.13.1
Package Manager: npm 9.6.4
OS: win32 x64
Angular: 20.0.3
... cdk, common, compiler, compiler-cli, core, forms, material
... platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.2
@angular-devkit/core 20.0.2
@angular-devkit/schematics 20.0.2
@angular/build 20.0.2
@angular/cli 20.0.2
@schematics/angular 20.0.2
rxjs 7.8.2
typescript 5.8.3
```
コントリビューションガイド
調査の方向性
StackBlitz の再現を開き、src/test.ts と src/main.ts から始めてその build を実行します。デフォルトオプションの providers をコメントアウトした場合と有効にした場合で、initial chunk と lazy chunk のレポートを比較します。参照されている ApplicationConfig と Angular Material のオプショントークンを追跡し、設定されたコンポーネントが initial bundle ではなく lazy chunk に残ることを確認できたら issue 完了とします。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend, performance
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 38/100