Question

62

How can I improve load performance of Angular2 apps?

rated 0 times [ 66] [ 4] / answers: 1 / hits: 46944 / 8 Years ago, wed, november 30, 2016, 12:00:00

Angular2 app is loading slow, how can I improve the performance on load?

I use Angular2, typescript with html5.

currently my app takes 4 seconds to load.
I host with Firebase and use cloudflare.

Things I'm doing / info:

I've compressed images.

I minify css

I minify js.

I use async on my scripts.

My scripts are in my .

The scripts are around 700kb

I used google speed test and get 65%

I used minified version of the libs I use e.g. bootstrap etc.

Using systemjs.

This is the seed app im using: https://github.com/mgechev/angular-seed

Flow:

When the app loads it shows a blue screen (this is the bootstrap css) and then 4 seconds later the app loads and works really fast. But takes 4 seconds to load. It seems the app.js file that systemjs minifies to is slowing the whole app, and not showing the views fast enough.

This is my website speed test:
https://www.webpagetest.org/result/161206_F5_N87/

This is my website:

https://thepoolcover.co.uk/

Let me know if you need more information about my app and any other things I can do.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

valentinam

Add To Favorites

Follow

Total Points: 166

Total Questions: 117

Total Answers: 81

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

answered 8 Years ago jameson · Accepted Answer

How about code splitting.

From the Webpack site:

For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.

Link here:

https://webpack.github.io/docs/code-splitting.html

Note that the Angular CLI uses Webpack.

Also, make sure that if your app bootstraps with data calls, that you are not holding up the rendering of your components waiting on those calls to return. Promises, async, etc.