React Native - Improves Cold Start Time

Question

The project I was working on should use the native response to create an iOS application.

Below is the cold start time in the iPhone 5S release

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 waiting for the library to load the js package (2.2MB). Is loading time normal? How can I improve js bundle boot time? Many thanks.

Reducing the size of the js package can improve the time since launching the javascript application. For the new Hello World project, it took only 0.18-0.19 seconds (iPhone 5S).

Answer 1

The time for you depends only on you and your users of the application =)

Obviously, if reducing the size of the js package improves time, you should do everything you can to do this. I think there are several steps that can help you:

• first of all, DRY: doubling the code increases the size
• check the use of npm packages, remove unused ones (as well as unused internal modules)
• obfuscate and minimize the package with third-party tools

This should also be done to reduce initialization complexity.

• check the asymptotic complexity of your algorithms - this can lead to an increase in time
• delete unused variables, functions and data - this may cause excessive memory usage

And I can just advise you to also try to influence not only the actual time, but also the sense of time. For example, use animated screensavers.

Answer 2

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

In this case, you will not download the entire js package - you will download only the part that you need at startup (in many applications there are many places that the user may not even see, and this function allows you to download such parts only when they are required) . This way you can simplify your entry point and download only a small piece of your bundle.

You can look at response-native-bundle-splitter . This library is well integrated with almost all popular navigation libraries and allows you to delay the loading of certain routes. For example, if you have a login screen, you can download only this screen at startup, and download all the others in the background, or start downloading them only when the user can see them. And the launch time of your complex application will be almost the same as for the Hello world application.