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

但是，摇树无法正常工作，因为我未使用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它仍然没有动摇..

4

3 回答 3

6

更新：来自angular-cli Wiki：

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

也见下文。

Ahead-of-Time (AOT) 编译器

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

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

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

于 2017-04-04T11:26:39.860 回答
5

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

于 2017-08-21T09:30:18.417 回答
0

试着做ng build --prod --aot

于 2017-04-26T09:44:31.363 回答