ng build -prod vs ng build --prod --build-optimizer=true

Question

My Angular project is @Angular4.3.3

ng build -prod

Takes 77 seconds to make a build

ng build --prod --bu

Answer 1

First of all why is vendor chunk useful in the first place?

vendor.js is most useful during development because you're updating your code far more frequently than you're downloading a new framework or updating npm packages.

Therefore compile time is faster during development with vendor chunk enabled.

As for why is --vendor-chunk even an option? This is off the top of my head but:

• If your app has a lot of users on a slow connection and you frequently update it then it may be advantageous to have a larger vendor chunk that remains unchanged for longer. When updating your app then the chunks will be smaller. This will not give you fully optimized (tree shaken) app, but in very specific circumstances it could be useful. [This assumes you're using fingerprinting where the filename is literally a checksum/hash of the contents of the file - so if it doesn't change then the file can be cached.]
• Very occasionally there can be subtle bugs in your code that only become apparent when minimizing code in a certain way. This may be due to relying on a method/class name that gets 'optimized out'. So you may have to enable vendor chunk in production if you have such a bug (while you fix it).
• Enable vendor chunk deliberately to make your app slower to load - then tell your boss you're working late to optimize it - and disable it ;-)
• Why not? People like to play!

Answer 2

--build-optimizer and --vendor-chunk

From Angular CLI Docs:

When using Build Optimizer the vendor chunk will be disabled by default. You can override this with --vendor-chunk=true.

Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk because having vendor code in the same chunk as app code makes it possible for Uglify to remove more unused code.