vendor.bundle.js goes heavy in angular 2/4

Question

I developed a project on angular 5.2.6., but problem is that when I load the application, it takes almost 20-30 seconds.

When I check in the network tab in the browser, I saw that vendor file is taking time because of is size(11.6 Mb).

I want to know that is there any way to minimize that vendor file and what kind of code are packed inside vendor file. I got this link but not get the solution.

How can I minimize that vendor file to load my application faster?

Possible duplicate of [Angular2 CLI huge vendor bundle: how to improve size for prod?](https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod) — David, Apr 02 '18 at 13:13

Aakash Uniyal · Answer 1 · 2018-04-02T12:11:25.367

1

In Addition to @Brk's answer, there are multiple things you can do ontop of that to minimise the load time of your vendor.bundle.js or other files :

Minification using UglifyJs : It removes all the white spaces and comments. Estimated size reduction is 40-50%.
Configuring your Server to send your JS/Html or any files by automatically compressing them in gzip format. Browser automatically unpacks it and uses your Js files as intended.

If you do these 2 your load time would decrease by 80%.

I did the same , my vendor.bundle.js went from 8 MB to 600 KB.

UGLIFYJS :

uglifyjs dist/vendor.bundle.js --screw-ie8 --compress --mangle --output dist/vendor.bundle.js

Note : You can download uglifyjs using npm

edited Apr 02 '18 at 12:11

answered Apr 02 '18 at 11:07

Aakash Uniyal

1,519
4
17
32

Thank you @Aakash Uniyal but please also tell me that how to configure UglifyJs in angular2/4 – Irshad Apr 02 '18 at 12:00
so i just need to install that uglifyjs using npm or any thing more @Aakash Uniyal – Irshad Apr 03 '18 at 05:56
You probably won't need anything else – Aakash Uniyal Apr 03 '18 at 06:47
thank you @ Aakash Uniyal i am trying. i will let you know the response shortly – Irshad Apr 03 '18 at 07:03
@ Aakash Uniyali i have done it. but it is not doing any thing. – Irshad Apr 03 '18 at 07:38
vendor.bundle.js file size got decreased ? – Aakash Uniyal Apr 03 '18 at 08:07
no @ Aakash Uniyal it is still in his same size(11.6). i think i have to do some imports after running npm command – Irshad Apr 03 '18 at 08:11
are you running the given command from the root of your angular app ? – Aakash Uniyal Apr 03 '18 at 08:19
yes after login from the root i go to my project directory and then i run npm install uglify-js command – Irshad Apr 03 '18 at 08:24
This command : uglifyjs dist/vendor.bundle.js --screw-ie8 --compress --mangle --output dist/vendor.bundle.js – Aakash Uniyal Apr 03 '18 at 08:31
now it is giving error `ERROR: ENOENT: no such file or directory, open 'dist/vendor.bundle.js' ` – Irshad Apr 03 '18 at 10:02
and when i remove dist folder form command then yet it gives error `ERROR: ENOENT: no such file or directory, open 'dist/vendor.bundle.js' ` – Irshad Apr 03 '18 at 10:06
actually i already run command to run my application for forever. then i am running command for uglifyjs. – Irshad Apr 03 '18 at 10:26
please help me next what should i do. – Irshad Apr 03 '18 at 12:54
1

when i run `ng build -prod -aot -vc -cc -dop --buildOptimizer` then it shows size of vendor.bundle.js is 472 kb but when i run in browser it again show it 11.6 mb – Irshad Apr 03 '18 at 13:23

vendor.bundle.js goes heavy in angular 2/4

1 Answers1