Angular Production Build

[00:00:00]
>> When we ran the, buddle analyzer, it was kinda. And we're analyzing that. We've got this also. Now we've got this 50 or five megabyte file, which is fine for local. I would say kinda, local production or, development. But it's not super great in terms of is this something that we really wanna build or put into production?

[00:00:39]
And so i'm gonna run this build one more time. So if you wanna build your app, it's you can do NP build NPM, run, build nccih run dashboard hyphen build. And what i wanna call out here is that notice that this vendor map. Is five and a half Meg's it's very large.

[00:01:03]
I would not recommend shipping this. Let's do a neat trick here. History. Grab, build Copy this, we'll run this so we're gonna run the build with the prod flag. So NG run dashboard build production. That's a mouthful. And it's gonna now run a production build. And so we're gonna let this run.

[00:01:35]
And then what i wanna do is i wanna step into the actual file. And we're gonna do a quick analysis on the size. And so remember we're five and a half megabytes. And now we're gonna hopefully get even better. So, you can already see that these numbers look lower, but let's hope into the code and i wanna take a peek.

[00:02:04]
So we're gonna go into the disk and apps and dashboard and i wanna reveal in finder and i'm gonna go get info and you can see here it's one Meg for the entire thing. So simply by doing a production build, we're able to reduce it significantly. So that's surprisingly, this may seem super obvious, but i have ran into situations where it's our app is so huge and you the first question is, well, are you doing a production bill?

[00:02:45]
And they're what's a production bill? And so, we went from five minutes to one Meg. So 80% improvement right off the top, simply by adding in the proud flag. Now, what i do wanna point out when you're doing a production bill, so super easy. That a lot of people are doing this but i've seen individuals and teams that aren't they're not doing a production build.

[00:03:13]
Is that what you need to do when you're doing a production build is that in your environments if you're using environment variables, that in my case, i had an API endpoint that i'm pointing to my local development environment. And for the sake of this workshop, i'm still pointing to that local development environment but this did not exist.

[00:03:39]
And so if i save this, and so if you forget to set up your config for that environment and you run this, is that it should throw an error. And so what this allows you to do is that it allows you to essentially segment your environments specific examples or configuration details into configuration files and then feed them in during the build.

[00:04:11]
And so, at a higher level, what i've done is based on a configuration file that existed outside of that was even at a higher abstraction is that i've used a make file, which is super analog. So, unfortunately with make is it's been around forever it works. It's not great to google, but i've had it where it's, here's my configuration file or here's my configuration end points, different things.

[00:04:45]
And i've went through and i've generated those configuration, those environment files on the fly. And so if you are doing a production build, or an environment build cuz another one that i use quite often is what i would call UAT. So user acceptance testing. So typically i'll have a dev environment where it's pretty volatile, i'll have UAT, which is what i would say, kinda l a beta release style environment where you wanna put something in for your stakeholders and for users to go through, test it, make sure that it works.

[00:05:20]
And then you have plans so a lot of times i will have, essentially, configuration for all three of those environments and then when you're building it then you just target that particular configuration and you make that work.