我们需要用 webpack 和 typescript / angular2 进行 tree-shaking 吗？

Question

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

我不明白的是，如果 webpack 已经只扫描 "used" 模块（即我们 "import" 的模块），为什么我们需要摇树优化。

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

Answer 1

如评论中所述，真正的好处是它可以从文件中删除一些代码，而如果不进行摇树优化，即使只有一个导出的模块，结果也会包含整个模块 classed 被使用。

示例：

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 class.

如果没有 tree-shaking，两个 classes 都将出现在结果 module/bundle.
使用 tree-shaking，class AppComponentDeadCode 将从结果 module/bundle 中删除（考虑到没有其他模块导入它）。

P.S。不幸的是，这个闪亮的玩具的状态相当 "beta"，并且很难用 typescript/angular2 轻松达到结果。有关它的更多信息。

我们需要用 webpack 和 typescript / angular2 进行 tree-shaking 吗？

Do we need tree-shaking with webpack and typescript / angular2?

typescript

webpack

tree-shaking

angular