Some services are not tree-shaken when unused
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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
Contributor guide
Research direction
Start with the linked treeshake-material reproduction repository and its commit messages, then recreate the Angular 9.1.0 application and inspect the AppModule imports and generated main.js sizes. Compare builds before and after importing unused Angular Material modules. Done means unused imports no longer cause the build output to grow, while used components and services remain available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- build-system, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100