Improving Build Time for Large Angular App

Question

I have an Angular 2+ application that is fairly large and takes about 10 minutes to fully build.

I’d like to refactor my code base in an attempt to reduce the time taken to build.

I had some ideas but my 3 primary ones were:

• Use a tool like depcheck in order to remove unused dependencies
• Update all npm packages to their latest versions
• Possibly optimizing the gruntfile?

Are these some good things to do for a first attempt? What other options should I explore in order to further improve the build time?

Thanks

Answer 1

The below command is very useful to reduce build time:

ng build --source-map=false

Source map is only needed for debugging, so if you don't want that you can surely use that command.

Another one is

 --build-optimizer=false

Other than that, use AOT - ahead of time compiler. You can learn more about AOT here.

From your question, the second option might not have much effect on build time. I don't know about depcheck and optimizing gruntfile.

Answer 2

You can use the --prod flag if you're planning to deploy:

--prod enables the following flags:

Flag                  --prod
--aot                 true
--environment         prod
--output-hashing      all
--sourcemaps          false
--extract-css         true
--named-chunks        false
--build-optimizer     true with AOT and Angular 5

https://github.com/angular/angular-cli/wiki/build

Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
Production mode: deploys the production environment which enables production mode.
Bundling: concatenates your many application and library files into a few bundles.
Minification: removes excess whitespace, comments, and optional tokens.
Uglification: rewrites code to use short, cryptic variable and function names.
Dead code elimination: removes unreferenced modules and much unused code.

The remaining copy deployment steps are the same as before.

You may further reduce bundle sizes by adding the build-optimizer flag.

ng build --prod --build-optimizer

https://angular.io/guide/deployment