解決npm build--prod、ERROR in budgets、maximum exceeded for initial.Budget 5 MB was exceeded by 750 kBの問題

質問:
実行コマンド:npm build--pord、次のエラーが発生しました.

WARNING in Invalid background value at 11:14. Ignoring.

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

ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 750 kB.

ソリューション:
開けてjsonファイル、budgetsを見つけてこの部分を見ます

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

maximumWarningの値を変更して、この警告とエラーを防止することがわかります.
変更後:

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

この問題の原因は、コンパイル時にメモリが予算を超えたためです.
Angular CLI予算とは?予算はAngular CLIではあまり知られていない機能の一つです.これは小さいですが清潔な機能です!
アプリケーションの機能が増加するにつれて、それらのサイズも増加します.予算はAngular CLIの機能です.アプリケーションの一部が設定した境界内にあることを確認するために、構成で予算しきい値を設定できます.公式ドキュメント
すなわち、Angularアプリケーションは、構築プロセスによって生成されるJavaScriptと呼ばれるコンパイルされたJavaScriptファイルのセットとして記述することができる.角度予算では、これらのバンドルパッケージの予想サイズを構成できます.さらに重要なのは、バンドルパッケージのサイズが暴走しすぎる場合、警告を受信したり構築できないエラーの条件をしきい値に設定したりすることです.
予算の定義方法Angularの予算はangularです.jsonファイルで定義されています.ワークスペース内のアプリケーションごとに異なるニーズがあるため、プロジェクトごとに予算を定義することは意味があります.
実務的に考えると、生産構築のために予算を定義してこそ意味がある.製品構築では、揺れツリーやコードの最小化などのすべての最適化が適用されると、「リアルサイズ」のバンドルパッケージが作成されます.
やばい、構築エラー!最大バンドルサイズを超えています.これは良い信号で、私たちに問題があったことを教えてくれました.

機能を試したことがあるかもしれませんが、

は正しくクリーンアップされていません.

ツールでエラーが発生し、エラーの自動インポートが実行される可能性があります.または、推奨インポートリストから不良項目

を選択しました.

不適切な場所で不活性モジュールからコンテンツ

をインポートする可能性があります.

当社の新機能は非常に強力で、既存の予算

には適していません.
1つ目の方法:ファイルを圧縮しますか?
一般的に、圧縮ファイルのサイズは元のファイルの20%にすぎず、アプリケーションの初期ロード時間を大幅に短縮できます.ファイルが圧縮されているかどうかを確認するには、開発者コンソールの「ネットワーク」タブを開きます.「応答ヘッダ」では、「Content-Encoding:gzip」を参照してください.
どうやってgzipしたの?ほとんどのクラウドプラットフォームまたはCDNでAngularアプリケーションを管理している場合は、この問題がすでに解決されている可能性があるため、心配する必要はありません.ただし、NodeJS+expressJSなどの独自のサーバがAngularアプリケーションにサービスを提供している場合は、ファイルが圧縮されているかどうかを確認する必要があります.以下に、NodeJS+expressJSアプリケーションにおけるgzip静的資産の例を示します.この単純なミドルウェア「圧縮」機能により、バンドルパッケージのサイズが2.21 MBから495.13 KBに減少するとは考えられません.

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

2つ目の方法:Angularバンドルパッケージの分析
バンドルされたパッケージのサイズが大きすぎる場合は、バンドルされたパッケージを分析する必要があります.これは、不適切な大規模なサードパーティ製パッケージを使用しているか、使用しない場合は、一部のパッケージを削除するのを忘れている可能性があります.Webpackは驚くべき機能を持ち、Webpackバンドルパッケージの構成を直感的に理解することができます.
 
詳細:
https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a
https://blog.angularindepth.com/optimize-angular-bundle-size-in-4-steps-4a3b3737bf45?gi=d46cfade9db9
 
このエッセイは本人の学习の仕事の记录で、もし疑问があれば以下の评论で歓迎して、転載して出典を明記してください.
もしあなたに助けがあれば、マウスの右下を動かして私にいいねをしてください.あなたのサポートは私の最大の動力です.