React Native - Improve cold start time

Question

The project I was working is to use react native to create an iOS app.

Following is the cold start time in iPhone 5S release build

Pre-main time: 0.52 seconds

App did launch to javascript did load time: 2.12 seconds

JS render time: 0.74 seconds

Total time: 3.34 seconds

The slowest part is to wait react library to load the js bundle (2.2MB). Is the loading time looks normal? How can I improve the js bundle loading time? Thanks so much.

Reducing the js bundle size can improve the time from Application did launch to javascript did load. For a new Hello World project, it only took 0.18-0.19 seconds (iPhone 5S).

Answer 1

Yes, the problem that you described really exist. As a possible solution you can use ram-bundle format, that metro bundler provides.

In this case you will not load the entire js-bundle - you will load only part, that you need at a startup (in a lot of application are a lot of places, which user may not even see, and this feature allow you load such parts, only when they are required). So you can simplify your entry point and load only small piece of your bundle.

You can look at react-native-bundle-splitter. This library well integrated with almost all popular navigation libraries and allows you to postpone a loading of specific routes. For example, if you have a login screen, you can load at start up only this screen, and all others load in background or start the loading of them, only when user can see them. And the startup time of your complex application will be almost equally as for "Hello world" application.