web-dev-qa-db-ja.com

ng build -prod vs ng build --prod --build-optimizer = true

My Angular project is @ Angular4.3.3

ng build -prod

ビルドするのに77秒かかります

ng build --prod --build-optimizer = true

ビルドに190秒かかります。ベンダーチャンクなし、サイズは小さくなります（ただし、サイズに大きな違いはありません）

コンソールイメージのチャンクの違い： Difference between those two build

Bundling＆Tree-Shaking と読みましたが、それでもこれらのコマンドで作成されたビルドの明確な違いはわかりません。

これらの2つの異なる方法があり、パフォーマンスと他の方法の違いは何ですか？

javascriptangularbuildangular-cli
14
Lahar Shah
--build-optimizer and --vendor-chunk

「ビルドオプティマイザーを使用すると、ベンダーチャンクはデフォルトで無効になります。これを--vendor-chunk = trueでオーバーライドできます。

個別のベンダーチャンクがない場合、ビルドオプティマイザーの合計バンドルサイズは小さくなります。ベンダーコードをアプリコードと同じチャンクに含めると、Uglifyが未使用のコードをより多く削除できるためです。」

参照： https://github.com/angular/angular-cli/wiki/build

6
suprandr

まず、なぜvendor chunkそもそも役に立つ？

vendor.jsは、新しいフレームワークのダウンロードやnpmパッケージの更新よりもはるかに頻繁にyourコードを更新するため、開発中に最も役立ちます。

したがって、ベンダーチャンクを有効にすると、開発中のコンパイル時間が短縮されます。

なぜは--vendor-chunkオプションも？これは私の頭上ではありませんが：

  • アプリの接続速度が遅いユーザーが多く、頻繁に更新する場合は、ベンダーチャンクをより長く変更せずにおくほうが有利な場合があります。アプリを更新すると、チャンクは小さくなります。これにより、完全に最適化された（ツリーが揺れる）アプリが得られるわけではありませんが、非常に特定の状況では便利です。 [これは、ファイル名が文字通りファイルのコンテンツのチェックサム/ハッシュであるフィンガープリントを使用していることを前提としています。したがって、ファイルが変更されなければ、ファイルをキャッシュできます。]
  • ごくまれに、特定の方法でコードを最小化した場合にのみ明らかになるコードにわずかなバグが存在することがあります。これは、「最適化された」メソッド/クラス名に依存しているためかもしれません。そのため、このようなバグがある場合（修正中）は、本番環境でベンダーチャンクを有効にする必要があります。
  • ベンダーチャンクを意図的に有効にして、アプリの読み込みを遅くします-それから、上司に最適化のために遅く働いていることを伝えます-そして無効にします;-)
  • 何故なの？人々は遊ぶのが好きです！
1
Simon_Weaver