How to reduce the file size of production code Angular 2.0

Question

I'm using Angular-Cli with its default project.

I'm trying to get a production version of code, so I'm running --prod and at the output I see 911 KB, is it possible to optimize it further? And how can I tell angular to serve the gzip file?

ng serve --prod

FYI: I tried ng serve --prod --aot but the server is building again in a loop. However, when I tried ng build --prod --aot then I see the size is reduced but I cannot start the server.

ng build --prod --aot

Below is the code which I'm using in the Package.json file

{
  "name": "angular2-quickstart",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

Answer 1

First, since all web servers now gzip output, your actual size is not the .js file size, but the .gz file size. That's the sole reason this file was created as I understand, to show you the realistic gzipped size.

However, there's room for better sizes, 40%+ improvement. If you install and use Angular CLI beta 16 for example (current version at time of writing), it has AoT compiler out of the box.

Run it like that:

ng build -prod --aot

As of beta-16 there're some issues with watch / serve and AoT at the moment though, like this, so you might for now only use it for actual production generation not dev server.

Update:

Starting the next release after beta.26, --aot will be on by default when you use -prod.

It's currently merged into master.