Adjusting budget sizes in angular.json

user_4350389 0
Viewed 2094

I'm getting a bunch of warnings when I run ng build --prod . For example

...

WARNING in budgets, maximum exceeded for C:/Users/Phil/Documents/myapp/myapp - offical-dev/src/app/profile/profile.component.css. Budget 6 kB was exceeded by 895 bytes.


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

I know I can easily go into angular.json and adjust these budget thresholds, but I don't know if it's a bad idea or not. Should I have any concerns with raising these budgets?

  "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "65kb"
                }
              ]
            },

I did it to the anyComponentStyle type by setting it to 65 to make the css budget warnings go away, but is this gonna have performance issues or should I just adjust them to meet my app's size and not worry about it?

angular
1 Answers

The default budgets are there to to make sure the app loads decently fast on most devices.

What fast enough for your app is, depends on you however.

If it is a web-shop or info website with a lot of traffic, where users might leave or go to the next possible site, if it doesn't load in the expected timeframe (usually <2s), loading time is crucial and you should try to keep the app as small as possible.

If your app is a corporate app with a lot of functionality, where it is ok for the users to wait a few seconds for the page to load initially, then you can adjust the budget.

Regarding the css budgets specifically, i suggest you rethink the architecture of your app. Any css for a specific component gets injected into the app through javascript in runtime. You should therefore keep it as little as possible.

If your current component has over 65kb worth of css, you should probably transfer most of it into a general theme file such as styles.css. That file will be compiled into a static css file that will be loaded directly by the browser and not injected through javascript and therefore be more efficient.

Summary:

Limits are best practice, but can be ignored if you know what you are doing. Most CSS should be injected statically, therefore your limit might not be hit.

user_43746160
Related