React Native 0.31 Bundle 预加载优化

使用 React Native 开发混合应用的过程中,我们在打完 bundle 进 release 包后,会发现第一次进入页面(React 的 Activity)会有一个短暂的白屏过程(在真机上近 1秒,在模拟器上比较快,在 200毫秒 左右),而且在完全退出后再进入,仍然会有这个白屏。

仔细查看加载过程(其实猜猜都能知道)后可以发现,这个过程就是在加载我们的 js bundle,通常即便是一个小的 RN 应用(混合应用中的子业务),也会动辄到 1MB 的大小,除非是完整的 RN 应用,可以把这个当做是启动速度,否则这样的加载速度都是对用户体验的很大伤害。

于是我们决定进行 Bundle 预加载的优化。

项目源码上传在:markzhai/react-native-preloader,稍后会上传到 maven,版本号会和 rn 保持一致。

耗时操作

ReactActivityonCreate 方法:

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 {@link ReactRootView} with corresponding {@link ReactInfo}.
*/
public static ReactRootView getRootView(ReactInfo reactInfo) {
return CACHE_VIEW_MAP.get(reactInfo.getMainComponentName());
}

/**
* Pre-load {@link ReactRootView} to local {@link 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);
}

/**
* Remove {@link ReactRootView} from parent.
*/
public static void onDestroy(ReactInfo reactInfo) {
try {
ReactRootView rootView = getRootView(reactInfo);
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null) {
parent.removeView(rootView);
}
} catch (Throwable e) {
Logger.e(TAG, e);
}
}
}

在 init 操作中,我们通过 ReactInfo 缓存把 view 缓存在本地的 ArrayMap

值得注意的是 onDestroy,在 ReactActivity 销毁后,我们需要把 view 从 parent 上卸载下来。

使用预加载的 view

使用预加载的 View,就需要侵入 activity 的创建过程,我们无法再使用 RN 库提供的 ReactActivity,只能建立自己的,以下列出修改的方法,其他方法照抄 ReactActivity

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
52
53
54
55
56
57
/**
* Base Activity for React Native applications.
*
* @author markzhai on 16/7/28
* @version 1.3.0
*/
public abstract class MrReactActivity extends Activity
implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {

@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 = ReactPreLoader.getRootView(getReactInfo());

if (mReactRootView != null) {
Logger.i(TAG, "use pre-load view");
} else {
Logger.i(TAG, "createRootView");
mReactRootView = createRootView();
if (mReactRootView != null) {
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
getMainComponentName(),
getLaunchOptions());
}
}

setContentView(mReactRootView);

mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
}

@Override
protected void onDestroy() {
super.onDestroy();

if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
mReactRootView = null;
ReactPreLoader.onDestroy(getReactInfo());
}
// getReactNativeHost().clear();
}

public abstract ReactInfo getReactInfo();
}

使用

在进入该 RN activity 的上一个 activity 调用:

1
ReactPreLoader.init(this, ReactCardActivity.reactInfo);

ReactCardActivity 继承我们自己的 ReactActivity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ReactCardActivity extends MrReactActivity {

public static final ReactInfo reactInfo = new ReactInfo("card", null);

@Override
protected String getMainComponentName() {
return reactInfo.getMainComponentName();
}

@Override
public ReactInfo getReactInfo() {
return reactInfo;
}
}

优化后可以达到瞬间加载。

已知的坑

由于进行了预加载,目前已知的问题是 Modal 无法显示 —— 因为 Modal 在 Android 的实现使用了 Dialog,而该 View 将创建 ReactRootView 的 context 作为参数传给了 Dialog,而不是实际运行时所在的 Activity context。查看源码可以验证(com.facebook.react.views.modal)。

TimePickerAndroid 这类 picker 则没有问题。见 issue 9496

作为规避方案,目前使用 MutableContextWrapper 进行 context 替换。见 GitHub 上的具体实现(感谢评论里的 Lovecraft 提供的方案)。

坚持原创技术分享,您的支持将鼓励我继续创作!