How to speed up the Angular build process

Question

After making some changes in my TypeScript files, each build takes over 20 minutes. I run this command: ng build --output-path=..\..\static\angularjs.

If I run it in Microsoft PowerShell, it needs 25 - 30 seconds. This is a lot of time.

Enviroment

• Windows 10
• 8 GB-Ram
• PyCharm 64
• MS PowerShell

How can I speed this up?

Solution 1

My app took 28secs to build, but I've reduced the time to 9secs. Usings this flag

ng build --source-map=false

you can see the difference in time comparing the time:

ng build --stats-json 

ng build --stats-json --source-map=false

source map is intended only for debugging, Hope it helps

Solution 2

This reduced my build time to 50%

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

Solution 3

I've found that for me, this issue was solved by using the watch flag, i.e.

ng build --watch=true

This runs constantly, and automatically builds files only when saved. It has dropped my build time from 8 sec to <1 sec for small changes in code, since it only generates .js files for what actually changed.

From https://angular.io/guide/deployment

The ng build command generates output files just once and does not serve them.

The ng build --watch command will regenerate output files when source files change. This --watch flag is useful if you're building during development and are automatically re-deploying changes to another server.

You should probably use ng build with the necessary options when you are building for production so that the necessary optimizations are completed.

Solution 4

Based on others' answers I created my own configuration, which reduced dev build time three times.

1. In the angular.json I created a new profile called "development" under projects.<my-project-name>.architect.build.configurations:

   "development": {
     "optimization": false,
     "outputHashing": "none",
     "sourceMap": true,
     "namedChunks": false,
     "aot": true,
     "extractLicenses": false,
     "statsJson": false,
     "progress": true,
     "vendorChunk": true,
     "buildOptimizer": false
   },
   "production": {
     ...
   

   Here I enable source maps. If you don't need them, you can set sourceMap flag to false, it will reduce build time even more.

2. In the package.json file I added a new script called watch:

   "scripts": {
     ...
     "watch": "ng build --watch --configuration development"
   }
   

3. Then I just have to run in the command line:

   npm run watch
   

   and see the build taking much less than before and also on each change it rebuilds everything even quicker.

My final stats are the following:

• Default settings: 77 sec
• With source maps: 25 sec
• Without source maps: 21 sec

Solution 5

According to https://github.com/angular/angular-cli/issues/6795 using --build-optimizer=false speeds up the build.

View more solutions

Comments

[Mark Langer]

If you remove any way to debug the TS files , this doesn't help a developer, does it?

[aruno]

I'm a developer and this is extremely helpful. I don't need debug information 100% of the time (and I'll still get some errors that will be self explanatory). I expect this to save a lot of time when I'm actually developing new stuff. For me compile time for a full build went from 35 to 23 seconds. For an ng serve it went from 22 to 16 seconds.

[aruno]

And having used this for a couple days I'm also realizing that usually having a single file to debug in chrome (main.js) is actually often much easier than many typescript files - especially if you want to set breakpoints. The speed increase for recompilation when a small change is made - down from 2-3 seconds to about half a second. The bottleneck now is the time it takes Chrome to parse and display the page - which hopefully will be much faster with the upcoming Ivy renderer.

[Tomas]

I believe watch mode is not considered a build in this question. OP search for way to speed up overall build process for deployment, not in development.

[nivlac]

Thanks for the feedback Tomas. I added this answer because I could imagine someone else coming to this question, and this answer being just what they needed (like it was for me). Could you explain why you believe watch mode isn't considered a build? OP talked about "some changes in TypeScript Files" so I thought this would be a valuable answer.

[Tomas]

in watch mode Angular will rebuild only chunks of changed code, thus it's considerably faster, however does not reflect overall production build process, when all files need to be compiled, tree-shaked and bundled. Thus disabling watch will speed up development process (on local development each file change can be assigned to single chunk) of each subsequent build (but not the first one), it will completely not affect production build. But yeah, some change as OP mentions may indicate he refer to development (not releasing/building itself) process.

[Tomas]

Please just add a note in answer that this will affect development process build speed, not building deployment and I'll be happy to took back my down vote.

[Stephen Turner]

Hi @Tomas, I've improved the answer for nivlac. Do you think this better answers the question?

[nivlac]

Thanks Stephen and Tomas! This was my first SO answer, so your feedback is very much appreciated :)

[gilm]

Wow, man. I owe you a beer! This also works with ng serve and speeds up refreshes.

[Артур Гудиев]

I have such message. The option '--source-map' is not registered with the serve command

[user1008139]

With newer versions it is --sourcemaps=false

[thynctank]

@АртурГудиев this was for ng build, not ng serve

[Tom McKearney]

Uh... Source Map is not just for debugging. It's also for being able to support production with real code references instead of minified variable names,e tc.

[TheViralGriffin]

The Comment sounds helpful, could you please help by explaining each option, i did look through the ng build documentation and couldn't find the explanations helpful.

[dota2pro]

@TheViralGriffin angular.io/cli/build see options section

[TheViralGriffin]

@dota2pro what i meant was, for example there is one option called "extractLicenses", in the documentation it says that "extractLicenses" "Extracts all licenses in a separate file". In this scenario which licences are we talking about. Hence i suggested, if possible and if you are aware what those option do, you could brief them so that people visiting the post might find it extremely helpful.

[jenson-button-event]

--build-optimizer Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.

[Viocartman]

@dota2pro where do you place this configuration options ? In the angular.json file ?

[Simon Dragsbæk]

I would leave in "showCircularDependencies": true, because this be the root for terrible code

[numerical25]

you dont add prod as a parameter ? prod is very important because it reduces runtime sleed cause it compresses more code and files.

[Aliaksei Maniuk]

One of the easiest and effective solutions. To set the appropriate value for max_old_space_size check official documentation nodejs.org/api/…. E.g. 'On a machine with 2GB of memory, consider setting this to 1536 (1.5GB) to leave some memory for other uses and avoid swapping.'

[DFSFOT]

I'm using rxjs-compat first operator to be able to do .first() on an Observable (which wraps the next in a promise). Any idea if there's a non-commonjs equivalent of that? Scourged through google but no success...

[Dalibor]

Didn't help. After I enter "ng build" I get like 10-15 s of pause, and then starts "generating modules etc..." And, this second part is also same as before.

[afrish]

+1 This is a great answer that helped me a lot to optimize the dev build. Everyone wondering where to place and how to use those properties, along with some stats, can read my own answer below

[Some random IT boy]

CI/CD systems can benefit from this too

[Trevor]

@DFSFOT would firstValueFrom work for you? rxjs.dev/api/index/function/firstValueFrom

[aniran mohammadpour]

I changed aot to false and it worked very very very well, 20Sec to 500miliSec

[afrish]

@aniranmohammadpour Thanks for the tip, need to try it too. Be careful though, because you may have different build results/errors with and without AOT. So after going through multiple dev build cycles, you still have to build it at least once with AOT turned on, as you would want it on prod

[alexOtano]

--watch is useful to test the final build and you need to make changes on the fly, but the initial build (the first time you run it) will take the same amount of time, I wouldn't recommend this as a solution.

[user1034912]

where do you put the aot option in Angular.json

[The Red Pea]

@user1034912 I added a screenshot showing where to put the aot option. If it answers your question, do you mind upvoting? Thanks

[user1034912]

Perfect answer. This really helped me a lot. Thank you a thousand times. May god bless your life.