予算の警告、初期の最大値を超えています

--prodを使用してAngular 7プロジェクトをビルドすると、予算に警告が出ます。

Angular 7プロジェクトがありますが、ビルドしたいのですが、警告があります。

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

これらはチャンクの詳細です：

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

正確には予算とは何ですか？そして、どのようにそれらを管理するべきですか？

angular.jsonファイルを開き、budgetsキーワードを見つけます。

次のようになります。

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

おそらくご想像のとおりmaximumWarning、この警告を回避するために値を増やすことができます。

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

予算とはどういう意味ですか？

パフォーマンスバジェットは、サイトのパフォーマンスに影響を与える特定の値に対する一連の制限であり、Webプロジェクトの設計および開発ではこれを超えることはできません。

私たちの場合、予算はバンドルサイズの制限です。

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

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• パフォーマンスバジェット（要求数を少なくし、ファイルサイズを小さくする）

Angular CLIの予算とは何ですか？ 予算は、Angular CLIのあまり知られていない機能の1つです。それはかなり小さいですが、非常にきちんとした機能です！

アプリケーションの機能が大きくなると、アプリケーションのサイズも大きくなります。予算はAngular CLIの機能の1つで、構成に予算のしきい値を設定して、アプリケーションの一部が設定した境界内に収まるようにすることができます — 公式ドキュメント

または言い換えると、Angularアプリケーションを、ビルドプロセスによって生成されるバンドルと呼ばれるコンパイル済みJavaScriptファイルのセットとして説明できます。Angularバジェットを使用すると、これらのバンドルの予想サイズを構成できます。さらに、警告を受信したい場合や、バンドルサイズが制御不能になった場合にエラーでビルドを失敗させたい場合の条件にしきい値を設定できます。

予算を定義するには？ 角度予算は、angular.jsonファイルで定義されています。ワークスペース内のすべてのアプリには異なるニーズがあるため、予算はプロジェクトごとに定義されます。

実用的に考えると、プロダクションビルドの予算を定義するだけで意味があります。製品ビルドは、ツリーのシェイクやコードの最小化などのすべての最適化を適用した後、「実際のサイズ」のバンドルを作成します。

作成エラーです。バンドルの最大サイズを超えました。これは、問題が発生したことを知らせる優れたシグナルです...

1. 機能を試してみたが、適切にクリーンアップできなかった
2. 私たちのツールはうまくいかず、不良な自動インポートを実行するか、推奨されるインポートのリストから不良アイテムを選択します
3. 不適切な場所にある遅延モジュールからデータをインポートする可能性があります
4. 私たちの新機能は非常に大きく、既存の予算に収まりません

最初のアプローチ：ファイルはgzip圧縮されていますか？

一般的に、gzip圧縮されたファイルのサイズは元のファイルの約20％にすぎないため、アプリの初期読み込み時間を大幅に短縮できます。ファイルをgzip圧縮したかどうかを確認するには、開発者コンソールのネットワークタブを開きます。「Response Headers」に「Content-Encoding：gzip」が表示されている場合は、問題ありません。

gzipする方法？ ほとんどのクラウドプラットフォームまたはCDNでAngularアプリをホストしている場合、おそらくこの問題に対処しているため、この問題について心配する必要はありません。ただし、Angularアプリを提供する独自のサーバー（NodeJS + expressJSなど）がある場合は、ファイルがgzip圧縮されているかどうかを必ず確認してください。以下は、NodeJS + expressJSアプリで静的アセットをgzipする例です。この完全に単純なミドルウェアの「圧縮」によってバンドルのサイズが2.21MBから495.13KBに削減されるとは、ほとんど想像できません。

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

2番目のアプローチ:: Angularバンドルを分析する

バンドルのサイズが大きくなりすぎる場合は、不適切な大型のサードパーティパッケージを使用したか、使用しないパッケージを削除するのを忘れたために、バンドルを分析する必要がある場合があります。Webpackには、webpackバンドルの構成を視覚的に理解できる素晴らしい機能があります。

このグラフを取得するのは非常に簡単です。

1. npm install -g webpack-bundle-analyzer
2. Angularアプリで実行しますng build --stats-json（フラグは使用しないでください--prod）。有効に--stats-jsonすると、追加のファイルstats.jsonが取得されます
3. 最後に、実行するwebpack-bundle-analyzer ./dist/stats.jsonと、ブラウザがlocalhost：8888のページをポップアップします。楽しんでください。

ref 1：Angular CLIの予算は私の日をどのように節約し、どのようにしてあなたの日を節約できるか

参照2：4ステップでAngularバンドルサイズを最適化する