angular / angular/components

Some services are not tree-shaken when unused

Offen
#18,944 7 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: many P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem verlinkten Reproduktions-Repository treeshake-material und seinen Commit-Nachrichten. Erstelle anschließend die Angular-9.1.0-Anwendung neu und untersuche die Importe von AppModule sowie die Größen der generierten main.js-Dateien. Vergleiche Builds vor und nach dem Importieren ungenutzter Angular-Material-Module. Als erledigt gilt die Aufgabe, wenn ungenutzte Importe nicht mehr dazu führen, dass die Build-Ausgabe wächst, während verwendete Komponenten und Services weiterhin verfügbar sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
build-system, frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.