Configuring default options for different mat components results in the entire component being in the initial bundle
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Mở bản tái hiện trên StackBlitz và chạy build của nó, bắt đầu với src/test.ts và src/main.ts; so sánh các báo cáo của chunk ban đầu và chunk lazy khi các provider tùy chọn mặc định được comment và được bật. Theo dõi các token tùy chọn ApplicationConfig và Angular Material được tham chiếu, và coi issue là hoàn tất khi các component đã cấu hình vẫn nằm trong chunk lazy thay vì bundle ban đầu.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, performance
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100