Skip to content

Aquent | DEV6

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Angular CLI Production Build Benchmarks

Written by: Chad Upton

If you’re not using Angular CLI (Command Line Interface) for your Angular apps, then you’re missing out on a tool that will make your life a lot easier.

Angular CLI can kickstart a project quickly by setting up a modest application foundation with a component example that works right out of the box. Among other things, it also makes it quick and easy to run a development server and optimize production builds. Production builds can be done without Angular CLI, but it’s so much easier with it. 

Why are production builds important? They make your app load and run much faster, which reduces bandwidth costs and improves the user experience — so you should definitely be using them.

With angular CLI, simply pass “-prod” to your “build” command and viola, you’ve got a production build. With a production build, compilation happens at build time, which means the Angular compiler doesn’t need to be deployed with your application, making it much smaller. You’ll also get better type and error checking before you deploy.

There are many options for the build command, but I’ve taken a real (medium sized) application and compiled some benchmark metrics for a few of the popular build options to illustrate their affect on our application.

Build ModeArtifact Size (gzip)Build TimeInitial Load TimeBoostrap TimeTime to First Display
ng build4.2 MB21 s16.2 ms936.7 ms952.9 ms
ng build –aot4.00 MB42 s18.2 ms494.4 ms512.6 ms
ng build -prod2.66 MB49 s21.6 ms493.4 ms515.0 ms

I should mention that build time and bootstrap time will vary with computer speed, and load time will vary with internet connection speed, so don’t worry too much about the specific numbers — pay attention to the deltas because these relative numbers give us insight into where the work is happening in these different builds.

We can see that going from a standard dev build to a full production build, a significant part of the work shifts from the user’s computer to the build time. The artifact size is not really important during development time since it’s being loaded from a local disk, and half a second of bootstrap time isn’t a big deal either. But these two metrics are nearly cut in half when switching to production mode, and the production build takes 2.5 times longer, but that’s a one time cost for the deployment team and a marginal one at that.

Take the time to make a proper production build; as we can see, the user gains a lot from a real production build.

Want to learn more Angular?

Check out our 4 day Angular training course

View Course Details