Application start-up time :: External vs inline templates


#1

Hi,

So I’ve been trying to optimize my Ionic2 application. No matter what I did, the start-up time for a cold-start was an insane 9-10 seconds. Everywhere in this post, when I talk about an app, I mean a production release build for android made via ionic build android --prod --release. And start-up times are measured from the moment I click an app’s icon to the moment I can see the root page of that application.

My application has about 13 different pages. I tried creating numerous applications from scratch based on different starter templates. tabs, sidemenu, blank, all worked fine (4-5 seconds start-up time), the super template, however, gave me a start-up of about 7 seconds. And the moment I added on top of these starter templates my app’s pages, my custom app’s start-up time jumped to about 10 seconds, which was absolutely ridiculous. At one point, I even started considering migrating to nativescript after trying a demo app for that framework.

Then I came across this thread: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/. Trying one of its pieces of advice, I converted all my templates inline. And without doing anything else, I found that the same app’s cold start-up time has gone down from about 10 seconds to about 3 seconds!!!

This has amazed me a lot. I know loading templates via ajax is a slow process (though I didn’t realize how slow it really is before today). However, I believe that Angular (or Ionic) shouldn’t require me to inline my templates explicitly. I believe that when you’re doing a --prod build, Ionic should automatically replace external templates with inline ones.

It’s not just a matter of laziness. I use SublimeText which does not give any syntax highlighting for inline templates. Is there a way around this?

On a closing note, I am glad I didn’t have to switch away from Ionic. But had this info not been available (and it is not available easily), I might have moved away. Perhaps the Ionic team should include important production app tips on the main site instead of buried inside blogs. =)

Asim


#2

External or inline templates shouldn’t make any difference, all the code is packaged into a single bundle so there are no additional AJAX calls to load templates. (And all files are local anyway in an Android app, it’s not like there’s a server round-trip involved.)

Are you really sure inline templates is what made the difference?

Also --prod does enable Ahead-of-Time template compilation, so templates are compiled into JavaScript code.


#3

Hi,

Yes I am positively sure that inline templates made the difference. And I have used --prod --release throughout my testing. That’s what confused me. I expected these flags to do the grunt work for me.


#4

Well, I’m positively sure that inline templates make no difference whatsoever in my own tests.

Passing or not the --prod flag on the other hand, that makes a lot of difference.