Question

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

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

树震动是否会做一些额外的事情（例如检查未使用的模块中的类并将它们从模块中移除即使它已导入？）或者我完全误解了这个概念？

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

P.S。不幸的是，这个闪亮的玩具的状态是相当“beta”的，如果有打字稿/角度2，很难很容易达到结果。有关它的更多信息here。

我们需要使用webpack和typescript / angular2进行树摇动吗？

1 个答案: