![Heroine Angular]()
In this article, I explore a solution for the error message “initial exceeded maximum budget” that typically occurs in Angular projects when the size of your initial bundle exceeds the maximum size specified in our angular.json configuration file.
In an Angular project, you can set budgets for the size of your application in the angular.json file. These budgets help you control the size of your application and ensure that it doesn’t grow unexpectedly large as it evolves.
Here’s a default configuration in angular.json that throws an error when it exceeds 1MB:
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “500kb”,
“maximumError”: “1mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “2kb”,
“maximumError”: “4kb”
}
],
Here’s an example of how budgets might be set in angular.json to support till 4MB, changing maximumWarning and maximumError values:
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “4mb”,
“maximumError”: “5mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “2kb”,
“maximumError”: “4kb”
}
]
In this example, the initial type refers to the application’s initial bundle. If the size of this bundle exceeds 4MB, a warning will be issued during the build process. If it exceeds 5MB, an error will be thrown, and the build process will fail.
If you’re seeing the “initial exceeded maximum budget” error, it means that the size of your initial bundle has exceeded the limit specified in the maximumError field. To resolve this issue, you can either increase the maximumError limit or try to reduce your bundle size.
Here are a few techniques to reduce the bundle sizes
Use
ng build --prod --build-optimizer
In newer versions, this can be done by default with:
ng build --prod
or
ng build
- Use module lazy loading and modularize your application as much as possible.
- Make sure your 3rd party dependencies are tree-shakeable.
- Use 3rd party tools like webpack-bundle-analyzer to see what is causing bloat in your modules.
- Check if your files are gzipped or not.
Remember that regulating your bundle size is critical to the speed of your web service, particularly for customers with slower internet connections. So, it’s always a good idea to keep an eye on your package size and make it as tiny as possible.
In the following article, I’ll explain lazy modularization.