CODEWITHSUNDEEP
angular
Ram Krishna
Ram Krishna

Reputation: 130

In angularJS 2, how to optimize .js library loading to make application startup fast?

I am developing 2 applications using AngularJS 2. I chose angular2 because it is fast and has many other advantages over angular1. But I am facing issues with initial loading speed of the application. It loads very huge collection of javascript files mostly related with RxJs. Is there any way to optimize it?

Upvotes: 2

Views: 1588

Answers (1)

Olaf Horstmann
Olaf Horstmann

Reputation: 16882

During development this is very common, since you already noticed, there are a lot of files to be loaded, which takes up most of loading-time. For a distributed version of your app to load faster there are two options for you to get there:

Option1: Using a bundler

If you bundle your files correctly you should usually end up with either one or two js-files, that are usually very fast in their execution. One file that contains all the external libraries, like angular2, RxJs, lodash, ect.. and one file that contains your app (or you may sqash everything in one file). Bundlers like webpack or SystemJS also usually only package those parts of a library that your application needs. So with RxJs for example, most parts can be probably ignored and my guess is that your application only requires about 4-5 components of all the available RxJs-components.

To get started on bundling your app you may want to take a look at one of these bundlers:

Each bundler has its' pros and cons and it mostly depends on the needs of your application and what you can work best with.

Personally I am pretty happy with webpack and it covers most cases and is fairly easy to get the basic configuration up and running.

Option2: Using a seed-project or generator

If you don't want to setup your own bundler, you can always take a seed-boilerplate that comes with a configured bundler already to start your project from. To name a few:

This option is basically leveraging Option1, but without you having to do the bundler-setup/configuration. This can be very helpful if you are new to the matter and already struggeling with getting around all the new angular2- and rxjs-concepts. However to really learn how things work from start to finish annd to appreaciate all these great tools, I recommend you do the configuration of a bundler at least once.

Addition: AOT(Ahead of Time) Compiling

If you have already bundled all your sources into a single package, and still experience an initial delay untill the application shows up, you can integrate AOT-Compiling into your build-cycle (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)

Here is a list of benefits (take from the Angular2 Cookbook linked above)

Faster rendering

With AoT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

Fewer asynchronous requests

The compiler inlines external html templates and css style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AoT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AoT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Addition #2: Serverside Rendering for Angular2 - "Universal"

As an additional option you can implement a server to pre-render your angular2-application on the server, so the content shows up immediately. For more information, have a look at: https://universal.angular.io/

Here is a skeleton-project, that implements both (optionally) AOT-Compiling, as well as Universal (server-side rendering): https://github.com/qdouble/angular-webpack2-starter/

Upvotes: 6

Related Questions