使用 React Native 开发混合应用的过程中，我们在打完 bundle 进 release 包后，会发现第一次进入页面（React 的 Activity）会有一个短暂的白屏过程（在真机上近 1秒，在模拟器上比较快，在 200毫秒 左右），而且在完全退出后再进入，仍然会有这个白屏。
仔细查看加载过程（其实猜猜都能知道）后可以发现，这个过程就是在加载我们的 js bundle，通常即便是一个小的 RN 应用（混合应用中的子业务），也会动辄到 1MB 的大小，除非是完整的 RN 应用，可以把这个当做是启动速度，否则这样的加载速度都是对用户体验的很大伤害。
于是我们决定进行 Bundle 预加载的优化。
项目源码上传在：markzhai/react-native-preloader，稍后会上传到 maven，版本号会和 rn 保持一致。
耗时操作
见 ReactActivity 的 onCreate 方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) { // Get permission to show redbox in dev builds. if (!Settings.canDrawOverlays(this)) { Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION); startActivity(serviceIntent); FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE); Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show(); } } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), getMainComponentName(), getLaunchOptions()); setContentView(mReactRootView); mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer(); } |
打点后可以发现耗时的其实是
- createRootView();
- startReactApplication();
这两个操作，所以考虑只需要提前创建 ReactRootView 进行 render，之后直接挂载该 view 上去即可。
预加载
创建预加载类 ReactPreLoader：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/** * React Native Bundle Pre-loader. * * @author markzhai on 16/8/20 * @version 1.3.0 */ public class ReactPreLoader { private static final String TAG = "ReactPreLoader"; private static final Map<String, ReactRootView> CACHE_VIEW_MAP = new ArrayMap<>(); /** * Get {<a href="http://www.jobbole.com/members/57845349">@link</a> ReactRootView} with corresponding {<a href="http://www.jobbole.com/members/57845349">@link</a> ReactInfo}. */ public static ReactRootView getRootView(ReactInfo reactInfo) { return CACHE_VIEW_MAP.get(reactInfo.getMainComponentName()); } /** * Pre-load {<a href="http://www.jobbole.com/members/57845349">@link</a> ReactRootView} to local {<a href="http://www.jobbole.com/members/57845349">@link</a> Map}, you may want to * load it in previous activity. */ public static void init(Activity activity, ReactInfo reactInfo) { if (CACHE_VIEW_MAP.get(reactInfo.getMainComponentName()) != null) { return; } ReactRootView rootView = new ReactRootView(activity); rootView.startReactApplication( ((ReactApplication) activity.getApplication()).getReactNativeHost().getReactInstanceManager(), reactInfo.getMainComponentName(), reactInfo.getLaunchOptions()); CACHE_VIEW_MAP.put(reactInfo.getMainComponentName(), rootView); strong>1秒，在模拟器上比较快，在 200毫秒 左右），而且在完全退出后再进入，仍然会有这个白屏。
仔细查看加载过程（其实猜猜都能知道）后可以发现，这个过程就是在加载我们的 js bundle，通常即便是一个小的 RN 应用（混合应用中的子业务），也会动辄到 1MB 的大小，除非是完整的 RN 应用，可以把这个当做是启动速度，否则这样的加载速度都是对用户体验的很大伤害。 于是我们决定进行 Bundle 预加载的优化。 项目源码上传在：markzhai/react-native-preloader，稍后会上传到 maven，版本号会和 rn 保持一致。 耗时操作见
打点后可以发现耗时的其实是
这两个操作，所以考虑只需要提前创建 预加载创建预加载类
|
