AoT後角4バンドルサイズ

Question

私たちが作成したアプリケーションには、およそ400のコンポーネントがあります。& 70-80サービス。 main.jsのサイズが5.8 Mb、vendor.jsのサイズが1.2MbのAOTビルドがあります。この種の比較が正しいかどうかはわかりません。私たちのAppフォルダ全体のサイズはわずか4.24Mbです。私たちのAppフォルダは4.24Mbしかないので、AoTファイルのサイズはそれよりも小さくなるはずです。このリンクからhttps://github.com/angular/angular-cli/issues/4896私はhtmlがビルド時にコンパイルされるので、htmlのサイズが増えることを知りました。

1. たAgグリッド（https://github.com/ag-grid/ag-grid-angular）

2. Angular2-JWT（https://github.com/auth0/angular2-jwt）

3. MyDatePicker（https://github.com/kekeh/mydatepicker）

を：以下は、私たちが使用しているサードパーティのライブラリがあります

また、「PDFMake」も使用しています。

私は主に2つの質問があります

1. は5.8MBにmain.jsのサイズの増加は、htmlコードが400の コンポーネントのビルド時にコンパイルされることを 理由で許容されています。
2. vendor.jsファイルとは何ですか？サードパーティの ライブラリが含まれているか、PDFMakeのようなファイルですか？

私は、遅延ロードとgzip圧縮なしでmain.jsのファイルサイズをどのように減らすことができるのか本当に知りたいですか？

Answer 1

まず、ベンダーにはすべての依存関係が含まれています。

私はいくつか試しました、これらは私の結果だった：

• ng build合計：6.5メガバイト、ベンダー：5.5メガバイト、メイン*：0.4メガバイト
• ng build --aot --prod合計：2.2メガバイト、ベンダー1.7メガバイト、メイン*：0.3mb

*私は遅延ロードを使用していますので、メインバンドルのサイズなどになります。

私の場合、メインIDは縮小します。私のアプリケーションはあなたの増加が許容できるかどうかを判断するには小さすぎると思います。

レイローディングを使用しない理由はわかりませんが、ontherオプションがあります。 --build-optimizerという実験的なオプションがあります。これらは、私の結果だった：

• ng build --aot --prod --build-optimizer=true --vendor-chunk=true合計1.8メガバイト、ベンダー1.2メガバイト、メイン*：0.3メガバイト

これは、0.5メガバイトで私のベンダーを減少させました。おそらくそれは小さいため、私の主人公には顕著な効果は見られませんでした。また、このオプションはメインとベンダーをマージしますので、ベンダーを生成するために--vendor-chunk=trueを追加する必要があります。