我们是否需要使用 webpack 和 typescript / angular2 进行 tree-shaking？答案

【问题标题】：Do we need tree-shaking with webpack and typescript / angular2?我们是否需要使用 webpack 和 typescript / angular2 进行 tree-shaking？
【发布时间】：2017-03-19 21:41:59
【问题描述】：

我已按照教程将 webpack 从 here 添加到 Angular。如果我理解正确，我们将主模块提供给 webpack，然后它遍历整个树并将所有引用的文件添加到包中。我还读到我们可以通过使用 tree-shaking 来优化它。

我在这里不明白的是，如果 webpack 已经只扫描“使用”的模块（即我们“导入”的模块），为什么我们需要 tree-shaking。

tree-shaking 是否会做一些额外的事情（例如检查未使用的模块中的类并从模块中删除它们，即使它已导入？）还是我完全误解了这个概念？

【问题讨论】：

是的，我们有。 Tree-shaking 是关于删除导入模块中未使用的部分。是的，它做了“一些额外的事情”。
我明白了。因此，如果模块 A 导入具有 B1 和 B2 类的模块 B，但模块 A 仅使用 B1，那么 tree-shaking 从输出中“删除” B2？
@estus 你可以添加答案，我会接受的:)
理论上是的。根据我自己的经验，Webpack 2 在 tree-shaking 上做了半心半意的工作（这取决于构建配置，该功能也处于测试阶段）。
想知道它是如何发现它没有被使用的吗？在文件中进行愚蠢的测试搜索？由于 js 不是静态编译的，我真的很想知道他们是如何做到的。

标签： angular typescript webpack tree-shaking

【解决方案1】：

正如 cmets 中提到的，真正的好处是它可以从文件中删除一些代码，而无需摇树，即使只使用了一个导出的类，结果中也会有整个模块。

例子：

app.component.ts

export class AppComponent {

    test(): void {
        console.log("12345");
    }
}

export class AppComponentDeadCode {

    test(): void {
        console.log("54321");
    }
}

app.module.ts

import { AppComponent } from './app.component';

现在在这个例子中，我们从不导入 AppComponentDeadCode 类。

没有tree-shaking，这两个类都将在生成的模块/包中。
使用tree-shaking，类AppComponentDeadCode 将从生成的模块/包中删除（考虑到没有其他模块可以导入它）。

附：不幸的是，这个闪亮玩具的状态是相当“测试版”的，如果使用 typescript/angular2 的话，很难轻易实现结果。更多相关信息here。

【讨论】：