How to optimize the loading time of an Ionic2 project?

Asked

Viewed 1,005 times

1

I made an application with Ionic2 from scratch, using by default the project "Blank" following the documentation.

The project itself is running smoothly.

But one thing that intrigues me a little is the load time on startup of the application.

Although I am showing a Splashscreen while loading the Cordova is performed, it is taking on average 10 seconds (in some simulations reached 15 Seconds) to finish loading.

After finishing loading I close the Splashscreen in the event fired:

platform.ready().then(() => {

  statusBar.styleDefault();
  splashScreen.hide();

});

My config.xml is splashscreen enabled, but if I take the splash, the application is on white screen (as it is not finished loading yet).

Config.xml

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreenSpinner" value="true" />
<feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
<plugin name="cordova-plugin-whitelist" spec="1.3.1" />
<plugin name="cordova-plugin-console" spec="1.0.5" />
<plugin name="cordova-plugin-statusbar" spec="2.2.1" />
<plugin name="cordova-plugin-device" spec="1.1.4" />
<plugin name="cordova-sqlite-storage" spec="~2.0.2" />

Console of charging time

Ionic Native: deviceready event fired after 9833 ms 
Ionic Native: deviceready event fired after 10285 ms 

Based on that, I have the following questions:

Is there any way to decrease charging time?

Are there any settings/settings that allow the application to launch directly without this prior loading?

If time is needed, there is some way to start part of the application and let the loading take place in the background?

  • Very wide! You can have N reasons. Take a look over lazy loading in v3

  • @Marcelodern my doubt would be with the base application of Ionic for example, in any of the options of standard app(Blank, tabs, sidemenu) Ionic, this problem already occurs, why it takes so long to boot?

  • Does this happen to any new project of yours? If so, reinstall the Ionic/Cordova npm Packages and update them.

  • @Marcelodeandrade already did this, I did even today and the initial loading time of a Blank or sidemenu project (the ones I tested) continue longer than 9 seconds.

  • Mine starts at 1482 ms and you can see that I have already installed more than 10 plugins. Take a look at this link https://blog.khophi.co/optimize-ionic-2-app-production/ . Setting enableProdMode(); and the --Prod flag makes a lot of difference. Give a read

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.