Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reduce the file size of production code Angular 2.0

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

enter image description here

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

enter image description here

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"
  }
}
like image 320
Demona Avatar asked Oct 06 '16 21:10

Demona


People also ask

How to reduce ng build size?

Use latest angular cli version and use command ng build --prod --build-optimizer It will definitely reduce the build size for prod env.

How to reduce the size of your angular app?

ng build --prod is what most people do when it comes to down sizing their apps. However, there is also another size control feature that’s not commonly talked about in beginner’s circle of Angular and it’s called budgets. This allows you to set thresholds that will alert you if your app grows physically too big.

How do I limit the size of angular build files?

Go to your angular.json file and scroll down the production section of configurations There is already a default of maximum warning set at 2MB and for the build process to error out and refuse to produce a build at 5MB. 3.

How to analyze angular bundle size?

You can analyze your Angular bundle by running the following command: webpack-bundle-analyzer <path-to-stats.json> This kicked off a simple server containing the analysis that you need. After navigating to localhost:8888, you can see the different libraries in your app relative to their size. Wow!

What is budgeting in angular?

Angular’s budgets mechanism will give you warnings or errors once your application reaches a certain size during the build process. The overall size of your application matters because your users are paying for a large application with time (and potentially, limited mobile data).


1 Answers

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.

like image 149
Meligy Avatar answered Sep 29 '22 20:09

Meligy