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

Question

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

我在这里不明白的是，如果 webpack 已经只扫描“使用过的”模块(即我们“导入的”)，为什么我们需要摇树优化。

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

Answer 1

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

例子:

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 将从生成的模块/包中删除(考虑到没有其他模块导入它)。

附言不幸的是，这个 Shiny 玩具的状态相当“测试版”，如果使用 typescript/angular2 的话，很难轻易获得结果。更多相关信息here .