angular / angular/components

Some services are not tree-shaken when unused

未关闭
#18,944 7 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
area: many P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

先从链接的 treeshake-material reproduction repository 及其 commit messages 入手,然后重新创建 Angular 9.1.0 应用,并检查 AppModule 的 imports 和生成的 main.js 大小。比较导入未使用的 Angular Material modules 前后的 builds。当未使用的 imports 不再导致 build output 增长,同时已使用的 components 和 services 仍然可用时,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
build-system, frontend, performance
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。