Ionic application is taking time to load


#1

Hi,

We required your guidance for our one of requirement in ionic2.
We want to create an application with ionic2 which can run on Mobile (in iOS & Android as hybrid application) as well as on Desktop and Mobile  browsers.

We have created an sample application as mentioned on ionic2 tutorials.
After building the app, we found :
	App is taking time to load the first page, because an app is being bundled in a single .js file (app.bundle.js) with size of approx 2.8 MB (Because of Webpack functionality).
	After minification, its reduce down to approx. 1.2 MB.
	Right now this is just sample application with default menu option coming by default from github. 
	Our concern is after adding the project code, it will definitely would increase in size and hence  would take time to load the app.
	So we want to use Lazy loading concept of file loading. 
	We want to load the files which are related to current modules only instead of loading bundled .js file at time of launching the application so app can load faster.

	
Please provide help on below points :
1.	Can we use ionic2 for desktop browser along with mobile hybrid app (Use single code of hybrid mobile app for desktop browsers too) ?	
2. 	If answer is yes for point 1, then please suggest correct way of doing this.
3.	What we can do to reduce loading time of application ?
4.	How can we configure application to reduce down the size of app.bundle.js ?
5.	How can we use lazy loading (load related .js files on demand) ?

#2

Great questions @niketa - here are a few points that might help:

Ionic 2’s roadmap shows one of the upcoming betas (e.g. #10) having a split view capability so you can show desktop layouts that combine a couple views, probably similar to the way the iPad’s settings area.

One approach that we’re using for Ionic 2 web application is to publish it to an Amazon S3 web server, and use Amazon’s free SSL certificate service, and Cloudfront, to then serve up the Ionic web content over https, which provides the secure lock experience to end-users. The Ionic 2 web app, deployed on Amazon, then calls back to our backend server running on Node JS / Amazon Elastic Beanstalk / Docker.

Angular 2’s new universal feature may be useful to deliver a fast first screen experience and download the rest of the app in the background. I haven’t tried it with Ionic yet: https://github.com/angular/universal

One issue we’re running into is caching with Ionic 2 as a web application. This article https://yakovfain.com/2015/10/23/angular-typescript-systemjs-and-browser-cache/ had some good ideas and suggested the following meta data at top of index.html (for web deployment).

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0"> 

Hope that helps. We’re still figuring out the other parts and whether to move to WebPack or keep with Browserify.

Tom


#4

Hi everyone !! Please Try building your app with the “–pro --release” flags like “ionic build ios --pro --release” because this will start Ahead of Time (AoT) compilation and make your app launch way faster!