angular-cli: Build with "ng -prod" is extremely slow
Bug Report or Feature Request (mark with an x
)
- [ x] bug report -> please search issues before submitting
- [ ] feature request
Versions.
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ | | __ _ _ __ / | | | |
/ △ \ | ’ \ / _ | | | | |/ _
| '| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
@angular/cli: 1.1.0
node: 7.9.0
os: win32 x64 (Win 10 Enterpirise - 16Gig , i7)
@angular/animations: 4.0.0
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.1.0
@angular/compiler-cli: 4.0.0
@angular/language-service: 4.0.0
Repro steps.
$ ng build --prod --aot=false -ec --sourcemap=false Hash: 552d9867ececa788ac3a Time: 670222ms chunk {0} polyfills.d77767cee98c83f90386.bundle.js (polyfills) 294 kB {5} [initial] [rendered] chunk {1} main.255e1d27fe4d40b56ab2.bundle.js (main) 1.51 MB {4} [initial] [rendered] chunk {2} scripts.45a4574f31d7b91e5a5e.bundle.js (scripts) 3.88 MB {5} [initial] [rendered] chunk {3} styles.ac17d766c993c4027892.bundle.css (styles) 228 bytes {5} [initial] [rendered] chunk {4} vendor.86c029ec4598fb674488.bundle.js (vendor) 8.23 MB [initial] [rendered] chunk {5} inline.750f0337ff0a9bee9813.bundle.js (inline) 0 bytes [entry] [rendered]
ng build --aot -ec -sm Hash: 24f744145f250126e699 Time: 62809ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 294 kB {5} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 3.07 MB {4} [initial] [rendered] chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 3.88 MB {5} [initial] [rendered] chunk {3} styles.bundle.css, styles.bundle.css.map (styles) 228 bytes {5} [initial] [rendered] chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.37 MB [initial] [rendered] chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
670222ms vs 62809ms is a huge difference
The log given by the failure.
There is no failure , the build takes a very long time to complete its stuck at
92% chunk asset optimization
and then we have to wait for 10-15 mins to get the build completed.
I have disabled aot and sourcemaps, still the speed is very slow.
Desired functionality.
build should have similar time that to of ng build -aot
Any help and guidance to reduce will be helpful.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 67
- Comments: 161 (27 by maintainers)
on my case it takes a whooping 42 mins to finish
Same issue here. Im using @angular/cli: 1.4.2 node: 8.5.0 Os: Mac os sierra. Script: ng build --prod --env=prod
For me it used to be ~30mins now its ~1h 20mins
@filipesilva how is Angular-cli tested with real life projects? 20-50 modules and 5-10 thirdpary JS Libs?
@angular/cli@1.7.0-beta.2
includes a bunch of production perf optimizations:We hope these will improve production build times overall.
I had same issue.
The problem was in my app.scss file and the way I imported a library:
vs:
1.7.3 still very slow.
Hey folks, I had an out of memory build issue and stumbled across a fix for the slow build (for us at least). It turns out, throwing memory at it fixed the problem. Here’s our build command:
node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod --sourcemaps false
YMMV and it’s a bit hacky but I hope it helps someone out there.
Anything on this @filipesilva? We are running
ng build --prod --aot
and having times of:Build times became a nightmare with ng6. The problem seems to be something related to source-maps generation. Which I can disable for prod builds, but for development time and debug, those are essential.
CLI: 6.0.8 OS: macOS 10.13.4 CPU: 3,1 GHz Intel Core i7 MEM: 16GB
90% of the time it’s generating source-maps with the following output
92% after chunk asset optimization SourceMapDevToolPlugin main.js generate SourceMap
It’s draining the developer performance dramatically and starts to become a show stopper.
I’d really love to get some update from the team here. Are you guys aware of this? Is there some investment to speed up the build times?
@filipesilva Angular 5.1.0 and CLI 1.6 as well (I’m trying to build on MacOS Sierra). The most time waiting, I’m stuck at “92% chunk asset optimization”.
Happy to hear that 1.7.0 is helping keep prod build time manageable! We put in a lot of prod optimizations in 1.7.0.
I’ll leave this issue open for a few more weeks to see if there’s anything off with our fixes.
Using
@angular/cli@1.7.0-beta.2
andangular@5.2.2
our build time looks normal again (aot+build optimizer enabled).Before beta.2 (~50mins)
After beta.2 (~8mins)
Great job! Thanks @filipesilva
Very very slow here also, went from
7min
to42+
minutes. Using@angular/cli@1.7.0-beta.1
and also--build-optimizer=false
.@ShadowManu I had a try at @jpsk’s comment on a new project and saw no discernable difference on a prod build (11544ms vs 11724ms).
Something I know can have a big difference is the version of uglify we use, which should be improved by https://github.com/angular/angular-cli/pull/11996.
Increasing the memory limit like @Brandon-Born does is not a hack, and something you should expect to do at some point. Node processes have a default memory limit of about 1.7gigs. When a node process starts getting close to the memory limit it needs to spend more and more time doing garbage collection to free up memory, which in turn makes it run more slowly.
Bigger projects will use up more memory than smaller projects so at some point a project will hit the memory limit. I personally use a
npm
script for this:It’s hard to act on many of these reports since there is no objective reproduction that we can follow. It’s not that we don’t believe that builds can be slow. But builds can be slow for many reasons. It’s exceedingly likely that the projects that are seeing the most dramatic build times are suffering from some odd problem somewhere in the pipeline that is not a general problem, and for those we really need to reproduce it to fix it.
General performance improvements are of course always helpful, and we try to do them as much as possible. But the absolute best way of getting us to fix issues, especially hard to fix ones, is to offer concrete repros.
😄
For people with crazy slow build times with build -prod I’ll leave you with some advice that helped us: We were including bootstrap into every component’s scss file which was causing bootstrap to be included ~160 times in our project. Not only was the build output large (50mb or so unzipped) but the build took crazy amounts of time, 30 min. Now we are down to couple minutes and ~4MB uncompressed.
If you have doubts you can open your main bundle in a text editor and start asking yourself if you are seeing a lot of redundant stuff. Go from there. That’s what tipped us off.
The issue is the vendor chunk is now being included the main chunk as far as I can tell [1] and uglify is churning away… Our build regressed from about 3m to >30m… I killed it before it even finished.
Passing --vendor-chunk=true resolves the issue without disabling the optimizer completely.
[1] https://github.com/angular/angular-cli/wiki/build search for build-optimizer
Same issue here:
@angular/cli@1.6.0
and Angular 5.1.0This may help someone.
All 4 of my CPU cores were running at 100% when I ran
ng build --prod
, which caused my laptop to throttle down from 3.7 ghz to 0.7 ghz due to high CPU temperatures, which was causing very long build times.I ended up installing ThrottleStop and lowered my “Turbo Ratio Limits” when 3+ cores were in high use (to lower temps). Also adjusted my laptop fan profiles to increase fan speed when I had very high cpu usage.
DISCLAIMER: Be very careful with ThrottleStop, it gives you complete control of your CPU, which means you could fry your (or your companies) hardware if you don’t know what your doing.
CLI: 6.0.7 OS: Windows 10 CPU: Intel I7-7820HQ MEM: 32GB
Any update on this? We’re even to the point where we’re seeing JavaScript heap errors when we compile with sourcemaps turned on.
@skylarmb Unacceptable by who? Depending upon which absolute standard? The build of Javascript applications is complex. 1GB RAM is absolutely nothing. You should expect to have build occupy a lot of resources. The issue is time, not RAM usage. 30 seconds to build, considering you are starting at least 4 processors (tsc, sass, the whole npm thing, Uglify, WebPack, and who knows what else), is perfectly acceptable if there is a way to keep the development build shorter (which usually is the case).
With JS, you are exchanging resources for flexibility and convenience.
If you want to use less RAM, use GoLang. 😉
@jpsk Thank you for your solution in https://github.com/angular/angular-cli/issues/6795#issuecomment-416236486
The fix was to use
~
instead of../../node_modules/
in all of the scss project files.In my case I had a build time from
2378409ms
(~40 mins) and now it needs only96053ms
(~1,5 mins).Well, after spending most of two days making a copy of my project, then stripping modules/components out one at a time to track down the culprit, I got down to 2 feature modules and 1 common module and discovered that doing an
ng build --prod -sm
has an issue that causes it to hang (at 95% emitting) if any [styleUrls] contain CSS (empty css files are ok).Looks like this is issue #8314
I put everything back to how I have my production project, modified all my components to not use [styleUrls], then ran
ng build --prod -sm
and after 4990841ms (83 min), it finally finished.My /src/app stats are:
If I also use
--build-optimizer false
, the time falls to 470616ms (7.8 min)I’m having the issue.
Using
ng build --prod
it finishes in 74112ms. Usingng build --prod --sourcemaps true
it hangs at92% chuck asset optimization
forever (left it running overnight). Usingng build --prod --sourcemaps true --build-optimizer false
, it stops at92% chunk asset optimization
for a few minutes, then hangs at95% emitting
.CPU at about 80% during chunk asset optimization, then drops to 30% during emitting.
146 .ts 54 .html 6 .css 1 .gitkeep 1 .json
ng --version Angular CLI: 1.7.2
Node: 8.9.4
OS: win32 x64
Angular: 5.2.7
… animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser
… platform-browser-dynamic, router
@ angular/cli: 1.7.2
@ angular-devkit/build-optimizer: 0.3.2
@ angular-devkit/core: 0.3.2
@ angular-devkit/schematics: 0.3.2
@ ngtools/json-schema: 1.2.0
@ ngtools/webpack: 1.10.1
@ schematics/angular: 0.3.2
@ schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
+1 one word:slow,two words: too slow 400000++ ms how to fix this ,
but i can feel project 's size more slim now
@SV-efi Thanks, turning that off made a huge difference
After upgrading to 6.0,
ng build --prod --source-map
is still taking 40 minutes.ng build --prod --source-map --build-optimizer false
takes 8 minutes.Just installed 1.7.0-beta.3 and my build times are so much better! These improvements were super valuable to me! Thanks so much!
I encountered this issue. I needed to use
--build-optimizer=false
option to have a build time acceptable.It’s very strange for me - i have had 11 minute builds for the last month… but 2 days ago i had some 40 second builds, and now back to 11 minute builds. I didn’t change many things - so no idea how i got he 40 second builds…
Here’s my latest numbers using the 6.1.5.
node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --source-map
Time: 3,117,385ms (52min)
ng build --prod --source-map
Time: 8,416,746ms (140min)
Hopefully the switch from uglify will really help this.
This thread is just huge and I’m still subscribed to it just to know where are some weird culprits that blow things out of proportion without a discernible reason. Sorry for trying to invoke you @filipesilva but maybe the last comment from @jpsk can be one of the biggest culprits for the existence of this issue?
I have also seen a huge increase since migrating to NG6:-
when running
That’s 10min to compile less than 60 typescript files.
I also get the following warnings when building a projects now:-
System info:-
cd src/ && find -type f | sed -e ‘s/.*.//’ | sort | uniq -c
I tested using --sourcemaps but get the following error:-
and --build-optimizer=false results are no different.
@dharmendrap7 Glad to hear it. I’ve since started using
ng build --prod -sm --build-optimizer false --aot false
It’s even much faster to build and oddly it results in smaller bundle/chunk files. Might be a tad slower to bootstrap though - but not noticeably.
Just found that Firefox is really slow bootstrapping non-AOT compiled code.
Did anyone tried with latest RC? Any performance increase?
I removed all styleUrls from my components as a test, and build prod finally ran, but it took about 3 minutes to finish. I added the styleUrls back, and now build prod runs fine again! and in about 10 seconds.
This is really strange
Just did an upgrade to 1.7.3, and definitely seeing sourcemaps dragging down the build speed. Without sourcemaps, running a prod-build optimizer build takes about 74823ms. Enabling source maps on the exact same build kicks it up to 363124ms, about 5 times longer. Reasonably small project (about 129 source files, using Angular Material, rxjs, flex-layout, date-fns as the main library dependencies).
Wish there was a way to speed up sourcemaps without quintupling the build time.
Glad to hear it’s sorted 👍
@Toub @remisture @PascalTemel reasons for theses improvments are because build currently ignore fonts this decrease build time dramatically, when this enabled again it will still be slow and block at 92% … (joke)
I don’t know how you guys have theses improvments, seems not applied to me, ps: TBH i don’t care a little bit about build time, important to me is serve with aot in big project (>1k files), that is also improved to you ? first build
ng s --aot
: 90959ms rebuildng s --aot
: 27115ms rerebuildng s --aot
: 23896ms rererebuildng s --aot
: 0% blocking crashedThat’s definitely a long time. Does it get smaller if you pass
--build-optimizer=false
?nope, aot is about pre-compiling your templates and boosting up app/modules startup by removing runtime compiler and runtime compilation phase
Our build with these parameters (ng build --prod --aot=false --optimization=true --sourceMap=false --buildOptimizer=false) creates 71 bundles in just over 2 minutes with a total size of 11MB for all bundles.
Now we turn the --aot flag to true and what happens?? The build takes about 43 minutes, comes up with 84 bundles and has a total size of 22MB??? Isn’t AOT supposed to minimize the size by excluding what is not being used? But instead it takes 41 minutes to create twice as many code? What’s going on here?
Saved my day @kellycrowther . Thanks, m8. I confirm that on os x with nodejs v10.11.0 I can see a significant improvement
Just wanted to add that for my company’s case, it was because our CI/CD server only had 2GB of RAM. With only 2GB, the build never finished. When we asked the CI/CD service provider to bump the RAM up to 3GB to 4GB, our build finished in roughly 3 minutes.
So if you are seeing this issue on your build server, but not on your laptop, first check how much RAM you have on the build server.
Here’s a data point for @Brandon-Born’s suggestion. It decreased my project’s prod build time from 50+ minutes to around 13 mins. 👍
Recent updates greatly improved the situation here. Note that the build takes quite some RAM, ~2Go here.
I don’t know whats wrong with your build, but for reference here is my config:
angular.json config
Build output
Versions
@maxime1992 i bet its your its node v8 memory limit who sh*ts it and not your machine memory limit its a known problem with v8 actualy… its can be a real bitch when dealing large/long strings without chunking (node has a fixed string length limit afaik)
in my own opinion v8 can be a real pain handling FILES and parsing them … cause of those limits. some refs https://futurestud.io/tutorials/node-js-increase-the-memory-limit-for-your-process https://bugs.chromium.org/p/v8/issues/detail?id=847
I cant believe this is single threaded…
I ran into this with production builds (with source maps) hanging at 95% after upgrading to angular-cli 1.7.4 on Windows. Setting --sourcemaps=false, resolved the build issue for me.
I think that a lot of performance problems will be solved once we can upgrade Webpack to 4.
I saw some quite impressive benchmarks (execution times reduced by 60% to 90%). Unfortunately, this requires some work on many plugins. Nothing major, but there is a lot of small moving parts to be checked and minor fixes for Webpack breaking changes.
@todthomson could you take a CPU profile perhaps? I have some instructions in https://github.com/angular/angular-cli/issues/8259 that you could use.
@todthomson is this app something we could look at? Small apps exhibiting this sort of behaviour point towards some hard to find performance bugs.
I can confirm that now we build with optimizations in almost the same time as before (1.6.x), but with
--build-optimizer=false
.Please, keep an eye on this subject, because build times are now acceptable, but “fast” is quite another thing.
Anyway, your work is so invaluable that no “thanks” is enough! And really, really appreciated. IMO, we just need to be more stable, predictable, fast (at both build and runtime) and slim. New features can come later.
Our large project is now ~2.35x Faster at building for aot/prod - THANK YOU
Here’s our measurements for
Angular-CLI 1.6.4
(11.4min / 53MB) vs1.7.1
(4.8min / 53MB):@remisture This has already been fixed but you’ll need to wait for a new release
Awesome, 1.6.6=>1.7.0-rc.0 reduces my production build time from 18mn to 3mn!
Edit: here is the command I use to build:
Can confirm migrating angular-cli from 1.6.6 to 1.7.0-rc.0 resulted in a prod build reduction from 25 minutes to 3 minutes.
Here is analysis of our app. The build is of course single threaded so my macbook’s dual core processor is only half utilized. The system was mostly idle otherwise. I am running a second datapoint because this morning my first attempt at the 1.6 build was taking much longer than 18 minutes under similar conditions. But long story short, a much longer build for a 2% reduction in code size.
====
After (cli 1.6 with default optimizations and AOT):
Date: 2018-01-19T15:38:57.874Z Hash: f0ff32f352d583d9a60e Time: 1064637ms (18 mins) chunk {scripts} scripts.a09df21daa6632eb9407.bundle.js (scripts) 33.3 kB [initial] [rendered] chunk {0} 0.d021fc4a7108538dfdf5.chunk.js () 89.3 kB [rendered] chunk {1} main.b3bf84b1941b7f2c01c2.bundle.js (main) 4.42 MB [initial] [rendered] chunk {2} polyfills.50f916ca991d321c737c.bundle.js (polyfills) 624 kB [initial] [rendered] chunk {3} styles.ed292a274fc61d960e6a.bundle.css (styles) 422 kB [initial] [rendered] chunk {4} inline.c14b5104142c89623613.bundle.js (inline) 1.47 kB [entry] [rendered]
vendor + main = 4.42MB
Before (cli 1.4 with default optimizations and AOT)
Date: 2018-01-19T15:02:38.152Z Hash: 1be9e9d293dabdb3ca0d Time: 285541ms (5 mins) chunk {scripts} scripts.a09df21daa6632eb9407.bundle.js (scripts) 33.3 kB [initial] [rendered] chunk {0} 0.d021fc4a7108538dfdf5.chunk.js () 89.3 kB [rendered] chunk {1} polyfills.5b6fa84cc1992d5fb122.bundle.js (polyfills) 624 kB [initial] [rendered] chunk {2} main.9f0ad465d9688fbae36f.bundle.js (main) 1.59 MB [initial] [rendered] chunk {3} styles.ed292a274fc61d960e6a.bundle.css (styles) 422 kB [initial] [rendered] chunk {4} vendor.0d5ee7b13af3505dfd6a.bundle.js (vendor) 2.94 MB [initial] [rendered] chunk {5} inline.7abf96772a9fd0fe6c28.bundle.js (inline) 1.47 kB [entry] [rendered]
vendor + main = 4.53MB
Difference in time is +13 minutes Difference in size is -110KB
Thanks @filipesilva is there any analysis of the build speed or is build speed basically ignored because it’s considered a one-time payment for a long-time benefit?
How big are your projects btw? If you are on Linux/OSX/Git bash you can use this command to see your number of files by extension
cd src/ && find -type f | sed -e 's/.*\.//' | sort | uniq -c
.We have a test project with a lot of TS files (https://github.com/filipesilva/angular-cli-test-repo) and it creates prod builds in 39m.
These are the files it has by extension:
The times you all are reporting are more than that… Do any of you have a project that I can take a look at and profile?
I have the same issue. Angular 5.1.0 and CLI 1.6 On Angular 4.4, it used to be around 40 seconds. Right now, it took more than 110 seconds. Usually, it’s around 300+ seconds.
FYI, it speeds up considerably when I leave off the --sourcemaps option. Off course, that’s a must have so it still needs a fix…