如何为新的 Angular 4 项目启用 tree-shaking答案

【问题标题】：How to enable tree-shaking for a new Angular 4 project如何为新的 Angular 4 项目启用 tree-shaking
【发布时间】：2017-08-29 12:11:14
【问题描述】：

我刚刚使用 CLI 创建了一个新的 Angular 4 项目：ng new test

版本：

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

但是，tree-shaking 无法正常工作，因为我未使用的类 FooBar 仍在 main.*.js 文件中。

我的示例组件 TS 文件（FooBar 不应该在输出中）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

export class FooBar {
  foo = "hello";
}

我尝试使用汇总（如文档中所述），但效果不佳...

有没有一种简单的方法来启用 tree-shaking？（我希望在通过 CLI 创建项目时默认启用它）。

更新：我正在使用ng build --prod，它仍然没有动摇..

【问题讨论】：

你在使用什么ng 命令？
我正在使用ng build --prod，它仍然没有动摇..
CLI 是否甚至使用摇树？从 angular.io 文档中关于树摇晃的食谱中，它使用汇总来进行树摇晃。但是查看 CLI 的源代码，package.json 中没有汇总依赖项。除非他们用别的东西来摇树。我试图弄清楚同样的事情。
正如 R. Richards 在他的更新中所说，转到 Angular.Io 页面进行 AoT 编译和 Tree Shaking Here。角度文档写得很好，所以你不应该有任何问题。这是我最近在 Angular 4 的项目中实现 AoT 和 Tree Shaking 时使用的。
如果使用ng-cli构建项目，默认支持。

标签： angular angular4 tree-shaking

【解决方案1】：

更新：来自angular-cli Wiki：

所有构建都使用捆绑和有限的 tree-shaking，而 --prod 构建还通过 UglifyJS 运行有限的死代码消除。

也见下文。

The Ahead-of-Time (AOT) Compiler

--prod 构建现在默认为--aot=true；有一段时间了。

我在 angular.io 网站上没有找到任何文档，它提供了大量关于摇树的确切过程的详细信息。 Angular CLI 使用 webpack 已经有一段时间了，有一些关于该工具如何进行 tree-shaking here 的信息。 UglifyJS 似乎是一个共同的主题。

只要您按照上面链接中关于 AOT 的指南进行操作，您应该会获得良好的结果。如果您在使用 3rd 方库进行 AOT 编译时遇到困难，则始终存在未编写库以支持 AOT 的风险。虽然，现在预计 AOT 兼容性。

【讨论】：

@R.Richards 该链接没有任何关于摇晃的信息。您可以在答案中发布它的要点吗？
@adamdport 答案更新了一些额外的链接和信息。没什么要说的，我不认为。只需遵循指南即可。希望对您有所帮助。
@R.Richards，你如何确保 tree-shaking 有效？
@Jun 我不知道确定摇树工作的可靠方法。我对这些工具充满信心。我有时会比较 dev 和 prod 构建之间的输出文件大小。如果产品文件较小，我认为死代码已被淘汰。我还没有寻找一种方法来测试该过程是否符合人们的预期。

【解决方案2】：

对于摇树使用ng build --prod --build-optimizer。这样 vendor.js 和 main.js 在 main.js 文件中组合。为避免这种情况，您必须添加 --vendor-chunk=true

【讨论】：

【解决方案3】：

尝试做ng build --prod --aot

【讨论】：