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

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

但是，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";
}

我尝试使用 rollup(如文档中所述)，但效果不佳...

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

更新:我正在使用 ng build --prod 并且它仍然没有动摇..

Answer 1

更新:来自angular-cli Wiki :

All builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS.

也见下文。

The Ahead-of-Time (AOT) Compiler

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

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

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