Ionic loading all states upfront via XHR?


#1

I have a fairly complex Ionic project that is running into some performance issues, specifically on mobile. In trying to diagnose and resolve the issues, I noticed in Chrome Dev Tools that every single UI Router state’s template (and some of the directive templates in those templates as well) is getting loaded on app startup via XHR - literally dozens of calls all at once. See attached image for an example.

Image 1 - http://i.imgur.com/Ao0pdnI.png

My questions:

  1. Is this expected behavior? Even with a starter tabs app, I am seeing that all the tab content gets loaded by XHR (see screengrab #2). Based on the console, it looks like these calls are originating from inside ionic.bundle.js.

Image 2 - http://i.imgur.com/3oGxg8v.png

  1. Can we disable this, with the templates only loading the first time they are triggered?

This is somewhat urgent, so any help is greatly appreciated!


#2

By default, Ionic will cache a maximum of 10 views, and not only can this be configured, but apps can also explicitly state which views should and should not be cached.

Of course, this is something that you can disable globally:

$ionicConfigProvider.views.maxCache(0);
$ionicConfigProvider.templates.maxPrefetch(0);

or per specific view:

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

My advice, instead of going against the ways how Ionic works take a look at these tried and tested methods.

I. Use splash screen to counter initial app loading time

Cordova solution: http://ionicframework.com/docs/cli/icon-splashscreen.html
Pure JS solution: http://www.gajotres.net/using-views-events-to-create-javascript-pure-ionic-splash-screen/

II. Cache every view/template crucial to your app performance. This solution will prevent constant load/reload of templates. Disable caching of everything else.

http://ionicframework.com/docs/api/directive/ionNavView/

III. Prefetch most important templates or all of them depending on your app needs. This way you can preload everything you need for a stable app performance.


#3

You can disable/limit template using $ionicConfigProvider.
Use $ionicConfigProvider.templates.maxPrefetch(0);


#4

Thanks for the response - unfortunately, this is not stopping the behavior - after adding this config option, still seeing the many XHR calls. Other config options working as expected though. Very strange.