[解決済み] prodのバンドルサイズを小さくするには？

質問

で初期化されたシンプルなアプリがあります。 angular-cli .

3つのルートに対して相対的にページを表示します。私は3つのコンポーネントを持っています。そのうちの1つのページで、私は lodash とAngular 2のHTTPモジュールでデータを取得します（RxJSを使用）。 Observable s, map と subscribe ). これらの要素を表示するには、単純な *ngFor .

しかし、私のアプリは本当にシンプルであるにもかかわらず、巨大な（私の意見では）バンドルパッケージとマップが得られます。私はgzipのバージョンについて話すのではなく、gzipする前のサイズについて話します。この質問は、単に一般的な勧告の質問です。

いくつかのテスト結果

ngビルド

Hash: 8efac7d6208adb8641c1 Time: 10129ms chunk {0} main.bundle.js, main.bundle.map (main) 18.7 kB {3}. [初期] [レンダリング]。

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} です。[初期] [レンダリング]。

チャンク {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [初期値] [レンダリング]。

チャンク {3} vendor.bundle.js、 vendor.bundle.map (vendor) 3.96 MB [初期] [レンダリング]。

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [エントリ] [レンダリング]。

待ってください。 こんなシンプルなアプリに10Mbのベンダバンドルパッケージ？

ng build --prod

Hash: 09a5f095e33b2980e7cc Time: 23455ms chunk {0}. main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (main) 18.3 kB {3}. 初期 [レンダリング]。

チャンク {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4}. [初期値］ [レンダリング]。

チャンク {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (scripts) 128 kB {4}. 初期 [レンダリング]。

chunk {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (vendor) 3.96 MB [初期]. [レンダリング]。

chunk {4} inline.a345391d459797f81820.bundle.js, inline.a345391d4597f81820.bundle.map (inline) 0 bytes [記入]. [レンダリング]。

もう一度待ってください。 このような類似のベンダーのバンドルサイズは、prodのために？

ng build --prod --aot

Hash: 517e4425ff872bbe3e5b Time: 22856ms chunk {0}. main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3}. 初期 [レンダリング]。

チャンク {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4}. [初期値］ [レンダリング]。

チャンク {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (scripts) 128 kB {4}. 初期 [レンダリング]。

chunk {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f576df286f14.bundle.map (vendor) 2.75 MB [初期]. [レンダリング]。

チャンク {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (inline) 0 bytes [記入]. [レンダリング]。

ng build --aot

Hash: 040cc91df4df5ffc3c3f Time: 11011ms chunk {0} main.bundle.js, main.bundle.map (main) 130 kB {3}. [初期] [レンダリング]。

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} です。[初期] [レンダリング]。

チャンク {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [初期値] [レンダリング]。

chunk {3} vendor.bundle.js、 vendor.bundle.map (vendor) 2.75 MB [初期] [レンダリング]。

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [エントリ] [レンダリング]。

私のアプリをProdにデプロイするために、いくつか質問があります。

• ベンダーのバンドルはなぜこんなに巨大なのですか？
• によるツリーシェイクは適切に使用されていますか？ angular-cli ?
• このバンドルサイズを改善するには？
• .mapファイルは必須ですか？
• テスト機能はバンドルに含まれますか？prodでは必要ないのですが。
• 一般的な質問です：Prod用にパックする推奨のツールは何ですか？たぶん angular-cli (バックグラウンドでWebpackを使用)は最適な選択肢ではないのでしょうか？もっといい方法はないでしょうか？

Stack Overflowで多くの議論を探しましたが、一般的な質問を見つけられませんでした。

どのように解決するのですか？

2020年2月更新

この回答は多くの支持を得たので、新しいAngularの最適化について更新するのがベストだと思いました。

1. 他の解答者の方もおっしゃっていましたが ng build --prod --build-optimizer は、Angular v5 未満を使用している人には良いオプションです。 新しいバージョンでは、これはデフォルトで ng build --prod
2. もう一つの選択肢は、モジュールチャンキング/レイジーローディングを使用して、アプリケーションをより小さなチャンクに分割することです。
3. Angular 9ではIvyレンダリングエンジンがデフォルトで搭載され、より良いバンドルサイズを提供します。
4. サードパーティのdepsがツリーシェイク可能であることを確認します。Rxjs v6 をまだ使っていないのであれば、使うべきでしょう。
5. 万が一、失敗した場合は、以下のようなツールを使用します。 webpack-bundle-analyzer モジュールの肥大化の原因となっているものを確認するために
6. ファイルがgzip圧縮されているかどうかを確認する

AOTコンパイルを使用すると、ベンダーバンドルサイズを250kbに減らすことができると主張する人がいます。しかし、BlackHoleGalaxy の例では、AOT コンパイルを使用しても、ベンダーバンドルサイズは 2.75MB のままである。 ng build --prod --aot 250kbの10倍の大きさです。これは、たとえv4.0を使っていても、angular2アプリケーションの常識から外れているわけではありません。2.75MBは、特にモバイルデバイスのパフォーマンスを本当に気にする人にとっては、まだ大きすぎます。

アプリケーションのパフォーマンスを向上させるためにできることがいくつかあります。

1) AOT & Tree Shaking (angular-cliはデフォルトでこれを行います). Angular 9では、AOTはprodとdev環境でデフォルトで使用されます。

2) Angular Universal A.K.A. サーバーサイドレンダリングの使用 (cliにはない)

3) Web Workers (これもcliにはありませんが、非常にリクエストの多い機能です)

をご覧ください。 https://github.com/angular/angular-cli/issues/2305

4）サービスワーカー

をご覧ください。 https://github.com/angular/angular-cli/issues/4006

1つのアプリケーションでこれらすべてが必要なわけではないかもしれませんが、これらはAngularのパフォーマンスを最適化するために現在存在するオプションの一部です。Googleはパフォーマンスに関して、箱から出していない欠点を認識しており、将来的にこれを改善する予定であることを信じています/願っています。

上記で述べたコンセプトのいくつかについて、より深く語っている参考文献があります。

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294