Standalone app takes too long on splash screen

Expo SDK
1

I know, that the javascript bundle and assets which we are cashing are all done on the SplashScreen.
I tried using the stuff posted on this expo doc
Which I think is the stuff needed to make the app work when the app is offline.

But, is there a way to speed up the process, like ‘minify the build content’ provided by Expo?
Tried searching for this, couldn’t find if something by expo is given but react-native provides the minify option on build.

I also tried updates.enabled = false, which seems to be not helping on android( should still check on iOS if this helped)

In reference to performance, the splashscreen is taking more than couple of seconds (few instances even 10-20 secs) when we first install the app, but improves on the later usage of the app.( which might be because of the caching of assets)

Identified this on:
“expo”: “^30.0.0”,
“react”: “16.3.1”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz”,

2

Hey @spusapati,

The bundle you publish is minified already. If you already did the asset bundling, I’m not sure if there’s much else you can do to speed up the process. Are you testing on the same network?

Cheers,

Adam

3

what do you do in your app before you unmount the AppLoading component? you mention asset caching, why not bundle all of those assets rather than cache them with Asset loadAsync?

1 Like
4

Yes, I am using the same network.But I don’t think it matters on a stand alone app.

5

kk, I tried bundling my assets folder just to be sure in my app.json

"assetBundlePatterns": [
        "assets/*"
      ],

which did improve my first time splash screen experience significantly.

But on a side not, the concern is the javascript bundle which keeps loading in the background scene every-time I open the app, is there a way I can counter this as seen in the image below?

41
41640×1136 16.2 KB

6

Hey @spusapati,

Setting updates.checkAutomatically to "ON_ERROR_RECOVERY" in app.json will prevent Expo from automatically fetching the latest update every time your app is launched.

7

I’m facing a similar issue, where the app is usually taking 5-10seconds on the splash screen alone. I’m unclear why this is happening, and what exactly is happening that is taking so long.

All I do is cacheFonts on the AppLoading screen. All my images are in the ./assets/ directory, which should be included in the binary. I opened the .ipa file and I can see the image present there, so that seems to work as expected.

I also set fallbackToCacheTimeout to 0 so (if I understand it correctly) the app loading shouldn’t block on loading the javascript bundle, but instead simply load it asynchronously in the background for the next time the app is loaded.

I copied all the relevant App.js and app.json sections below for reference.

It’s difficult to test out changes much for this because I need to load a new build with the AppStore each time. If anyone has any suggestions to reduce splash screen time, that’d be super helpful.

Also, I have done the suggestions for “Offline Support”, but that doesn’t seem to help anymore.

QUESTION: Do all package.json packages get included in the binary as well? I would assume so, but wasn’t sure if that could be a reason why it’s taking so long. (I’m using react, react-native, redux relevant packages, expo, sentry-expo, react-native-elements, and a few others).

(NOTE: I do have Sentry installed. Maybe that is what is causing an issue with “Offline Support”? I’m going to check if Sentry (sentry-expo) is what is taking the SplashScreen to take so long. Will update if that is the issue.)

Running: (same as the initial post on this thread)
“expo”: “^30.0.0”,
“react”: “16.3.1”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz”,

app.json:

{
  "expo": {
    ...,
    "splash": { "backgroundColor" "#ffffff", "resizeMode": "contain", "image": "./assets/SplashImage.png" },
    "assetBundlePatterns": [ "./assets/**" ],
    "updates": { "enabled": true, "checkAutomatically": "ON_LOAD", "fallbackToCacheTimeout": 0 }
  }
}

App.js:

Sentry.config(SENTRY_DSN).install();

const cacheFonts = (fonts) => {
  return fonts.map(font => Expo.Font.loadAsync(font));
}

export default class App extends React.component {
  constructor(props) {
    super(props);
    this.state = { isReady: false }
  }
  async loadAssetsAsync() {
    const fontAssets = cacheFonts([ Ionicons.font ]);
    await Promise.all([...fontAssets]);
  }
  render() {
    if (!this.state.isReady) {
      return (
        <Expo.AppLoading
          startAsync={ this.loadAssetsAsync }
          onFinish={() => this.setState({ isReady: true }) }
          onError={ console.warn }
        />
      );
    }
    return (
       <MyMainAppView />
    );
  }
}
8

Update:
after removing Sentry.config(SENTRY_DSN).install();, the app load time appears to have dropped from 5-10 seconds to 3-8 seconds.
These load times are approximations of a small sample size of around 5 app loads.

HOWEVER, I would prefer to keep Sentry for this app. I followed the “Using Sentry” documentation to do it, but is there another way where I can do Sentry.config later in the setup process?

9

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.