3

我几乎不需要澄清 Angular cli 的死代码消除/摇树。

Github

我打算使用 ngZorro ui 库。根据文档，我需要在我的 app.module 文件中导入 NgZorroAntdModule。它包含它提供的所有组件。现在，如果我只使用其中的一些，angular cli 是否仍会在我的最终产品构建中捆绑所有组件。

我尝试单独导入我需要的模块，它可以工作，但我仍然想知道 Angular cli 的摇树/死代码消除是否会删除未使用的模块，即使它是在 app.module 中导入的。

在此处输入图像描述

4

2 回答 2

2

下面是我检查过的类似的东西。
我在app.module.ts 在此处输入图像描述中包含了 Material Modules 但我只使用了 mat-raised-button ，它是我的代码中MatButtonModule的一部分。
这是我使用source-map-explorer分析时在主包中得到的 在此处输入图像描述

虽然我在我的 app.module.ts 中包含了菜单、工具栏、图标和 FormField 模块，但因为我没有在代码中使用它们，所以它们没有包含在 webpack 包中。

这是我使用的构建配置 -

ng build --prod --build-optimizer --vendor-chunk --progress --output-hashing=all --stats-json --source-map=true

您可以在生成包后分析包，以使用以下工具查看包中包含的模块：
webpack-bundle-analyzer、source-map-explorer。

  • 您需要生成stats.json文件，然后您可以使用webpack-bundle-analyzer 进行分析
  • 对于source-map-explorer，您需要生成 prod 构建--source-map=true

优化构建包还取决于您用于 prod 构建的标志。有关可以使用的标志的详细信息，
请参阅Angular 构建文档。

于 2018-06-14T16:54:11.467 回答
1

Tree-shaking 只能用于以构建优化器可以删除未使用代码的方式构建的库。

在 v5.5 之前不支持 tree-shaking 的 RxJS 就是这种情况

NG-Zorro 只有一个导入模块（适用于所有组件），但它现在支持从 1.x 开始的 tree-shaking

于 2018-10-25T06:49:07.580 回答