Parallelize ES5 & ES2015 builds

[smnbbrv]

🚀 Feature request

Having a possibility to serve ES2015 is awesome! But, the build time was increased nearly twice because now instead of one build we have two.

Please provide ways to deal with this.

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

The build time has significantly increased because ES5 and ES2015 builds are sequential.

Is there some reasoning behind this? Would it be faster to run them in parallel (at least with some explicit settings)?

Describe the solution you'd like

1. Parallelize those builds by default (or with special CLI flag probably)
2. Add a special CLI flag / configuration in angular.json that allows to build es5 and es2015 separately on different runners. This would be cool for CI because the builds could run on different physical devices (at least for CI tools where the dist folder gets mounted, e.g. Drone CI). This could cause problems with sharing the same dist directory (that is cleared before build), so this needs to be somehow resolved. However, if the option 1 is in place, I guess, this could be omitted

Describe alternatives you've considered

Disabling es2015 build :(

[alan-agius4]

Hi, can you kindly give some stats, such as the previous and current builds times thanks.

[smnbbrv]

Sure. Should have added this in the first post.

These are the timings before upgrade (time npm run build, where build = ng build --prod):

And this is after:

At the end of the day: 70.55s -> 135.15s

[filipesilva]

There are some concerns about progress reporting but they are minor.

As far as the individual build steps go, they are mostly parallelizable. Almost all compilation steps inside webpack run in the single thread.

There are three very expensive steps that only happen in prod builds: build-optimizer, module concatenation, and minification. Of these, only minification uses parallel processing.

But parallelizing things that themselves try to parallelize does not compose well. At some point the minification steps of both builds would look at the total available CPUs and say "right, so let's use them all". The best case scenario there is that both just bottleneck and get slower.

That'd be the end of it if CPU was the only relevant shared resource. But there is another one: memory. And that one is less easy to manage. Memory management is Node is mostly static, you define a maximum and there it goes. In Node 12 it figures out the maximum at the start, but that's still static from there on.

The really bad case is that at some point there are 2 minification processes that are processing a really big chunk (like main) and one/both will hit the memory and crash. To prevent that we'd have to ensure no two builds try to minify at the same time, or that minification doesn't use parallelism.

But I'm not sure that'd be such a great win insofar as build time. I can't imagine it would reduce it to half. Parallelization rarely does.

As an aside, we should figure out why the build time in webpack isn't the full time. It really should be in your first screenshot.

[alialtun14]

I upgraded my project to Angular 8 version. While upgrading process, I haven't met any error. But the compile time increased 3 times without any error.

Compile Before Angular 8: 1382.536ms -> main.cf29a89468d732f3f363.js (main) 12.4 MB
Compile After Angular 8: 3147.254ms -> main.da4147c72278bc767ee4.js (main) 12.3 MB

To minimize to compile time, is it possible to disabled compilation process for old browser. If It is, how can I disabled?

[filipesilva]

@alialtun14 you can read about how to configure it in https://angular.io/guide/deployment#configuring-differential-loading. You can just have the ES5 or ES2015 builds, or both.

[sod]

if the cli allows to select the target from the commandline via flag (e.g. something like ng build --prod --target=es5, you could parallelize it via:

ng build --prod --target=es5 & ng build --prod --target=es2015

or with something like https://yarnpkg.com/en/package/concurrently, so the stdout is a bit more organized.

Our you wait for bazel build, I'm pretty sure that thing will gladly exhaust all your cpu core available.

[clydin]

@sod That wouldn't provide a functioning index.html file.

[alialtun14]

@sod I have tried to use ng build --prod --target=es2015
I have met a error like this. Unknown option: '--target'

[sdon2]

@alialtun14 Change target configuration in tsconfig.json located @ root folder of your project. You'll get Single / Differential Loading builds according to your tsconfig.json configuration.