Angular 2 app is very slow on android devices

Question

I have built an angular 2 app using the angular seed project. But the application is very slow on android devices. I am using lazy loading. For testing purpose I disabled all the pages and kept only the 404 page . But just the 404 page is also take 9 sec to see the page. Please can anyone help me optimize the loading time. I am attaching the screen shot below of the production build. In the network there are lot of breaks. I don't know why that is happening

Answer 1

I was analysis my angular project and I noticed that using require() makes the app slow on android devices . In order to make my app size small i have used used systemjs to load libraries later (example datepicker ,moment etc) in my components

var moment = require('moment-timezone');

declare var moment:any;
@Component({
    moduleId: module.id,
    selector: "timezone",
    templateUrl: "timeZone.component.html"
})

export class TimeZoneComponent implements OnInit {

But Loading the module containing this component is taking time .

Secondly lazy loading a module is also taking time to load the app. After the spinner stops loading there is a delay till the module is lazy loading.

 { path: 'home', loadChildren: './app/core/publicPage/publicPage.module#PublicPageModule' },

Making the above changes the app loads on android devices in 13 sec other than previous 22 sec .(Which is still not good enough but much better)

I don't know if this is an issue with systemjs on android devices. Has any one faced this simlar issue with system js ?

Answer 2

I finally removed system js and implemented webpack with aot. now my application is very fast on android. I guess system js is not production ready.