angular / angular/components

Some services are not tree-shaken when unused

オープン
#18,944 コメント 7 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: many P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 を import する前後で builds を比較します。未使用の imports によって build output が増加しなくなり、使用されている components と services が引き続き利用可能であれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
build-system, frontend, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。