Speed up initial loading

[TheMohanraj]

We're developing an app which is partially native and partially hybrid. We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back. Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

[jgw96]

Hello @dheran . Start up time is something that we are working hard at reducing as we speak (: . We are currently working on a new build chain that will make Ionic apps alot smaller and which will include offline template compiling. With these two improvements you can expect to see a huge improvement in startup time. I would ask around on StackOverflow or our forums (forum.ionicframework.com) for ways to "preload" a webview thats inside a native app. Thanks for using Ionic!

[TheMohanraj]

@jgw96 Hey, Is there any existing feature request or issue? So that it will be easy to follow up and able to use it once it got implemented.

[jgw96]

@dheran Good question! At the moment there are no good tracking issues for this, as this is in the very early stages, but it is a high priority for us and the ionic-cli team is making alot of good progress on it. Once this gets farther along i will try to update this issue with our progress so you know what to expect (:

[TheMohanraj]

@jgw96 then, why don't keep it open until?

[TheMohanraj]

@jgw96 Removing unused css while build process will also contribute a lot

[asd2766]

I use ionic2 build a mobile website, then I find when I use android 4.4 browser open it, it is very slowly. Have any good suggestions to me ? website: https://zhaoxie.net/static/weixin/index.html

Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0-beta.6 Ionic CLI Version: 2.0.0-beta.31 Ionic App Lib Version: 2.0.0-beta.17 ios-deploy version: 1.8.5 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v5.3.0 Xcode version: Xcode 7.2 Build version 7C68

[TheMohanraj]

@jgw96 any idea which version will get this feature?

[jgw96]

Hey @dheran ! Good question! We have a working implementation of treeshaking with webpack 2 as of a few days ago and are still working on using the offline compiler. After reading the Angular team's meeting notes today it looks like they are not gonna call the offline template compiler "stable" until Angular 2 rc 4, but i hope that we can have an implementation of the offline compiler before then.

[TheMohanraj]

@jgw96 Seems they've already closed the issue. https://github.com/angular/angular/issues/3605 and Angular RC 4 is almost 33% complete (in milestone). Can we expect the new compiler in ionic beta 10 or 11?

[danbucholtz]

Hi @dheran, we're actively working on it. This is an extremely high priority item for us so please rest easily knowing we'll have it done as soon as we can.

Thanks, Dan

[TheMohanraj]

@danbucholtz can you please suggest me with any temporary workaround to reduce initial rendering time until official solution comes. because, I've been given two choices, either need to fix this issue or drop and build the same with native code.

[danbucholtz]

Hi @dheran,

Sorry, we aren't providing any work arounds at this time because we don't have any 😄 Please remember we are in the beta phase and are waiting on Angular to get offline template compiling and minification into a good state so we that we can mimic what they do. This is extremely important for us to get into the build process ASAP, but it's just not ready yet.

Thanks, Dan

[grapemix]

+1

We can wait till rc4, but please keep the offline template compiling high priority. FYI, the initial time for our app is around 8s, but the initial time of other native app is about ~1-4s. We really need to shorten the initial time.

Finally, thanks for the work.

[jgw96]

@grapemix Its definitely high priority! We are working with the Angular team on a constant basis to get offline template compiling working with Ionic along with tree shaking and aggressive minification so that we can get our average app size much smaller. As mentioned above there are some changes to Angular that we are waiting on right now, but it will definitely get done (:

[paulogr]

+1

[liujinxing]

+1

[TheMohanraj]

@jgw96 @danbucholtz guys any progress in this? can we get fix in beta 11?

[hackfrag]

+1

[prijindal]

In which repository are you guys tracking this I think I will be able to help a little regarding webpack

[danbucholtz]

@prijindal,

I believe @jthoms1 is doing the work on this branch. https://github.com/driftyco/ionic/tree/adding-offline-template-compiling

Thanks, Dan

[TheMohanraj]

Hi @jthoms1, will changes get merged with master before beta 11?

[evgeniynet]

Yea I waiting offline compiling too, but something can be made now. Our site is completely on Ionic2 beta.8 http://m.sherpadesk.com/

I have hybrid app too and I did some optimizations and got 417ms loading time. Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17 Also Site size decreased 600% (3Mb -> 500 Kb) User interaction response speed improved 2000% (2 seconds -> 100ms)

Good recommendations: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

I'll post all my gulp settings and link to appstore here: http://www.sherpadesk.com/blog/

[justme1]

@Evgeniynet very nice.

Few questions:

1. When installing app it opens instantly but the. I get loading your profile and it seems to stuck for 5 sec. Why?
2. How did you optimize loading time without offline compilation?
3. Is your mobile website is ionic2?
4. Is your desktop website ionic2?

I'm contemplating on using ionic 2 but the only thing which is stopping me that I need to manage webapp project + mobile ionic2 project.

Thanks

[TheMohanraj]

@evgeniynet is it served by node? It seems to be pre-compiled. But most of our case it will be device storage hosting (phonegap application).

[evgeniynet]

@dheran, no, it is hosted on Azure website, only plain html and js files which produced by ionic 2 gulp build task.

[evgeniynet]

@justme1

1. yea, I did trick with http://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm

Is your mobile website is ionic2? yes

Is your desktop website ionic2? yes

My ios app just loads site in webview, nothing more.

only one codebase for iOS, Android and Windows Phone, web app, Chrome extension and even an Apple iWatch

I set special flag to stop loading cordova, to prevent gap:// error

I am writing complete guide on this on http://www.sherpadesk.com/blog/

[justme1]

@evgeniynet

1. It this is the case then it seems not really faster loading :-)

Regarding one codebase:

From what I understood ionic2 isn't supposed to be used as a desktop website as it's fully supported by browsers. Don't you mind this issue?

[masimplo]

Count me in on waiting for this feature.

[kLkA]

Hi, any updates on this? I'm using version: Cordova CLI: 6.3.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.35 Ionic App Lib Version: 2.0.0-beta.19 LG Nexus 5 (os 6.0) Sidemenu tutorial app v1 loads in 3 seconds --v2 sidemenu load in 6 seconds

[danbucholtz]

The ahead-of-time compiling functionality is coming in Beta 12. This will dramatically speed up initial load and significantly reduce the size of the bundle. We're about to launch Beta 11, so this is up next. This is our #1 priority. We have it working on a branch, so we're close.

Thanks, Dan

[tanzeelrana]

its really slow for the first time. waiting for the optimization

[TheMohanraj]

@danbucholtz or anyone add this issue to beta 12 milestone

[TheMohanraj]

@danbucholtz can we use the branch code? Sorry, can't wait until beta 12 release.. :-( Please give us a quick release..

[danbucholtz]

@dheran,

This change requires Angular RC 5 which isn't out yet. We will release it as soon as beta 12 is ready to go. We're not going to release until it's ready to go.

A good short term fix could be switching to use inline-templates as shown below. This will be faster short term. Give it a shot and see if it speeds things up for you some.

@Component({
   template: `
   <ion-content>
      <div>content</div>
   </ion-content>
  `
})
export MyClass {
}

Thanks, Dan

[prijindal]

@danbucholtz Inline actually helps a lot. I wrote a small code in my gulpfile.js which does that during build.

gulp.task('build', ['build:prequel'], function(done) {
  glob('./www/build/**/*.html', function(e,files) {
    var indexPath = './www/build/js/app.bundle.js'
    var js = fs.readFileSync(indexPath, 'utf8');

    async.eachSeries(files, function(file, callback) {
      filename = file.substr(6)
      var html = fs.readFileSync(file, 'utf8');
      js = js.replace("templateUrl: '" + filename + "'", "template: `" + html +"`")
      callback()
    }, function() {
      fs.writeFile(indexPath, js, 'utf8', function(err, data) {
        done()
      });
    })
  })
})

Yeah, this is not clean and is not the best way to do so. But it works like a charm.

[prijindal]

PS: Inlining does not help a lot with initial startup, maybe at most 0.5 seconds. But it sure makes it smoother between page transition or whenever you are dynamically loading a component.

[danbucholtz]

@prijindal, Nice! That's awesome! With the AoT compiler coming in Beta 12, it won't matter whether the template is inline or external file. It will be converted to pure JS as part of the build process. Nice work figuring that out!

Thanks, Dan

[kLkA]

Hi, i checked Angular page and i see that RC5 is released. What did you mean by "until rc5 out"?

[trakhimenok]

@kLkA , @dheran Give Ionic team a break - they sure are trying to get betas out as fast as possible and pinging everyday does not help them in any way. They are working directly with Google on Angular and definitely should know that Angular2 rc5 is out.

[prijindal]

Yeah and Google released rc 5 like just few hours ago. I am sure they are aware of the release and are working something out to get it into beta 12

[TheMohanraj]

@astec really? hope you are not in our position. This issue is preventing us from going live. Are you in this position? If you read my comment carefully. I asked Ionic team that, Can they able to release AoT patch (danbucholtz said it was done in separate branch) as quick release instead of AoT patch + other non priority bug fixes. If this is not priority for you and our comments were spamming you, I suggest go for unsubscribe.

[trakhimenok]

@dheran, I was in your position at some early beta thinking it's almost there and my app is almost ready to be released. But I got tired fighting with API/behavior changes. Since that time Parse.com announced they are shutting down and I have to rewrite my auth system. So I decided to put it aside and switched to developing a Telegram+FB bot for my app. I feel sympathy for your situation but this is what you get when you jump on a beta wagon. If you want guaranteed timeline your was free to choose Ionic1 or any other non-beta platform. I myself will be back to developing Ionic2 app once we get 1st release candidate. Or at least Beta12. Either I overestimate complexity of the "ahead of time compiling" or you underestimate it. Anyway I'm not going to teach anyone patience anymore here - please accept my apologies and good luck with your endeavour.

[lordgreg]

This isn't the thread about posting your needs and experiences. Please stick to the topic or leave it as-is. 👍

Looking forward to ionic2 beta12. All the best team :)

[jgw96]

Hey @dheran! Im sorry and definitely feel your frustration, we've been working as hard as we can to get this working and i can happily say that we are extremely close now and it will be in the beta.12 release along with a few other critical bug fixes. We would have liked to have this out earlier but we have been working with angular for the past few weeks to fix some bugs on their end that was causing aot compile to not work. It has also taken some time for us to first, optimize Ionic for the new aot compile, and second, to make all the changes necessary to work with Angular 2 RC5. The reason we cannot recommend that you use the branch that dan mentioned above is because the gulp tasks to actually build your app are not completely done yet. So while technically you could use it you would not actually be able to build your app. We've been working with a pre-release version of Angular 2 rc5 for a while now, but we have to wait for that release to go public just like everyone else before we feel comfortable doing a release that includes it. We are still in beta, which means that things are being worked on and will change and that is just the name of the game when it comes to beta software. Finally, when interacting with others in the community would you mind keeping our code of conduct in mind? Thanks for using Ionic! Also, if you ever want to see what were working on you can check out our meeting notes (which also get shared on twitter) and our roadmap.

[msaelices]

I'm not sure, but maybe the main progress in speeding up ionic are doing in the ngmodule branch. Am I wrong?

[jgw96]

Good spot @msaelices ! Actually, most of the framework side of this is being done here https://github.com/driftyco/ionic/commits/deeplinks-ngmodule at the moment. Thanks!

[voliva]

For me the problem is not about the initial loading (as while bootstraping), but every time the user went to a page he hasn't visited.

While waiting for this AoT compiler to come to ionic, what I did is add a splash screen (just a ionic page with the app logo on it) called TemplatePrecompiler that takes all the components (any @Component of my app, no matter if it's a Ionic page or a Component) and compiles them one by one on runtime. Once that's done, I forward to the home page. That's really useful, because the user just sees a splashscreen that takes a while (~5 seconds for my app) but once it's all loaded all the screens go fast. And you can even put a progress bar on that splashscreen.

I created a gist in here: https://gist.github.com/voliva/eb0242743661000896054601af72d1fd

[danbucholtz]

Just to give everyone an update, we're actively working on this. It has been a larger effort than we anticipated but we are moving forward and getting closer. We have a branch that is almost two hundred commits ahead of master that has all of the changes needed for AoT 😄

This will be coming soon. We are to the point where we are starting to test this internally. We aren't ready for public testing yet. This is our highest priority item and the entire framework team is working hard on this effort to get it right. No timeline as of yet, but I can say we're getting there and I'll continue to update this thread with new info as we have it.

Thanks, Dan

[wilhantian]

+1

and my app.bundle.js is 3.8MB, to big...

[gisinaction]

+1 What time release beta12？@danbucholtz