使用 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); } /** * Remove {<a href="http://www.jobbole.com/members/57845349">@link</a> 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 提供的方案）。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
