Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng build --prod is not generating vendor.bundle.js

I am using node version 8.9.4, npm version 5.6.0 I have no clue why this is happening the ng build --dev is generating vendor.bundle.js while ng build --prod is not generating vendor.bundle.js here is the screenshot

output with ng build--prod [enter image description here
[output with ng-build --dev] enter image description here

Here is my package.json

`{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.0.28",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

`

like image 605
Vikas Avatar asked Jan 21 '18 16:01

Vikas


People also ask

How ng build -- prod works?

The ng build command is intentionally for building the apps and deploying the build artifacts. The command does not generate an output folder. The output folder is – dist/. The ng serve builds artifacts from memory instead for a faster development experience.

Does ng build default to production?

Production is the new default When you create a new Angular project, the commands ng build and ng serve use the production build by default.

Why is my vendor js file so big?

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. After using Prod also my project size is 8Mb which getting more time to load.


2 Answers

For prod builds the vendor bundle is integrated in your main bundle, because it is using the build optimizer per default.

According to the angular-cli documentation:

Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk because having vendor code in the same chunk as app code makes it possible for Uglify to remove more unused code.

like image 74
Benjamin Schäublin Avatar answered Sep 16 '22 19:09

Benjamin Schäublin


ng build by default don't generate vendor-chunk but instead it is combined in one main-chunk for performance and optimization purposes, you will need to add a parameter to the build command like so in order to have your vendor-chunk separated:
ng build --prod --vendor-chunk=true

see details here:

https://github.com/angular/angular-cli/wiki/build#--build-optimizer-and---vendor-chunk

like image 21
Nadhir Falta Avatar answered Sep 19 '22 19:09

Nadhir Falta