15

I am trying to increase Angular Build production speed with command below, Ran the following command, however no improvement in build time, still at 14 min. Is the --prod command making it ignore the max old size space? is the script correct? We are running this in Azure Devops Agents, this how it appears in log

node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none

Should command for max-old-space-size be relocated in angular.json configurations production section?

Improving production build time for Angular 7 application

This is package.json file:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod",
    "prod": "node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  • Dude if he has source maps on his production build he's got more problems than just his build speed lol, anyway...would need to see your angularjson setup for your production build schema to get better insight as to how you're handling chunks, licenses, buildOptimizer, AOT, css extraction, etc etc etc... There is no magic property to add that will give you results you're after, you have to do some configuration to the build process itself. – Chris W. Jan 13 '20 at 22:28
  • 1
    PS, if your production build time is at 14 minutes, I'm guessing there's a fair amount of work to do identifying your pain points. – Chris W. Jan 13 '20 at 22:31
  • You may have a look at bazel (https://angular.io/guide/bazel), but as Chris suggested you may improve the details of your question first by adding additional settings you use.. – phhbr Jan 15 '20 at 15:51
  • Have you thought about enabling [ivy](https://angular.io/guide/ivy)? The angular team was [asking for devs to opt in in June of 2019](https://blog.angular.io/its-time-for-the-compatibility-opt-in-preview-of-ivy-38f3542a282f) and said they were "reasonably confident that the majority of applications will work without changes across the ecosystem". It could be something to consider (especially if you make it to v9 release date without solviing your build time woes). – Dean Jan 16 '20 at 23:48
  • Should be good to read the [Angular Deployment Guide](https://angular.io/guide/deployment) as this include a section which explain the different production flags in order to optimize the build step. Also, it provides insight on *@azure/ng-deploy* package to help you with azure. – KingDarBoja Jan 19 '20 at 04:09
  • Can you show your `angular.json` file? And is upgrading to angular 9 an option? – David Jun 26 '20 at 07:02
  • @ChrisW.: What’s wrong with distributing source maps to production? – Jeremy Caney Jun 26 '20 at 07:41
  • @JeremyCaney unless it's to debug something in production I wouldn't for a couple reasons you can find more details in [existing articles](https://css-tricks.com/should-i-use-source-maps-in-production/) around the web but primarily because I work in environments that would prefer source to be obfuscated. – Chris W. Jun 26 '20 at 14:02
  • can you provide more info in the post like ballpark number of components / modules in the app? share a screenshot of the console output ng build --prod if you can (at least list out the bundle sizes). Build times will obviously increase as the number of components/modules increase, but I would take a hard look at the source maps of each bundle (to see the size of each component/service) before going down the path of increasing heap size. Ive seen plenty of 'small' apps with 10+mb total --prod bundle size due to accidental bloat. – Chris Newman Jun 29 '20 at 17:55
  • http://dotnet--solutions.blogspot.com/2020/09/i-am-using-angular-cli-7-and-i-am-going.html – Ramesh Rajendran Sep 28 '20 at 11:50

3 Answers3

2

Hey according to the documentation you can optimize you builds with

  • Lazy loading. only loading the application modules that absolutely must be present when the app starts. Configure the Angular Router to defer loading of all other modules (and their associated code)

  • Enabling the --prod mode on your build command, ;) of course. You can then inspect the bundle size using a library called source-map-explorer

    npm install source-map-explorer --save-dev

Build your app for production including the source maps

ng build --prod --source-map

List the generated bundles in the dist/ folder.

ls dist/*.bundle.js

Run the explorer to generate a graphical representation of one of the bundles. The following example displays the graph for the main bundle.

node_modules/.bin/source-map-explorer dist/main.*.bundle.js

You can get more info at the angular docs here

BrianDev
  • 476
  • 5
  • 10
  • 1
    Those documentations are aimed at optimising the application during run time, not optimising the build process. – rooby Dec 08 '20 at 02:11
0

This is the normal build time typically getting by build agent ins Azure devops for Angular 7 & 8. setting up node --max-old-space-size=12288 would give you extended memory allocation for build process. its not reduce the build time. yes this command work in azure.

With Angular 9 release, they have introduce Angular Ivy Build engine and its considerably decrease build time I have upgrade my solution to angular 9 . After that Devops build time reduce by around 60%. So try to update angular 8 and then to 9. This would give you guide for this migration Angula migration guide

CodeMind
  • 616
  • 1
  • 7
  • 19
-1

Change your angular cli version

npm i --save-dev @anguler/cli@1.7.0-rc.0

surendra kumar
  • 1,686
  • 11
  • 15