Angular 16 模块中未使用的组件是否已从捆绑包中删除（tree shake）？

Question

我有一个

SharedModule

，我将需要包含在多个模块中的每个组件都填充在那里。

但并非每个模块都需要从

SharedModule

导出的每个组件。

如果我不在模板中或通过

import

语句使用某个组件，该组件是否仍包含在最终捆绑包中，还是通过 Tree Shaking 删除？

如果组件仅通过

import

引用，那么答案对我来说是显而易见的，但是构建过程是否“智能”到足以知道组件是否已在模板中使用，并在以下情况下删除它：不是吗？

如果它不够智能，那么这意味着我必须创建许多不同的较小模块，其中仅包含相关组件。

有这个问题：Angular Module tree-shaking，但答案很旧并且仅对 Angular 8 有效。

Answer 1

是的，未使用的组件可以通过摇树删除组件。

但比仅仅相信某个随机的人更好，我建议您通过运行来亲自检查

NG_BUILD_MANGLE=0 ng build 

NG_BUILD_MANGLE=0

禁用构建的修改部分，以便保留类名。 构建完成后，检查主包，您将看到哪些组件已定义（或未定义）。

如果您的

SharedModule

是库的一部分并且涉及桶文件，这可能会破坏树摇晃。这是两个构建器（webpack 和 esbuild）的已知限制。

为了缓解这种情况，像

@angular/material

这样的库依赖于多个子条目。 （

@angular/material/button

、

@angular/material/icon

等）。