angular / angular/components

Some services are not tree-shaken when unused

Aperta
#18,944 7 commenti 2 reazioni 0 assegnatari Vedi su GitHub
area: many P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction

The issue cannot be shown using StackBlitz, but the repository https://github.com/ranma42/treeshake-material can be used to reproduce it.

The steps to reproduce the issue are illustrated in the commit messages of the repository. Namely:
1. Create a new application with `ng new treeshake-material` with default settings (no routing, CSS style); it builds a 137 KB main.js.
2. Install `@angular/material` with default settings (indigo-pink theme, no typography styles, yes to browser animations); the main.js now is 207 KB.
3. Import several material modules in `AppModule` (without using any component or service); the main.js now is 271 KB.

It looks like some code is not being removed by the tree-shaking even if it is not being used.

#### Expected Behavior

The size of the build output does not grow unless components or services are actually used.

#### Actual Behavior

The size of the build output grows 2x just by installing and importing Angular Material modules, even if they are not being used.

#### Environment

- Angular: 9.1.0
- CDK/Material: 9.2.0
- Browser(s): -
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dal repository di riproduzione treeshake-material collegato e dai relativi messaggi di commit, quindi ricrea l’applicazione Angular 9.1.0 e ispeziona gli import di AppModule e le dimensioni dei main.js generati. Confronta le build prima e dopo l’importazione di moduli Angular Material inutilizzati. Il lavoro è completato quando gli import inutilizzati non causano più la crescita dell’output della build, mentre i componenti e i servizi utilizzati rimangono disponibili.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
build-system, frontend, performance
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.