如何在 webpack 2 和 typescript 和 angular 2 中使用 tree-shaking？答案

【问题标题】：How to use tree-shaking with webpack 2 and typescript and angular 2?如何在 webpack 2 和 typescript 和 angular 2 中使用 tree-shaking？
【发布时间】：2016-11-13 13:26:53
【问题描述】：

我已经用 angular 设置了 webpack 2，而且大多数情况下它似乎都可以工作。虽然它似乎没有 tree-shaking，因为我有一个几乎什么都不做的应用程序，而 vendor.js 仍然是 800+ KB。

似乎很少有关于如何打开 tree-shaking 的信息，但据我所知，它对于 ES6 模块会自动打开，但不适用于 ES5。是这样吗？

最重要的是：如何使用 webpack2 对 typescript/angular2 应用 tree-shaking？

【问题讨论】：

是的，它不应该适用于 CJS 模块（没有 ES5 模块），它应该适用于 ES6 模块。由于这主要是一个 Webpack 问题，因此复制该问题的 repo 会有所帮助。 There may be problems with tree-shaking transpiled TS classes.
@estus 好吧，也许它甚至可以工作，但我没有故意打开任何东西。有什么简单的方法可以检查它是否有效？
检查缩小的 JS 输出中是否存在一些未使用的类。
刚刚做了，还在。似乎是因为你提到的错误。这是否意味着我们现在不能真正运行“es5”？ “es2015”是什么意思：它不能在许多浏览器中工作，或者没关系，因为 webpack 会处理真正的模块加载？
@estus 我已经设法用“es2015”运行它并用babili 缩小它实际上删除了我没有导入的导出类，但最有趣的是：vendor.js文件变得更大了！看来这些东西都是“测试版”:)

标签： angular typescript webpack tree-shaking

【解决方案1】：

我发现 repository 非常好，并附有有关如何执行此操作的示例。

正如那里和问题的 cmets 中所提到的，显然存在阻止摇树发生的错误。这似乎意味着现在真的不可能使用"target": "es5"。

我们可以使用es2015，但是在浏览器支持之前，我们需要一些额外的步骤（例如通过 Babel）来编译为es5。

【讨论】：

为什么需要 Babel 转译回 es5？ AFAIK TypeScript 在配置中有一个target 设置，告诉它它将被转译到哪个版本。
确实如此，但至少在撰写本文时，它确实生成了不足以进行树摇动的代码。不记得太多细节了，也许现在更好。
感谢您的回复！我目前也在努力让它发挥作用。让它工作起来似乎很头疼...... :)