如何为新的Angular 4项目启用树抖动

Question

我刚刚用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

但是，树摇动不能正常工作，因为我未使用的类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";
}

我试图使用汇总（如文档中所述），但这不起作用......

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

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

Answer 1

更新：来自angular-cli Wiki ：

所有构建都使用捆绑和有限的树抖动，而--prod构建也通过UglifyJS运行有限的死代码消除。

见下文。

Ahead-of-Time（AOT）编译器

--prod build默认为--aot=true now; 它已经有一段时间了。

我没有在angular.io网站上找到任何文档，它提供了关于树木震动的确切过程的大量细节。 Angular CLI已经使用webpack一段时间了，并且有一些关于该工具如何在这里发生树木震动的信息 。 UglifyJS似乎是一个共同的主题。

只要您遵循上面关于AOT的链接中的指导原则，您就应该有很好的结果。 如果您在使用第三方库进行AOT编译时遇到困难，则始终存在未编写库以支持AOT的风险。 虽然，现在预计AOT兼容性。

Answer 2

对于树摇动使用ng build --prod --build-optimizer 。 这样，vendor.js和main.js就会合并到main.js文件中。 为了避免这种情况，你必须添加--vendor-chunk=true

Answer 3

尝试做ng build --prod --aot