Optimize Angular build speed during development

Two Ways to Optimize the Angular Build Speed during Development.

using optimization flags in Angular CLI 

Let’s see how to optimize angular application . First we know how to run the angular application in angular CLI we use this command

ng serve

This command command launches the server, watches your files, and rebuilds the app as you make changes to those files.

You will notice when you make a code change and save it rebuilds from 0 to 100% and takes a while if application or page is fairly large . Now we can optimize angular and build time fairly by 50%.

Lot of things happen at a back-end one of them that takes a fairly large resources is optimization by using compression to produce a small foot print of the generated code.

While development Compression is not of much use so turning it off saves build and compile time by approximately 50% to optimize angular.

we can turn off this Compression by using optimization flag.

ng serve --optimization = false
ng build --optimization = false

using Window CMD instance instead of internal VS code command terminal

For Angular development a fairly good portion of development community use VS code and mostly we end up using terminal inside the VS code to run the commands like ng e.t.c

The VS code is built using Electron Framework and it internally spins window CMD instance but it does not do it much efficiently so the recommendation is to.

Use Windows internal terminal (Win+R) to run commands like ng build/ng server and all instead of using VS code internal terminal will speed things up.

Next steps

• you should explore the options below in detail for reducing more build and compile time. You study each option in detail and see its purpose before blinding using it. Please refer to Angular Docs for more details about the flags mentioned below. we were able to reduce our build/compile time to 9 seconds.

"optimization": false,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"showCircularDependencies": false,
"aot": true,
"extractLicenses": false,
"statsJson": false,
"progress": false,
"vendorChunk": true,
"buildOptimizer": false,