How to decrease size of vendor.js in angular 2,4,6,7,8,9,10?
Solution 1
This file includes all libraries that you added into your project. If you build your app on production mode the file size will be smaller.
ng build --prod
Solution 2
Try
ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer
I reduced my vender.**.js fromm 12mb to 2mb
Solution 3
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
Solution 4
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.
Mohamad Shiralizadeh
I'm a developer whose work is focused on frontend technologies (ex. JavaScript & React ❤️). My passion for web development can be traced back to my experiences over the past years, I like to get people excited about things that I’ve been excited about. Right now, that’s UCraft Company 😊. Outside of the office, I’m committed to a family 👨👩👧👦 to keep them happy. Also, teaching, helping people in communities, recording video podcasts, and playing video games.
Updated on December 21, 2021Comments
-
Mohamad Shiralizadeh over 2 years
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?
-
Anandan K over 5 yearsAfter using Prod also my project size is 8Mb which getting more time to load. May i know what to do ??
-
molikh over 5 yearsyou mean files inside dist folder? you can check in that folder which file cause this.
-
Karthikeyan almost 5 yearsI didn't give any difference in our build
-
eddy almost 4 yearsIn Angular 9 , I can't find the vendor-chunk anywhere after running ng build --prod
-
DV Singh almost 4 yearscheck here: stackoverflow.com/questions/52179853/…
-
Azoulay Jason over 3 yearsNo difference for me and vendor remains
-
Azoulay Jason over 3 yearsDidn't change antyhing for me
-
Nanotron over 2 years@Karthikeyan then check the version doc. Its automatically done in more recent versions of angular
-
Sharon Watinsan over 2 yearsNice. 8mb to 880Kbs