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 保持一致。 耗时操作见 @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();
}
打点后可以发现耗时的其实是 这两个操作,所以考虑只需要提前创建 预加载创建预加载类 /** * 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 缓存在本地的 值得注意的是 使用预加载的 view使用预加载的 View,就需要侵入 activity 的创建过程,我们无法再使用 RN 库提供的 /** * 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,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(),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 调用: ReactPreLoader.init(this,ReactCardActivity.reactInfo);
ReactCardActivity 继承我们自己的 ReactActivity: 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;
}
}
优化后可以达到瞬间加载。 已知的坑由于进行了预加载,目前已知的问题是
见 issue 9496 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 基于vue-cli 打包时抽离项目相关配置文件详解
- c – 如何避免重复初始化.mex(matlab编译代码)?
- c# – 构造函数中的枚举 – 如何?
- Cocos2dx BlendFunc以及用其来实现裁切出不同形状的精灵
- React Native 之Text 在字符串中插入图像
- 【Cocos2d-x】Cocos2d-x精灵的性能优化
- ruby-on-rails – 如何告诉TextMate在“转到文件”中忽略我
- 68.You are managing an Oracle Database 11g database. Yo
- Xcode 6.1 GM Seed的自动完成总是终止
- wolfram-mathematica – 时间有效的部分倒置指数建设