Making Production Ready Code in Angular : In terms of Budgets !!

So, you have created angular application, awesome.

All your code works, that’s great. You are a Rockstar!!

But have you considered optimizing your code for production build, No ? then follow along, my 2 cents might help you to save your few MB’s (which, by the way in computer science and IT culture brings shine in the eyes of your supreme leaders and make most of your peers jealous around you)

So let’s start.

While creating solution angular ask you few things let’s have a look at them. Shall we!! Still you have time to quit.

Then it asks for Routing, and CSS and then its goes out to the world and bring a hell a lot of modules which may or may not be required in your application, if that does not satiate your hunger you can always find more library out in npm repository .

Now assuming best case scenario where you have not fallen into the trap of confusion of N means Yes and y means No, everything will go as it should be and in your folder you can see a angular solution, with all the default files.

Act 1 Scene I.

Environments

Angular sees you like a “person who has a lot of zeal to do great things in life” so it helps you by creating boiler plate code and structure so that you don’t have to worry about them, one such is a folder named “environments” in your solution, assuming whatever you are creating will not be going to stay in your local machine, and you will end up deploying it somewhere in the world full of server, which will act your production environment.

So that is why there are 2 files exist in your environment folder, but that does not stop you from creating your environments for Dev, QA, and what not. So whatever environment you want just create a file for it and additionally added details to “angular.json” file and these are just two sauce you need to find more what to add, because this article is not about creating environments.

Act 1 Scene II.

But what if, you scratched your head and asked well, ok what about I select “N” for the stricter type checking what will happen then, and as seen below, well then angular first of all give you an error, why ? because you cannot have number in your application name (Duhhh ??). But if you take courage and remove that number, angular will go creating default boiler plate code for you.

So what ripple does a Yes or No creates for us in solution?

So when selected No “angular.json” will have production code with the following optimization and budgets

As compared to when we selected Yes for the same

So let’s try to understand the difference they create ! So according to Minko Gechev writes in https://blog.angular.io/angular-cli-strict-modec94ba5965f63 that “bundle budgets provide a guarantee that the performance of your application will no unnoticeably regress over time” that is why we see different budget definitions for both of the modes.

If a size of JavaScript bundle or style exceed the warning budget you will get a warning.

This does not let you create a build for your application until the error is not resolved. Which is a good thing, and I believe if you are so adamant to keep your JS bundle size in check you should not let angular create it for you !

But why you are so cautious about the size, because when the network bandwidth is lesser then also your application should be able to perform at optimum rate this is why budget is so important.

To make sure you fit the budget:

Act I Scene III

Comments:

Advantage and Dis-Advantages of this budget

[A] — Accident can happen anytime, from a newbie software intern to team lead this process can save each and every one of the team member from checking in dependency which is very large, and overall your application will look the way it should be or supposed to be.

[D] — The manual effort for changing the budget comes with this set of principles as we are keeping the solution to check for boundary conditions.

Hands feels the itch. Want to try it on your own?, better : this links shows you how to do that https://codinglatte.com/posts/angular/angular-cli-budgets-angular6/#:~:text=You%20can%20set%20this%20configuration,as%20an%20Angular%20CLI%20Budget.

“Well this is not the end, but the focus of budgets was covered, which seems to be no importance but holds lot of importance while creating application, so be cautious”

follow me here : https://www.linkedin.com/in/iyashjoshi/

and here : https://github.com/Yash-Joshi