Solvedangular cli vendor.bundle.js size is around 10 MB

ng -v 1.5.4
node -v 6.11.2
npm -v 3.10.10

Observed behavior

We have an application with more than 7 modules. When we build this application we are getting vendor.bundle.js file of size 9.95 MB. This will have an impact on performance. Can someone explain the reason fro this and how to reduce the size of build files.

Desired behavior

Expecting lesser size for bundle files

What command did you run to get these results?

ng build by itself does not have any optimizations. If you ng build --help you can see all the flags you can pass to further optimize your code and reduce the output sizes.

Try ng build -prod -aot -vc -cc -dop --buildOptimizer and see what your numbers are. This will enable production mode, use AOT, use a vendor chunk for third party libs, pull all common code out into a common chunk, make sure the output path is clean and lastly use the @angular-devkit/build-optimizer for further optimizations.

If that is still large, then do a run through in your application for third-party libraries that you are using. (1) Are you importing the entire RxJS library? (2) Moment with all localizations? etc..

It works for me

ng build

chunk {main} main.js, main.js.map (main) 1.27 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 112 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.86 MB [initial] [rendered]

ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} vendor.0dd2d446a7f360931d24.js (vendor) 1.63 MB [initial] [rendered]
chunk {2} styles.3555f6524ad335298167.css (styles) 76.5 kB [initial] [rendered]
chunk {3} polyfills.92108b287fe28032870b.js (polyfills) 59.6 kB [initial] [rendered]
chunk {4} main.79956f276ea8bf875884.js (main) 1.88 MB [initial] [rendered]

And without .js.map

With the latest CLI, --prod includes the aforementioned options with the exception of the vendor chunk option. With AOT and the build optimizer enabled, not using a vendor chunk is typically more beneficial as it allows additional optimizations and a resulting further size reduction.