Ionic-framework: Speed up initial loading

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!

@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.

@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 (:

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

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

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

@jgw96 any idea which version will get this feature?

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.

@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?

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

@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.

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

+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.

@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 (:

+1

+1

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

+1

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

@prijindal,

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

Thanks,
Dan

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

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/

@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

@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).

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

@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/

@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?

Count me in on waiting for this feature.

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

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

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

@danbucholtz or anyone add this issue to beta 12 milestone

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

@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

@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.

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.

@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

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

@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.

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

@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.

@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.

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 :)

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.

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

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!

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

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

+1

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

+1
What time release beta12？@danbucholtz

with regards to @prijindal 's approach of putting the templates into the Component, will this be the same optimization level expected from the offline compilation?
I tried this approach, it saves the time of the HTTP requests to fetch the template, but there is still a lag at first view load. I suppose this happens because angular compiles the custom html of the templates at the first view load.

I am quite new to angular and I would appreciate if someone can clarify this to me.

@moatazelgamal,

AoT compiling will result in a significant speed-up. It takes several seconds to run the compiler for a typical app ahead-of-time, so this is time shaved off from runtime. It's hard to say how much faster it will be for a typical app. We've only tested it on a very basic sample and the start-up time went from ~3 seconds to ~300ms. We have not done enough testing to know what sort of numbers a typical app will see, but it will most certainly be faster.

The changes for AoT are in place for the framework (we think... so far so good 😄 ) and now we're shifting over to making the build process A) simple, B) scalable and C) as fast as possible. The team and I are working on it together in this repo.

Expect to hear more soon.

Thanks,
Dan

@moatazelgamal my approach is not offline compilation, it is simply inlining templates.
Offline compilation is going to make the initial loading a lot faster.

All,

We are heavily testing this internally now. We've made some great strides this week.

Thanks,
Dan

Hello there,
I see Ionic2 RC0 was released, Is this the expected beta12? The changelog of RC0 did not mention anything about AOT compiling. I think this feature is too good to be missed in the changelog :)

It was "released". We're still filling in the gaps right now 😄 with changelog, etc. Expect official details later today. We ran into technical difficulties yesterday so we're a little bit behind.

Thanks,
Dan

Hi Ionic Team! Thanks for your hard work!

So excited about this. Can't stop tweeting since I first read about it.
Kudos ionic team.

On Thu, Sep 29, 2016, 04:19 gisinaction [email protected] wrote:

Hi Ionic Team! Thanks for your hard work!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/6776#issuecomment-250346182,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAxEjznTYrcKZKFD2rElIqKkWrGIvvUrks5quxIvgaJpZM4Iuokt
.

First of all, thank you for this great progress!
I have been testing the new version and the initial loading now feels faster.

I have also been testing it in a low-spec Android 4.4.4 to better feel the performance difference and comparing it to Ionic 1.
With Ionic 2-rc0, I find these approximate results:

| Project | Cold boot | Hot boot |
| --- | --- | --- |
| ionic1-tabs | 4,5 s | 3 s |
| ionic2-tabs | 5 s | 3,5 s |
| ionic1-sidemenu | 5 s | 3,5 s |
| ionic2-sidemenu | 5 s | 3,5 s |
| clock (native app) | 1 s | <1 s |

• Projects created with these commands:

ionic start myTabs1 tabs
ionic start myTabs2 tabs --v2
ionic start mySidemenu1 sidemenu
ionic start mySidemenu2 sidemenu --v2

Although the projects are not the exact same implementations, they give us a starting point for comparison.

Even with ionic 2-rc0, the basic projects require around 5 secs to load up on cold, and around 3,5 secs when it had already been loaded previously. These are roughly the same times that I find with Ionic 1 versions.
The blog post that introduces Ionic2 RC0 contains an animated gif showing the current load up time. Around 3 seconds.

Do we know where are the remaining seconds spent? (eg. Starting up the Javascript engine/webview, Cordova plugins, Angular 2 loading, ...)?

Can these seconds be optimized to have an experience closer to native apps?

@SynerG, great info. I am a little swamped with some other stuff right now but we will have more feedback soon. Thanks for putting that together!

Thanks,
Dan

i created a new ionic2 rc-0 project with side menu. I used ionic serve --lab, and when i click the icon at the left side of header bar, the menu doesn't not come out. only when i slide or click the menu toogle button that it slides

@danbucholtz I wanted to thank the Ionic team for releasing RC0! Even though I had to invest some time to migrate my app due to all the changes, the startup time of my app improved significantly! For example, on a 3 year old Samsung Galaxy 4 the startup time with beta 11 was ~6 seconds which RC0 reduced to ~3 seconds! It's a great improvement so well done :)

@abhayastudios, w00t! Thanks!

We have more improvements and optimizations in store, too!

Thanks,
Dan

We too have had our load time slash by about 50%. Great work guys. Really loving working with this framework.

I know this doesn't help but I just recently dived into ionic and I am using 2.0.0-rc.2 , I noticed how slow the initial load was compared to an app that was built on 1.1.1

@geocine I noticed the same thing, in an older v1 app, the startup time is very good but while Ionic v2 provides a much nicer programming environment, the startup times are very slow in my app (>5 seconds in release build on a relatively fast device with Android 6.0). Is the Webpack build doing tree shaking?

If it really takes time to load , perhaps is there a way to atleast show a splashscreen that I can show in under a second during loading?

@geocine That's why you usually use the cordova splash screen plugin (https://github.com/apache/cordova-plugin-splashscreen) and hide it onDeviceReady.

Is there any easy way to profile the app startup time? I'm using Chrome remote debugger to profile the app, however that lets me connect to the app only after it's already initialized (so I cannot profile the startup) and it closes when I exit the app, so I cannot relaunch it and profile the startup this way.

I'm asking this because I'm having problems with my app startup time on Android, which is above 5 seconds.
Even when I use the plain Ionic 2 tutorial app, it starts only after 4-5 seconds on a relatively performant device (Sony Z3 compact, 6.0.1).
That's really slow (my old Ionic 1 app with a few plugins takes < 3 seconds to start).

Are there any plans to (significantly) reduce Ionic 2 app startup times?
Developing with Ionic 2 is great, but I'm afraid that otherwise I'll have to switch to another framework :-(

Are there any plans to add support for Lazy loading, this could also be helpful in reducing initial load time. Angular cli which uses webpack now supports Lazy loading and with AoT a well designed angular app can significantly reduced load time. Since Ionic also uses webpack, I think this can be done for Ionic as well.

urgent needs for Lazy loading.

The ionic team meeting doc said that they are working in treeshaking, so probably this will reduce the bundle size and will speed up a little the boot up time.

Tree shaking is great, but it can only do so much. Lazy loading is an important separate concern, and so far, the ionic team hasn't expressed much interest in it according to comments I've seen in other issues (e.g. https://github.com/driftyco/ionic/issues/8102). Unfortunately, many people seem to think it's only useful in web apps, even though it can also be incredibly useful in mobile apps too.

@rob3c and others,

Lazy loading is something we're looking at and would like to explore more. Expect to hear more on this topic in the coming months.

Thanks,
Dan

@danbucholtz,
Beyond lazy loading, are you exploring any other solutions that could significantly reduce the start up time?

Right now, this is the number 1 reason we are not adopting Ionic 2 in new projects.
I don't know if you could share with us some information about what is in process.
Thanks!

Well this is a problem with javascript in general and not specific to ionic. It is interesting to see what other frameworks are doing about it. For example I stumbled upon a related article on a "competive" framework's website using what is called "code caching" in the v8 engine to vastly improve startup performance.

The startup time has gotten a lot worse after Angular 2 switched to modules due to AoT. In NativeScript, which also has problems with long startup time, it seems that it's fine without Angular 2 (https://github.com/NativeScript/nativescript-cli/issues/371). In june my app was starting relatively fast, but after Ionic 2 switched to newer version of Angular 2, it now takes >= 5 seconds and that is unusable for production. Are you aware of any Angular 2 improvements that are in the making to improve this or is treeshaking and lazy loading the only way?

@Kobzol,

That is strange, AoT definitely results in a significantly faster start-up time (typically, anyway, I am sure there are edge cases).

@SynerG,

Start-up time is pretty fast with AoT. You sure you were testing with AoT? Our bundle size is still relatively large and we are working on bringing that down. It isn't completely huge though unless you import a bunch of large libraries. Often times small libs become huge due to a bunch of nested dependencies.

Thanks,
Dan

I don't know if I'm doing anything wrong, but I tried to run AOT prod builds of the Ionic 2 tutorial starter template with both webpack and rollup and it takes > 5 seconds to start on my device (Sony Z3 Compact with Android 6.0.1), whereas an older Ionic 1 app starts in 3 seconds.
The startup got worse over the last couple of months, when Angular 2 switched to the module system (the same happened with my nativescript app, which slowed after the Angular switch). Maybe lazy loading could help with that.

Do you have any benchmark numbers that I could use for comparison?

5 seconds is not that bad compared to what I've been seeing. I've had to up the timeout limit in config.xml to make sure it does not timeout (default is 20 seconds!).

That was for a slower 4.4 device though. On a Sony Xperia E5 with 6.0 it is still 10-15 seconds.

iPhone 7 plus is less than 2 seconds.

How big are your bundles? Are you using lots of third party libraries?

Thanks,
Dan

Hi Dan!

Nothing too crazy I think.

My bundle size using webpack and AoT is 1.9MB.

Deps in package.json

...
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@biesbjerg/ng2-translate-po-loader": "^0.1.3",
    "@ionic/app-scripts": "0.0.46",
    "@ionic/storage": "1.1.6",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/store": "2.2.1",
    "angular2-uuid": "1.1.0",
    "ionic-angular": "nightly",
    "ionic-native": "2.2.7",
    "ionicons": "3.0.0",
    "ng2-translate": "^4.1.0",
    "ngrx-store-freeze": "0.1.4",
    "ngrx-store-logger": "0.1.7",
    "pofile": "^1.0.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@biesbjerg/ng2-translate-extract": "^0.1.1",
    "@ionic/app-scripts": "0.0.46",
    "@types/cordova-plugin-media": "0.0.3",
    "del": "^2.2.2",
    "fs": "0.0.1-security",
    "path": "^0.12.7",
    "typescript": "2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-globalization",
    "cordova-plugin-media",
    "cordova-plugin-file",
    "cordova-plugin-compat",
    {
      "locator": "https://github.com/EddyVerbruggen/cordova-plugin-backgroundaudio",
      "id": "nl.x-services.plugins.backgroundaudio"
    },
    "cordova-plugin-app-version",
    "cordova-plugin-x-socialsharing",
    {
      "locator": "https://github.com/biesbjerg/cordova-plugin-inapppurchase.git",
      "id": "cordova-plugin-inapppurchase"
    },
    {
      "locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
      "id": "cordova-plugin-wkwebview-engine"
    },
    "cordova-plugin-google-analytics",
    "cordova-sqlite-storage"
  ],
...

Hello,
I would like to share my own information with the startup time aswell.
Actually I'm putting my old Ionic V1 to V2 (rewriting everything from scratch).

My old application with crosswalk starts up (depending on device) from 3 to 4 seconds.
The new application needs 6 to 7 seconds (7 seconds are more likely).

I've tried the RC3 aswell as the nightly build (Ionic Framework Version: 2.0.0-rc.3-201612021933)

Package.json:
{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "^2.0.0-rc.3-201612021933",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "moment": "2.15.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.44",
    "typescript": "2.0.9",
    "webpack-bundle-analyzer": "^1.5.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "o2: An Ionic project"
}

My assets folder (third party plugins / images) is about 2.14 MB.
I'm using 6 different third-party plugins (jQuery, moment, hammer, jquery 3.1, fullcalendar, svg-panzoom, fontawesome).

The APK-Size is: 6.58 MB
Unzipped this package is: 15 MB.

Folding:

• assets : 10.1 MB
  -> www/assets : 2.93 MB
  -> www/build: 7.07 MB
  -> www/build/main.js: 3.003 MB
  -> www/build/main.js.map: 3.790 MB (is this needed on production?)
• res: 1.73 MB
• class.dex: 3.07 MB
• resources.arsx: 0.13 MB

Ionic-Version information:

Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612021933
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.44
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

Maybe it helps, if you @danbucholtz / @jgw96 could use my actual project to debug this problem I'd be happy to share it (private).

Greetings
Graphefruit

I believe sourcemaps should be disabled for production build. Angular CLi recently added an option to disable it https://github.com/angular/angular-cli/pull/3262

Graphefruit can you please also share the number of components and directive your app have?

Hello @naveedahmed1,
here we go:

• services: 10
• pipes: 3
• pages: ~49
• custom-config: 1
• directives: 0 ( ;) )

Greetings
Graphefruit

@naveedahmed1 That issue is about not inlining sourcemaps, which I agree probably isn't the best idea in production. However, external map files for production assets can be useful and only add a small comment to the deployed files. I'd definitely like to be able to generate external map files for production builds.

@rob3c,

It will be configurable.

Thanks,
Dan

@danbucholtz, we really need improvement on the boot time. Even the ionic-conference-app downloaded from play store takes 9-10 seconds on my Samsung Galaxy S4 Android Version 5.0.1.
This is the app I downloaded --- https://play.google.com/store/apps/details?id=io.ionic.conferenceapp

Boot time for my app with few pages is about 7-8 seconds on the same phone.

So I've tried to attach me via Developer-Tools and got a pretty good timeline-result.
I couldn't track from start because attaching, but you see whats happening:

The Compile Script takes about 500ms, the evalute script from 0ms to 5000ms.

If needed @danbucholtz @jgw96 I can send you the saved timeline for this.

How did you manage to profile this? I can't connect to the app until it's fully started.

BTW I don't know if that's a good result for you, but sadly for my client > 5/6 second startup time is unacceptable.

@Kobzol it isn't a good result, page needs 7s ~ aswell.
What I did: Open a page, see your attached device list, start the app first time normal, open the "inspector" switch to timeline tab
Close the app now, and the inspector, now start the app again, press inspect, press the in the timeline tab ultra fast the record button ;)
The first 1-2 seconds when the app is starting I cant attach aswell, but the rest is possible with a bit of speedy fingers.

Update: With Ionic1 I got a startuptime 3-4 seconds which was quite acceptable for me

Are you building with AoT? Those times seem slow.

Thanks,
Dan

@danbucholtz, In my case I downloaded ionic-conference-app from the play store, pretty sure it would be AOT compiled, please see my comments here

@savanvadalia,

We pulled it out of the play store because it actually wasn't AoT bundled. Our developer made a mistake before publishing. We'll republish a new version soon.

Can you install the latest version of the ionic CLI and app-scripts?

npm install -g ionic@latest
npm install @ionic/app-scripts@latest

And then run ionic build android --prod --release? This will give you an AoT build with an optimized APK. It should start much faster than 9 seconds even on a slow device.

Thanks,
Dan

@Dan on what devices are you testing this? Even with every package updated, I can't get under 6 seconds and from what I've seen here, others are having similar experiences.

Did anyone managed to install the latest app-scripts?

Update problems:

If I try to install the latest app-scripts I get following error: (I installed ionic@latest before)

C:\Users\graphefruit\Documents\o3>npm install @ionic/app-scripts@latest
ionic-hello-world@ C:\Users\graphefruit\Documents\o3
`-- @ionic/[email protected]  invalid
  +-- [email protected]
  +-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})

After this I started a complete new project, ionic start o4 --v2 with the same error.

Maybe I don't get the update mechanismen - do I need to grab myself into the package.json, or need to delete the node_modules folder?
I tried to update manually set app-scripts, and run npm install, but it crashed.
Neither the package.json was updated automatic to 0.47

So I build the project now with 0.0.45 and --prod --release

_And the startup time was 7-8s aswell._

@danbucholtz I think I have always been using AOT until now as I remember I saw ngfactory files somewhere. I am still bit resistive at present to move to newer app-script version as my current version 0.0.46 was doing a decent job for me. But anyways I will take your word and update to 0.0.47 and let you know what happens.

Savan

@danbucholtz I updated to latest ionic-app-scripts and started receiving this error (See below screenshot).
Also I have strictly followed the upgrade procedure mentioned in the release notes.

Could you please help with this?

Thanks
Savan

@graphefruit I didn't had any issues with installing latest ionic-cli and installing npm packages at project level. I hope you are following the release procedure here. But, as I mentioned above I am getting a different run-time error "Unexpected value 'undefined' declared by the module 'AppModule'".

Also running 0.0.45 with --prod --release won't help. Dan asked to run that with version 0.0.47 as from 0.0.47 and on wards this will be the way to generate a production build. With prior ionic-app-script versions ionic run android generated the production build by default.

@savanvadalia Thanks for your feedback, in the procedure theres not much written.
I also started a fresh project, and did npm install -g ionic@latest before.
So you just runned both commands in your project folder? Or did you do any specific?
Like I said, I already tried to remove the node_modules folder aswell, and did npm-install afterwards.
But in my opinion, it won't help when the package.json isn't updated to the latest app-scripts version. 0.47 but when I do this manually it crashes even more...

Normaly they post in the changelog the newest package.json and what to update.

Update, finally managed it to resolve it with these commands:

npm install ionic-angular@nightly --save
npm install @ionic/app-scripts@latest --save-dev

Let the build begin.

Build test

So, build went through, funny fact - I needed to "strg +c" because ngc-started was shown for more then 10 minutes, after this, the build was continued, the second time it run without any problems.

Size: 9.2 MB
The main.js.map is still existing when building for production

Starting the app needs 7-10 seconds (depends on device) so it looks like it went more worse then before.
(Note 1, Note2)

On a Google Pixel XL the startup time was about 4.5 to 5 seconds
Compared to my old app-version its still 1-2 seconds slower (3.5 seconds startup time)

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612142137
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

Update 2:

I've just compared the sizes from the old build with 0.45 and with 0.47 - the main.js has (nearly ~10kb) the same size - 3MB. - Don't know if this should be affected aswell.

Update3:

Thats the best snapshot after 15 minutes try for the loading:

@danbucholtz I managed to solve the run time error myself, it was related to angular barrels. I had to reference the modules with complete path in the app.module.ts file. Don't know why it started failing with the newer script version though!!

However, after fixing the error and running ionic run android --prod --release on my Samsung Galaxy S4 Android Version 5.0.1 the initial load is still 7-8 seconds. There is No change in the initial at all after updating it to the latest ionic-app-scripts versions.

We really need to improve upon the inital load time. I personally don't think the phone and Android version I am using is relatively that old to have that much slow boot time. I would be happy somewhere between 3-4 seconds boot time on old-mid range phones.

@graphefruit, I did 2 steps not mentioned in the release procedure
1) I manually modified package.json file to change script version to 0.0.47 and then run npm install.
2) I also removed .tmp directory which is not valid with new build process as per the release notes.

Apart from this I just followed the release procedure.

Are you running the latest ionic cli? Can you verify? npm install -g ionic@latest.

Can you run npm run ionic:build --aot and verify that ngc is run in the terminal? When you run ionic run android --prod --release do you see ngc in the terminal?

Thanks,
Dan

Hello @danbucholtz,

yes I see ngc when running--prod --release.
Also I installed ionic@latest more then 4 times ;) via cmd without any errors - maybe we need to change some settings in the package.json - they weren't upgrade on their own.
Also I've installed the nightly to maybe see some difference.

The other command I can try to run tomorrow morning.

Greetings
Graphefruit

@danbucholtz

Yes, I am using the latest ionic-cli (Please see my workspace environment info at the end)
I also see the ngc in the terminal in both cases you mentioned please see screenshot for each of them
1) npm run ionic:build --aot
2) ionic run android --prod --release

1) Aot build

2) Production build while running on device

Still no difference in the initial load times for me which 7-8 seconds 😞 😞

cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

@savanvadalia long loading time could be specific to your app. It would help if you try & provide numbers for a starter app or ionic-conference app so numbers are comparable.

Also it make sense to upgrade to ionic-angular RC4.

@danbucholtz Care, this post will be a bit longer:

My/Custom project

npm run ionic:build --aot

ionic run android --prod --release

ionic build android --prod --release

Still 10 seconds loading time.

Starter-App

@astec After you've asked, I've installed the starter app.
And made the same here.

1. npm install -g ionic@latest
2. ionic start o5 --v2
3. ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

1. ionic platform add android
2. npm run ionic:build --aot
   

3. ionic run android --prod --release
   

4. Times:
   7.1 Note 1 - Android 4.1 - The starter project took about 5 to 5.5seconds
   7.2. Note 2 - Android 7.0 (CM14) - The starter project took about 5.5 to 6.5 seconds

Conference - App

So next try for I've downloaded the starter app: https://github.com/driftyco/ionic-conference-app

1. npm install
2. ionic info
   

-> Looks like this one is not on rc.4, cause of this

1. I changed the package.json like mentioned in changelog.

"dependencies": {
  "@angular/common": "2.2.1",
  "@angular/compiler": "2.2.1",
  "@angular/compiler-cli": "2.2.1",
  "@angular/core": "2.2.1",
  "@angular/forms": "2.2.1",
  "@angular/http": "2.2.1",
  "@angular/platform-browser": "2.2.1",
  "@angular/platform-browser-dynamic": "2.2.1",
  "@angular/platform-server": "2.2.1",
  "@ionic/storage": "1.1.6",
  "ionic-angular": "2.0.0-rc.4",
  "ionic-native": "2.2.11",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
},
"devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
}

1. deleted node_modules
2. npm install
3. ionic info
   
4. ionic platform add android
5. npm run ionic:build --aot
   
6. ionic run android --prod --release
   
7. ionic build android --prod --release
   
8. Startup times
   11.1 Note 1 - Android 4.1 - 7- 8s
   11.2 Note 2 - Android 7 (CM 14) - 7 - 8.5 s

The time was measured by "click on app icon" till the screen appeared with content
So even the conference-app with the latest release needs 7-8 seconds, so it isn't a custom-release project.
Even so the conference-app is still realy small with no big internet activity, or html-5 filesystem.

Hope this helps.
Greetings
Graphefruit

@jgw96, can you weigh in on the above? Justin is our resident Android expert. My initial thought is those are really old (7 generation) old phones and that could play a factor, but I will defer to Justin.

Thanks,
Dan

FWIW I have Sony Compact Z3, which is not really that old and the times are pretty much the same on Android 6.x.

@jgw96 @danbucholtz I've installed it now on my Google Pixel aswell - startup time of the conference app - took 3.5 to 4 seconds.
Fun fact: I've had 10 times startup times to 8-10 seconds - then I removed and installed the app again, and the time went down to 3.5 to 4 seconds again.

@graphefruit yeah, but reinstalling can't be the right way. ;-)
Interesting (profiling) would be, were so much time is spent on and how fast other (angular) frameworks (Ionic 1, OnsenUI etc.) start a simple "hello world" app on the very same device.
Startup time of the RC4 conf app on my (not too old ) Moto G2 is about 6 sec :-/

@mpaland Thats true, it won't be the right way, but sometimes providing all information you found is the best way and hope ionic can use them.
Like I mentioned in some posts earlier - I'm porting my Ionic1 app to Ionic2, there was a startup time from 3 to max 4 secs.
The ported project takes 7-8 seconds on the same device.

HTC One M8 (Android 6.0 - Vanilla)

So after your suggestion I've installed an Ionic1 project:

1. ionic start myproject
2. ionic platform add android
3. ionic build android
4. Ionic1 - Startime on HTC One M8 (Android 6.0) was about 2.5 seconds.
5. Ionic 2 - Conference App - Start time: 5 seconds
6. Ionic 2- Starter App - Startime: 4 seconds
7. Ionic 1 - My custom project: 4 seconds
8. Ionic2 - My custom project: 7 sec.

Shock! - Ignore this sentence.

So even with the starter app in ionic 2 the difference is still about 1.5 seonds
The HTC One M8 was released 2014 March

Moto G (Android 5.1)

So and here we go with an next device - Moto G - Android 5.1.

1. Ionic1 - 4.5 to 5.5 sec sec
2. Ionic 2- Conference app: 8.5 to 10.5 sec
3. Ionic 2 - Starter app: 6 to 6.5 sec
4. Ionic 1 - My custom project - 5.5 - 6 sec
5. Ionic 2 - My custom project - 7-8 sec.

So as you see, we've still 1.5 sec difference, the conference app needed a lot more time
The Moto G was released 2013 November

So I think that should answer all questions now.

_And yes: Every project in ionic2 was compiled with RC4 and appscripts 0.0.47 - before anyone asks_

Are you using the latest Ionic CLI? How big is your bundle? Can you compile it with just npm run ionic:build --aot and verify that platformBrowserDynamic is NOT in there? --aot should skip minification but still give you the AoT build.

Thanks,
Dan

@danbucholtz I'll check it and give you update in 15 minutes... - Maybe I've made a mistakes, to much compiles in the last 2 hours for this post =/ sorry

Keep in mind that platformBrowserDynamic has to basically run ngc in the browser when the app starts. Ultimately whether you're doing AoT or not, you're still using .ngfactory.js` files in the browser. It takes about ~20 seconds in your previous posts. So 20 seconds of compiling in the browser + 5 seconds start-up = long time.

5 seconds is still really long. Something is not quite right there.

Thanks,
Dan

@danbucholtz Hello again dan! I'm sorry. I've installed the latest scripts, but the npm run ionic:build --aot wasn't avaiable on my custom project. - I've already updated my post on top.

So I've created a new project now, compiled and signed, and now the startup time is back to 7 seconds.

_I like to mention that all other checks_ - conference/starter app were all with the ionic:build --aot and I can verify that platformBrowserDynamic is NOT there.
I've extracted all ZIPS and had a look into main.js.

Sorry again.

@graphefruit great effort for producing such stats on variety of devices 👍
@danbucholtz @jgw96, how abt Ionic Team releases production version of ionic-conference-app on play store and we can download provide you some stats on initial load.

If our load times don't match then possibly we are doing something wrong with our build which i really doubt is the case.

@danbucholtz It's been like this since RC.0, I doubt that anyone has been able to get startup under 5 seconds on Android. Ionic 1 startup times are better than Ionic 2.

Could you please look into it and do some profiling?
I know that you're first trying to make sure that we are using the correct procedure to build the app, but this issue hadn't moved much in the last months and when multiple users are reporting this it probably won't be caused by a bad usage of the build script.
Five (and that's the best case scenario here) or more seconds to start is a show-stopper for pretty much any Android app.

My statistics:
Sony Z3 Compact Android 6.0.1 - AOT/prod/minified build (2 MiB JS bundle) takes 6 seconds to start both with and without Crosswalk. On slower devices it takes much more time (10 and more seconds were reported by users that tested my app).

@danbucholtz Would you mind sharing your team's device testing setup with us? It's unclear why you're not experiencing the same startup delays that the rest of us seem to be.

Hey everyone, thank you _so_ much for the detailed diagnostics and testing info. This is our #1 priority right now, and while some of us here aren't seeing some of the long load times, others are depending on the device/OS/etc. We're narrowing it down, any extra info you have is always welcome.

@mlynch While this is not the missing 5 seconds, it could, maybe, be some time worth saving

https://github.com/driftyco/ionic-storage/issues/54

I have a gut feeling that one of the ionic libraries (storage) is initialising twice..... (rather than once). I could be very wrong, but still, while hunting for startup performance gains, throwing this up for consideration, especially if there is a wider issue here

Hello,
I've tested another device:

Nexus 7 (2012) - Android 4.1

Ionic 1 - Starter-App: 4 sec
Ionic 2- Conference app: 7 sec
Ionic 2 - Starter app: 5.5 sec
Ionic 1 - My custom project - 5.5 sec
Ionic 2 - My custom project - 8.5 sec

Maybe I can provide this evening another test from an Ulefone-Metal with Android 6.0.

Greetings
Graphefruit

After upgrading Ionic to 2.1.17 and running ionic run android --prod significantly improved the performance and my app is starting within 2 to 3 seconds. Don't know what has been changed but I am very happy of it. :smiley:

@PrithiviRajG Could you please share some more information?

1. How big is your app?
2. ionic info - Information
3. package.json - Information
4. installed plugins / 3rd-party libraries
5. Which device are you using?
6. Can you also test it with the starter-app and ionic conference app ?
   Thanks in advance
   Graphefruit

@graphefruit

1. My Apk size is 7MB, size of WWW folder is 7.88MB, plugins folder is 67.1 MB, resources folder is 1.01 MB
2. ionic info

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

1. package.json

{
  "name": "ionic-app-base",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/cloud-angular": "0.5.2",
    "@ionic/storage": "1.1.6",
    "angular2-swing": "^0.10.0",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.39",
    "typescript": "2.0.3"
  }
}

1. Installed plugins

cordova-plugin-device
cordova-plugin-facebook4
cordova-plugin-googleplus
cordova-plugin-nativeaudio
cordova-plugin-splashscreen
cordova-plugin-statusbar
cordova-plugin-whitelist
ionic-plugin-keyboard
angular2-swing

1. Device Information: MOTO G 1st Generation - Android 5.1

   1. will test the start up app and ionic conference shortly and let you know.

@PrithiviRajG Thanks for your information. it looks like you're not on the latest:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

-> You're using RC2 not RC4 - also the ionic scripts are now on 0.0.47.

But maybe this is an indication for @jgw96 ?

Hello,
I've tested another device:

Ulefone Metal (Android 6.0)

Ionic 1 - Starter-App: 3.5 sec
Ionic 2- Conference app: 5 sec
Ionic 2 - Starter app: 4.5 - 4.7 sec
Ionic 1 - My custom project - 5 sec
Ionic 2 - My custom project - 7 sec

Greetings
Graphefruit

@mlynch Out of curiosity just want to know that the improving initial load time,
will it be fixed part of @danbucholtz current work on tree-shaking OR this will be separate Android specific fix?

I came to know about Dan's work from meeting notes, love working with you guys. Can't believe how much transparent the team is with framework work. :heart:

@savanvadalia,

We will never be done trying to make Ionic faster.

Right now we are focused on getting proper tree shaking working and getting closure compiler support. Closure can produce significantly smaller JS bundles than the alternatives resulting in faster load times. We also are investigating code splitting right now to reduce the amount of time needed to load and parse the javascript.

Thanks,
Dan

@danbucholtz Great to hear this. How can I contribute to the getting-faster features?

I am currently evaluating front-end and mobile technologies for new long-term product lines in the consumer Finance area. Initial loading performance is an essential decision factor.

From recent testing of small-scale app, the iOS/Android performance is acceptable. Browser loading performance is kind of OK too: I will introduce Server Side Rendering later. The most concern lies in the initial loading performance when we start to introduce more pages and third-party modules.

Is there any way to show a splash screen or any progress in the inital loading of the Ionic2/Webview app?

They avg. time the app takes to load for me is about 10 seconds. This makes bad user experience when people have to wait about 10 seconds just to load the app. My app isn't big though.

I use npm run ionic:build --aot and ionic run android --prod to run on device, and the initial time of starter app is about 2 second, but when I use my own project, it comes

Uncaught Error: Cannot find module "./app.module.ngfactory"

I have removed node_modules and www, but it doesn't work.
when I just run ionic run android, my project works but the initial time is about 7-8 seconds

here is my ionic info

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.6.0
Xcode version: Not installed

update
solved problem by downgrade typescript to "2.0.9"

Whatever I do, deviceready fires after 5 seconds.

All,

To give an update, we have made significant improvements to the framework itself to improve tree shaking and dead code removal. We have been experimenting with code splitting and closure compiler and have dramatically reduced the bundle size in those cases. Experimenting is the key word and it'll be a bit before we have anything ready for prime time. We are working very closely with the Angular team on this topic.

Closure Compiler is an amazing tool but it can break many 3rd party libs or even your own app if you don't follow the rules, so we're working on creating a simple yet robust and flexible developer experience around this.

Shrinking the bundle size, code splitting and improving launch speed is our #1 priority.

Thanks,
Dan

@danbucholtz thats great! I suggested closure compiler to Angular CLI team in past. May be a switch could be introduced making compilation using closure compiler optional. Those who have closure compiler friendly code that can enabled it, rest can compile it in a standard way. Ionic team could make sure core Ionic library and Ionic native is fully compatible with closure compiler. BTW would you like to share whats the best launch speed you are able to achieve with/out closure compiler?

http://hybridtonative.com, NativeScript is still immature, however it is getting more and more attractive as Ionic issues keep coming, open tickets persisting or growing and webview technology is just spinning around itself, forcing developers work on the technology instead of working with it. Even basic tasks demand huge amount of workarounds, issue digging, requiring a lot of code updating, following changes and updates leaving producion on a muddy base of never ending polishing which is actually bug fixing of bad design choices fixing other bad design choices. At the end of the day we are paying the price and its getting comparable to developing apps natively on both iOS and Android.

@barocsi hyperbole much? You do realize Angular 2 and ionic are on the cutting edge of the tech they're working with and they are working on finding the best possible course of action for us developers? Also keep in mind that v2 stable has not been released yet.

@barocsi If you're not glad with Ionic2 use Ionic1 or write your own angular application.
Even with your own angular application you gonna stumble across many issues which ionic solving in their framework already.
Also this framework is open source and you can contribute; if you got any problems with the speed they're working on it, or you could fork it and create your own ionic2-fork.
I don't want to argue or break something from the fence, even if Ionic2 has a release candidate it just came out from the beta release cyclus.
So please give it some time, and if you cant wait take ionic1 and use crosswalk, which has already set some years in this market

Thanks for the suggestions, I am wondering around alternatives for current and future decisions. We already have some robust and heavy Ionic V1 and V2 apps along with and almost 1.5 years of struggling and contributing with issues all over this github repo. Even though this is a pro-ionic thread we must anticipate where this technology is heading, even is something is tagged as cutting edge by @dylanvdmerwe it does not mean it will be subject to persistence by the community and must be honestly evaluated treated with patience as we do, this thread is almost 6 months old, still dealing with an essential and production critical problem.

I can understand your concerns, thats why I used plain angularjs within my own heavy application.
The problem is, that I still stumbled across many issues, because if you're not writing everything yourself or from scratch you'll get there sooner or later.
I had big problems with Angular-Material V1 (performance e.g.) and I needed to dig into the framework myself, the rest was written myself in angularjs.
But even there I came to the point where performance issues popped up.
So I needed to spent time on my "own" framework to find and try to fix them.
So I can understand Ionic with their problems, because I fell in these problems myself.
Even if they are a big/bigger company they also have limited resources.

The next thing is that Ionic2 isn't just an APP, it also provides a website, it also supports UWP (and thats a lot of pain) and also it supports PWA.
So many new features in one framework, that is mostly used for Apps, but supports many other things aswell.
With this features there comes a lot of dependencies and much problems when digging into them.
But you're concerns are eligible, but I rather see the problems in the complete new technology which was thrown on the market and Ionic tries to grab into them and gets a lot of dependencies with it.

@danbucholtz

Dan, extremely encouraged by your comments re 'experimenting' on code splitting, closure compiler, tree shaking and that launch speed is the current #1 priority for ionic2 (4th Jan). The example ionic2 conference app off Github is a good simple benchmark app that all can use to compare your progress. Hope your work progresses well (and rapidly). Really need a startup time of <=3 secs these days or users are likely to 'go away' - over 6 secs and they definitely 'go away' for good.

Built using --prod and launched on my Nexus 7 (2013) Android 6.0.1 the conference app is currently taking ~8 secs to launch (average timed by stop watch over several launches).

So, still quite a way to go, here's wishing you every success !!! - especially as I really like the structure and facilities provided by ionic2 from an experienced developer's point of view.

Phil

@barocsi I can understand your situation and in the moment it's really very disappointing for me as well.
To sum it up: My app project must run on Android, iOS and Win10 (desktop) and needs to start quickly, 2 sec are max - even on older (means 2 year) devices.
I want to write in JS and HTML, due to a lot of libs and experience. This narrows down the field to WebView apps instead of native (Java, Obj C) ones.
I need certain HW access, so Cordova is a good choice. NativeScript, Appcelerator, OnsenUI w/o ng2 ... may be, but I don't like the idea at all.

In the moment I blame ng2 for this huge code size and I'm not sure if proper treeshaking and closure compiler will reduce the startup time significantly (factor 4-5 necessary) on a bigger project. We need to wait and see...

@mpaland Have you already used Ionic1?
I realy would like to see how you get a 2 sec startup time - even on older devices.
My custom project without ionic1 need also a startup time of about 3 seconds and here I go with:

1. index.html
2. min.css
3. min.js

And thats it.

Did you already accomplished such a fast loadtime with cordova (angular,etc)?

@graphefruit , no I didn't try Ionic 1 and I haven't tried anything else yet, cause I found Ionic 2 best suited for my project. As I said, I'm just evaluating the different options. A WebView with JS is IMHO still _my_ best option. So I'm looking forward for the ng and ionic team making progress.

@graphefruit
I really hope ionic2 does finally achieve a <=3 secs startup, even on older devices. I can already achieve that with another hybrid framework + cordova 'out of the box'. However, I would much prefer to use ionic2 as it has a such good pedigree being built on angular2, which in turn, gives it great support, documentation, facilities, etc - all the things an experienced developer like myself values highly.

@philrob Extremely curious which other Hybrid Framework + Cordova (incl. everything you would need for your project) brings you under 3 seconds. Please do tell.

lordgreg
Not really an appropriate place for introducing other frameworks. I just am hoping that the ionic2 team can achieve a significant reduction in launch time that brings it closer to my aspiration of <=3 secs.

Hi
My ionic2 application takes still 10 sec to launch.but ionic1 application takes only 4 sec.how to improve the initial loading time.please suggest me.this is very critical

@philrob Seriously, checking other comments, you would fast notice there's always comparisons. Heck, even this thread has them. What you are stating is not a lie, but explaining that your hybrid app which runs nothing more than jQuery (example) inside Cordova container opens in less than 3 seconds is total absurd. Using the framework which doesn't handle styling or is not at least so complex as Ionic is, or it doesn't rely on any other huge library (angular2) is like comparing night & day. It doesn't make sense.

@mobinius-shreesha run the project as ionic build android --prod or ionic run android --prod to get the launch time as 5 seconds. running in debug mode ionic run android will increase the time to more than 10 seconds

lordgreg

Don't think we disagree. That's why I deliberately chose to use ionic2's conference app from Github (built with --prod) to give my launch timing (~8 secs) specifically for my Nexus 7 (2013) Android 6.0.1. Clearly if another framework can achieve a faster launch time on the same equipment and still provide the facilities I need (including styled UI mobile widgets) then FOR ME its relevant,

I REPEAT - I like really ionic2 for all the other important reasons I gave before, just want to see the launch speed significantly improved. Think we need to give the ionic2 team the time they need ...

I also look forward for increasing boot time.

I think the Ionic team has done an awesome job with their release of v1 of ionic-app-scripts last week. This improved build time massively here in my environment.

I am sure they will do the same with app boot time.

I think the problem lies elsewhere: ionic v2 is in rc state. That is what most developers must respect, however: on the Ionic team side ionic documentation suggests for any newcomer that v2 is something that is production ready. Do not object it is the case. Even the docs are now defaulting to v2.

This deceptive behavior from the team voluntary or not is kind of the result from the pressure from the industry. Ionics sole durvival depends on laying out something advanced that has a large dev base (js+angular2) before the community switches to a different emerging cross platform technology, for example the one mentioned by me before: Nativescript

So the Ionic teem must suggest v2 is the de facto version for Ionic. But the price tag can be higher in this case: rolling out a product with critical parts in errors with no asap fixes yields to distrust from the community that is sometimes more dangerous than waiting a couple of months more before positioning the product as a cutting edge mature major upgrade.

Developers must produce and each step back or lack of fixes will make them turn to other solutions to hedge their own future and stability towards their clients.

Any updates on this? :)

@PrithiviRajG Thanks for your answer.i am able launch the app within 10 sec.but is there any updates on ionic2 to improve booting time.when they are planning to release full version of ionic2.do you have any idea.

14.99 seconds cold boot with the current plugins installed and current ionic version:

com-badrit-base64 0.2.0 "Base64"
com.synconset.imagepicker 2.1.7 "ImagePicker"
cordova-plugin-camera 2.3.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 1.3.1 "Notification"
cordova-plugin-nativestorage 2.2.0 "NativeStorage"
cordova-plugin-secure-storage 2.6.3 "SecureStorage"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2.1 Build version 8C1002

@tryadelion current ionic version is rc4, not rc1.

Everyone, let's wait for RC5 or release as there should be a lot of changes regards this.

how do i force an ionic update to rc4? is there any other outdated thing that might be causing my delay?

For me a complex project in ionic v1 was 1.8MB build.js, with v2 a basic project main.js goes up over 6.7MB.
Adding or removing cordova plugins not neccessarily affecting boot time.

Hi everyone! We're going to close this issue and lock the thread for now. At this point, we've been doing a lot of work on improving load times, framework speed, and making it work everywhere.

This is always going to be a moving target, and something we constantly think about. While this issue at first was helpful, it has since derailed and is no longer a clear issue to follow. If you have any other issues, please open a new one, with all the information that we ask for.