React Native 0.31 Bundle 预加载优化

最新推荐文章于 2017-05-14 11:35:06 发布

原创最新推荐文章于 2017-05-14 11:35:06 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了React Native应用启动时出现白屏的原因，并提供了一种解决方案：通过预加载技术来减少首次启动时的加载时间，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

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

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

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

项目源码上传在：markzhai/react-native-preloader ( https://github.com/markzhai/react-native-preloader)，稍后会上传到 maven，版本号会和 rn 保持一致。

耗时操作

见 ReactActivity 的 onCreate 方法：

打点后可以发现耗时的其实是

- createRootView();

- startReactApplication();

这两个操作，所以考虑只需要提前创建 ReactRootView 进行 render，之后直接挂载该 view 上去即可。

预加载

创建预加载类 ReactPreLoader：

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

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

使用预加载的 view

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

使用

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

“

ReactPreLoader.init(this, ReactDemoActivity.reactInfo);

ReactCardActivity 继承我们自己的 ReactActivity：

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

已知的坑

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

TimePickerAndroid 这类 picker 则没有问题。见 issue 9496( https://github.com/facebook/react-native/issues/9496)

作为规避方案，目前使用 MutableContextWrapper 进行 context 替换。见 GitHub 上的具体实现。

点击下方“阅读原文”查看更多

↓↓↓