CODEWITHSUNDEEP
performanceangularinitializationtypescript2.0
Eduardo Tolino
Eduardo Tolino

Reputation: 305

Angular 2 is slow to initialize

can anybody help me?

My Angular 2 application is taking a long time to initialize.

There are only 16 requests. And despite the relatively high size of 3 mb, the problem is not to bring the files.

I'm referring to the time after getting all files.

On my notebook are 3 to 4 seconds, which I believe is a high time since I have only 10 components, 1 pipe, and 6 directives for now.

The idea is that the application has close to 200 components. Then I will create lazy loading.

But for 10 components I think it should be faster. On the cell phone the standby time reaches 10, 12 seconds. On the iPad the wait is relatively large as well. Above 15 seconds.

I am using webpack, minifying css and js. Even using pre-render on the server (asp.net core).

This delay occurs after all files are downloaded. That is, it is an angular 2 processing time to render the screen.

What else could I do? What could I have done wrong?

The test link: http://projetos.codegenerator.com.br/angular2/

Thanks.

Upvotes: 1

Views: 2096

Answers (3)

MiraGe
MiraGe

Reputation: 312

I think you are not using any bundle tools like webpack, systemjs..

When you deploy your ng2-app, you should use AOT(ahead of time) compile. I guess you are using JIT(just in time) compile.

In angular2 guide page,

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.

When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.

I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.

If you are curious about ng2 AOT compile, read this guide.

angualar2-cookbook-AOT

And here is example angular2 app with webpack2 and lazy load.

use file structure and config files in here.

When I tested with example app, files bundled with aot was smaller than 500KB.

angular2-webpack2-aot

Upvotes: 3

Eduardo Tolino
Eduardo Tolino

Reputation: 305

I finally got the performance I wanted in the application. It took a bit of work but really worth it.

Configure your application to compile in AOT, really the performance gain is worth it.

Upvotes: 1

Ignatius Andrew
Ignatius Andrew

Reputation: 8258

Angular 2 is well tested for its performance, If there is anything lagging its on the application and its dependencies..

Check your environment, If there are only few component then there is nothing wrong on the framework side.

Webpack or any other build tools has nothing to do with the performance , coz they are development dependencies,

If you are using cdn's for some third party services or libraries, check whether their services are on time.

Upvotes: 1

Related Questions