How to quicken Angular construction

Slow build times impede the efficiency of developers. It is easy to become distracted if it takes more than two minutes to compile code. You lose your train of thought and, heaven forbid, access social media.

Slow construction increases costs. Imagine that you have one developer who earns $100,000 per year, which is roughly the average annual salary for a software engineer in the United States. Assuming two weeks off and 40 hours per week, that is $50 per hour. If they rebuild the application ten times per day and each rebuild takes two minutes, they are paid $3,320 per year to monitor a progress bar. And this does not even account for the cost of operating builds on cloud infrastructure.

It is not surprising that a Reddit engineer announced last year that the company had purchased new Apple Silicon MacBook Pros for its Android developers. According to this engineer, the improved build times paid for the laptops in only three months.

Try these steps to reduce Angular build time if you are experiencing slow builds. In increasing order of complexity, they are listed.

step 1: update your local environment

Increase the memory limit of Node initially. This utilizes more RAM, but it is beneficial.

Second, keep the ahead-of-time (AOT) compilation feature active. The builds will take a little longer than with just-in-time (JIT) compilation, but the page will reload so quickly that it may be worthwhile.

step 2: check your construction procedure

I examined the performance of each ng build command-line option when enabled and when disabled. Depending on the situation, these are the flags I recommend using.

—named-chunks and —vendor-chunk cache JavaScript bundles across builds. The flags in the prod column optimize the build for smaller bundle sizes at the expense of longer compile times.

consider hot module reloading.

Angular 11 simplifies hot module reloading (HMR). When Angular rebuilds a module, the app is updated without having to reload the page. It simply inserts new code.

However, WebSockets and RxJS subscriptions behave erratically with this library. If you fail to properly unsubscribe from both, it may result in duplicate connections and confusing errors.

step 3: minimize necessary labor.

Less code results in quicker builds. Consolidate components, eliminate obsolete code, and get rid of everything you can.

Avoid custom building techniques

Our team of Angular experts worked with a client whose builds were slowed down by localization files. They eschewed Angular's localization system in favor of a custom process that merged over one thousand JSON files at build time.

Avoid adding additional steps to the construction process whenever possible. If Angular includes a certain functionality, use it rather than recreating it. Utilizing built-in features, such as localization, scripting, and bundling, will allow you to take advantage of the Angular team's efforts to optimize build times.

Consider whether this step can be performed asynchronously if you have pressing product requirements and need to perform a custom process during the build.

use small modules

Use small Angular modules to conclude. When an Angular application is being served and a file changes, only the module that contains that file is rebuilt.

step 4: upgrade angular

Angular includes batteries, unlike other frameworks. With React or Svelte, you can use an entirely different and significantly faster compiler. Create-React-App may initiate you with webpack, but you can accelerate esbuild.

The Angular compiler is the same as the one shipped with the framework. Updating to new major versions of Angular will make you faster, with fewer compiler bugs and better build times. Ivy and Angular 9 are particularly quick.

Utilize ng update when performing the upgrade. The Angular CLI will automatically use the fastest settings by applying migrations to your build configuration. You can also run these migrations (ng update @angular/cli —migrate-only) after the upgrade.

Now, upgrading to major versions of Angular is easier said than done. Occasionally, there is neither the time nor the budget to upgrade a massive, dated enterprise application.

Fill out our form for a free consultation if you need assistance upgrading your Angular app. See also our eslint to tslint migration guide.

5. implement caching

In addition to caching build data in the cloud, tools such as Nx share it with developers. If you do not mind introducing a new dependency into the build process, they can be persuasive.

Try caching your node modules folder if your builds are slowed down during continuous integration. People have reported that preserving node modules between CI runs can accelerate build times by up to 75%.