Angular 2 Packaging your application for Production Series 1

The main focus of this series of articles is how to improve performance, the things covered in this article include reducing download code size and number of requests and also some of the things that will improve the performance of our code in the browser.

Lets see some way to improve performace of Angular application

Lazy Loading:

The first thing in angular 2 applications we can create many modules, which can be lazy loaded at the time of usage. This decreases application loading time.

Minification:

Minification is often called as uglification, is the process of removing extraneous characters from your source code that only exists for readability.

Ex:

Before minification


export class orderService {

addOrder(order) {

…

}

findOrder(id) {

…

}

}

After Minification the white spaces are being removed


export class orderService {add

Order(order) { …}findOrder(id) {

… }}

This make the code difficult to read but that’s okay for execution, browser doesn’t need nicely formatted code to run it.

Bundling:

To create a bundle, you take your JavaScript from a bunch of separate files and combine them all in to one file. The benefit here is that your browser doesn’t have to make hundreds of requests. Instead, it just makes a single request for your JavaScript. This is usually a huge performance improvement for applications and often the biggest single improvement.

Code Splitting:

Code splitting is the mechanism which allows for lazy loading in the bundled environment it’s a variation of bundling. You still combine you JavaScript into bundles, but instead of one, you create multiple bundles. Imagine a huge application with 5000 java script files. That’s way too many requests, so bundling it up is a great idea. But the is that much java script can actually be so large that the download file could take a long time to transmit even on high bandwidth clients. And of course, high bandwidth is not something you want to count on. So code splitting is a process of producing smaller bundles. The number of bundles and sizes of each can vary greatly from systems to system and involves a lot of balancing over what to give the users immediately and what to delay the download of. In these cases, you still have a single entry bundle. This is the bundle that downloaded when a user hits your site. But as soon as a smaller bundle is downloaded the application can begin to work for the user. Then the other bundles are downloaded either just when they’re needed, which can still introduce a small delay when they hit that part of your application, or in the case of optimistic downloading, they can be downloaded when the entry point bundles finish. That why, there’s likely not any delay, the tradeoff being if the user never needs that part of the system, they still download it.

Tree shaking:

This is most recent addition to code optimization for production in the JavaScript world. The idea is to remove code that isn’t ever called in your system.

Imagine a system where you have a service called UserService with two methods – getUsers and gerUser


Service:

export class UserService{

getUsers(){..}

getUser(){..}

}

Calling code:

userService.getUsers()

now further imagine that in your system, this service is only used in one place and only the getUsers method is called, and the getUser is never called anywhere. You wrote it but you never used it. Well there’s no reason for that method to even exist on the class anymore. For all intents and purposes, you can remove it. But you think that sometime in the future, it may get used or perhaps at some library that is used by multiple application or in other application it’s used, so you can’t just delete the code. But when you deploy a production, it would be nice if that code didn’t make it into the bundle. That is tree shaking. Tree shaking can actually remove methods and properties that are never called.

With angular, you will have two options for how to handle module loading and bundling. These options are SystemJS or Webpack. The choice of which module loader to use will also dictate what you can do for minification, bundling, code splitting, and tree shaking. If you’re using SystemJS, then you will likely be using Rollup to handle bundling, minification, and tree shaking. Well SystemJS won’t support code splitting. Webpack supports it. Both has it benefits in production. Will see in detail about this in later Angular 2.0 production articles.

 

Linting with Tslint:

Linting is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding.

Installing tslint,

npm install tslint –g –save-dev

creating initial TSLint configuration file,

tslint –init

well, if you haven’t installed tslint globally you have to do,

node_modules/.bin/tslint –init

so, the above command will create a tslint.json file. From the tslint.json file remove jsRules section from it we don’t need that. And it can actually be a little confusing.

After that try to fix all errors shown in your files by tslint.

Tuning rxJS Request:

While working with angular 2 http methods we are requesting many libraries that we don’t need actually for particular requests. Let’s see

To tune those and only request required libraries. We have to change our imports in service components from

“import {Observable} from ‘rxjs/Rx’ ” to “import {Observable} form ‘rxjs/Observable’ ”.

The same way if you are importing subject “ import  { subject } from ‘rxJS/Subject’ ”.

So, we managed to limit the library request to only needed. But in our application we got some operator errors, let’s see those

 

To solve these we are going to create a new rxjs-extensions.ts file and I am going to import all the operator used or operator I am going to use in my project.

rxjs-extensions.ts

import ‘rxjs/add/observable/of’;

import ‘rxjs/add/observable/throw’;

import ‘rxjs/add/operator/catch’;

import ‘rxjs/add/operator/do;

import ‘rxjs/add/operator/map;

import ‘rxjs/add/operator/filter;

After creating this file import this file to your service component to resolve those operator errors.

 

Enabling Production Mode:

Add these lines of code to make your application run in production mode,

Balakrishna Pendyala

Author: Balakrishna Pendyala

Balakrishna is a Software Engineer working in Media Streaming Domain, and also worked on Banking and Health Care domains. His areas of interest include Object Oriented Design, SOLID Design principles, Restful Web Services and Open Source softwares including Spring, Spring Boot, and Hibernate.

If you found an error, highlight it and press Shift + Enter or click here to inform us.

Leave a Reply

Your email address will not be published. Required fields are marked *