Angular build warning "Bundle initial exceeded maximum budget." I know how to remove the warning, but how big is too big?

Question

I am creating a small HTML game (think Wordle). There are only a few small pages (home/game/about/create). I don't use many, but I do have Angular Material controls package installed. I'm shocked that such a tiny app is exceeding the standard limits. But I'm also quite unsure how large is too large, or how to reduce the size?

I know I can go into angular.json and set the budgets, so my question is really more about WHAT to set them to, and WHY. Are the initial budget values just too small to begin with? My app currently peaks around 1mb after prod build with --aot. It seems to run fine. I'm just curious if there is a rule of thumb about file sizes?

Answer 1

You can update your maximum allowed budget for production in your angular.json file.

If it is too big consider looking at the libraries you're using and if they're necessary. Note that the bigger your website is, the longer it may take for someone to load it.

...
"configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2000kb",
                  "maximumError": "5600kb"
                },
...