web-dev-qa-db-ja.com

新しいAngular 4プロジェクトのツリーシェーキングを有効にする方法

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を使用していますが、まだ揺れていません。

angularangular4tree-shaking
13
Rico Suter

更新： angular-cli Wiki から：

すべてのビルドは、バンドルと限定的なツリーシェーキングを利用しますが、--prodビルドは、UglifyJSを介して限定的なデッドコード除去も実行します。

以下も参照してください。

The Ahead-of-Time（AOT）コンパイラ

--prodビルドのデフォルトは--aot=true今;それはしばらくの間持っています。

Angular.ioサイトには、ツリーシェーキングの正確なプロセスに関する詳細な情報を提供するドキュメントはありません。 Angular CLIはしばらくの間webpackを使用しており、そのツールがツリーシェーキングを行う方法に関する情報があります here 。 glifyJS =は一般的なテーマのようです。

上記のAOTに関するリンクのガイドラインに従う限り、良い結果が得られるはずです。サードパーティのライブラリでAOTコンパイルを実行するのが難しい場合、ライブラリがAOTをサポートするように書かれていないというリスクが常にあります。ただし、AOTの互換性は最近期待されています。

5
R. Richards

木の揺れにはng build --prod --build-optimizerを使用します。これにより、vendor.jsとmain.jsがmain.jsファイルに結合されます。それを避けるには、--vendor-chunk=trueを追加する必要があります

4
ochs.tobi

ng build --prod --aot

0
mezhik91