2

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

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

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

4

1 回答 1

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

PS 不幸的是，这个闪亮玩具的状态是相当“测试版”的，如果使用 typescript/angular2 的话，很难轻易达到结果。更多关于它的信息在这里。

于 2016-11-14T08:40:29.100 回答