2017-04-04 47 views
8

我剛剛創建了一個新的角度4項目與CLI:ng new test如何使樹搖動一個新的角度4項目

版本:

@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,它仍然沒有振盪..

+0

您使用的是什麼'ng'命令? –

+0

我正在使用'ng build --prod',但它仍然沒有振動。 –

+0

CLI是否甚至使用樹抖?從食譜中的樹木搖動的angular.io文檔中,它使用匯總樹震動。但查看CLI的源代碼,package.json中沒有彙總依賴關係。除非他們使用別的東西來搖樹。我試圖找出這個相同的東西。 –

回答

3

更新:從angular-cli Wiki

所有作品利用捆綁和有限的樹搖晃,而 通過UglifyJS,--prod構建也運行有限的無代碼消除。

請看下面。

The Ahead-of-Time (AOT) Compiler

--prod一種構建默認爲--aot=true現在;它現在有一段時間了。

在angular.io網站上找不到任何文檔,它提供了有關樹木抖動確切過程的大量詳細信息。 Angular CLI已經使用了一段時間的webpack,並且有一些關於這個工具如何令人驚歎的信息hereUglifyJS似乎是一個普遍的主題。

只要您按照上面有關AOT的鏈接指導,您應該有良好的結果。如果您在使用第三方庫進行AOT編譯時遇到困難,則始終存在未編寫庫來支持AOT的風險。雖然現在預計AOT兼容性。

+1

我正在使用'ng build --prod',它仍然沒有振動。 –

+1

我添加了一個鏈接以獲取更多信息。 –

+0

@ R.Richards這個鏈接沒有關於搖動的任何信息。你可以在答案中發佈它的要點嗎? – adamdport

-3

嘗試做ng build --prod --aot

1

樹木搖晃使用ng build --prod --build-optimizer。這樣vendor.js和main.js被合併在main.js文件中。爲避免這種情況,您必須添加--vendor-chunk=true