javascript - How to decrease size of vendor.js in angular 2,4,6,7,8,9,10,11,12,13,14,15,16? - Stack Overflow

admin管理员组

文章数量:1434380

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?

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?

• javascript
• angular
• angular-cli
• angular-cli-v6

Share Improve this question Follow edited Feb 1, 2023 at 12:26 Mohamad Shiralizadeh asked Jul 10, 2018 at 5:38 Mohamad ShiralizadehMohamad Shiralizadeh 8,76588 gold badges6363 silver badges9595 bronze badges 0

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 42

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

Try

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

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

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

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.

At the angular.json configuration file you need to change the values:

 "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "aot": true,
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true

In case you are using C# as backend with the default template, make sure to actually use the production configuration from your angular.json:

...
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" />
...

Since I switched to a newer angular version, --prod was no longer supported and I incorrectly assumed that ng build would default to production... Furthermore I had to adapt the production configuration as described by @edyrkaj

You could change the package.json as well by adding all those options to the build command, but I prefer the angular.json approach since it's a lot nicer to read and maintain in my opinion

本文标签： javascriptHow to decrease size of vendorjs in angular 24678