How to decrease size of vendor.js in angular 2,4,6,7,8,9,10?

Question

Angular CLI creates vendor.js and I don't know Why and What is the use of it?? Size of this file is about 3.2MB for a new app!!

Does this file contains Angular 6 Javascript Source?

Don't you think this is big file for loading on internet on low speed connections?

score 29 · Accepted Answer · answered Jul 10 '18 at 05:45

29

You mean how to decrease? This file includes all libraries that you added into your project. If you build your app on production mode it'll be much lower.

ng build --prod

If it's not your answer, explain more what you are looking for.

answered Jul 10 '18 at 05:45

molikh

1,065
10
24

After using Prod also my project size is 8Mb which getting more time to load. May i know what to do ?? – Anandan K Dec 20 '18 at 10:30
you mean files inside dist folder? you can check in that folder which file cause this. – molikh Dec 20 '18 at 12:17

score 21 · Answer 2 · answered Dec 06 '19 at 08:19

21

Try

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

I reduced my vender.**.js fromm 12mb to 2mb

answered Dec 06 '19 at 08:19

DV Singh

681
5
13

In Angular 9 , I can't find the vendor-chunk anywhere after running ng build --prod – eddy May 12 '20 at 22:12
check here: https://stackoverflow.com/questions/52179853/angular-should-i-use-the-vendorchunk-in-production – DV Singh May 24 '20 at 04:03
1

Didn't change antyhing for me – Azoulay Jason Aug 25 '20 at 09:54

Nanotron · Answer 3 · 2019-03-13T12:51:36.753

8

Instead of decreasing it you can remove the file completely By specifying the --build-optimizer flag, the cli will disable this file from the build output.

The CLI will now bundle the vendor code into the main.js bundle, which will also enable uglification to reduce the size.

So you will see a small increase in the size of the main.js bundle which is minimal in comparison to the size of the vendor chunks

edited Mar 13 '19 at 12:51

answered Mar 13 '19 at 12:44

Nanotron

444
4
11

4

I didn't give any difference in our build – Karthikeyan May 16 '19 at 09:34
No difference for me and vendor remains – Azoulay Jason Aug 25 '20 at 09:45

score 5 · Answer 4 · answered Mar 27 '19 at 19:13

You may also want to update your build script in package.json to generate a prod build by default. I ran into this deploying to Heroku, since it runs 'npm build' automatically. By default, 'npm build' runs the following script:

ng build

If you update it to

ng build --prod

in package.json, then Heroku/AWS/Azure will create a production build on deployment instead.

How to decrease size of vendor.js in angular 2,4,6,7,8,9,10?

4 Answers4