angular / angular/components

Some services are not tree-shaken when unused

Abierto
#18,944 7 comentarios 2 reacciones 0 asignados Ver en GitHub
area: many P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el repositorio de reproducción treeshake-material enlazado y sus mensajes de commit; después, recrea la aplicación Angular 9.1.0 e inspecciona los imports de AppModule y los tamaños de los main.js generados. Compara los builds antes y después de importar módulos de Angular Material no utilizados. Se considera terminado cuando los imports no utilizados ya no hacen que crezca la salida del build, mientras los componentes y servicios utilizados siguen estando disponibles.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
build-system, frontend, performance
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.