28

My Angular project is @Angular4.3.3

ng build -prod

Takes 77 seconds to make a build

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

Takes 190 seconds to make a build, No vendor chunk, less in size(but not a big difference in size though)

Chunk differences on console image: Difference between those two builds

I read Bundling & Tree-Shaking but still don't get the clear difference between builds created by those commands.

Why there are these two different ways and what is the difference in performance or any other way?

BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
Lahar Shah
  • 7,032
  • 4
  • 31
  • 39

2 Answers2

11
--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.

Community
  • 1
  • 1
superandrew
  • 1,741
  • 19
  • 35
6

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!
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • In my case, the total bundle size (i.e. main, vendor, polyfills plus my own module) is pretty much the same whether I use `vendor-chunk` or not. However, I update my app almost daily, and my site has many returning visitors. Doesn't it make sense for me to use `vendor-chunk`? This way the vendor file will still be the same after an app update, and they won't have to download it again. They will only download again the `main` file which is now smaller. Am I missing anything? – Salvatore Iovene Dec 16 '21 at 10:02