What factors should be considered when setting budgets configuration in angular.json?

Question

I am creating an Angular PWA that needs to be fast and light. When creating the angular application with the angular cli, I get a default budget that looks like this.

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "1kb",
    "maximumError": "2kb"
  }
]

Will these defaults be good for something like a PWA where users are on old tablets and expect the app to be fast and responsive? This is not a browsing app or something like that. It is for repeated transactions, like scanning items in a grocery store and doing business logic on each scan. Users can't be waiting a second after each scan or input action for a result or component to load. This will be global application where things like internet availability and speeds can vary greatly.

I have only just started development and have been using these defaults. I have not received any warnings about the budget so far, which concerns me that they may be too high for my purposes.

Answer 1

To answer your question - since many typescript applications use GRPC GRPC Link or similar technologies, one should think of the taxonomy of the available internet bandwidth on first load, installation time and network congestion. as an example in parts of east Africa the available network is 780kbs, so if one has a bandwidth intensive application - the data stream and package size is very important, keeping things local to the client is critical for a good user experience.

• Application package size by Bandwidth availability:

  56kbs - 380kbs frame maximum package 800kbs.

  384kbs-768kbs 4g/3g maximum package 2mbs storage reserve 1mb (caching)

  1.5mbs - 50mbs 4gLTE,3GS++ (AIRSPAN) maximum package 50mbs (browser max) storage reserve 10mbs-1GBS

  50MBS - 400mbs 5G maximum package 50mbs (browser max) storage reserve 10mbs-1GBS

I worked in Africa I'm a software engineer, our mobile app had to be deployed in multiple countries with very poor cellular reception.

Modern Relay React Relay Linkcoupled with Angular worked very well.