ReactNative数据直出方案

常见的 RN 动态下发性能优化手段有:

• common 包内置客户端,业务包动态下发;
• bundle 体积优化;
• RN 数据直出(首屏数据和 bundle 一起下发);
• 利用 QUIC 优化下载时间;
• 客户端缓存;
• 预下载 bundle;
• bundle diff;
• 等等

为什么要做直出？

直出一个比较重要的思想是将资源文件和首屏数据直接下发给用户，减少用户打开页面时对 api 进行请求；优化首屏速度；

一般来讲后端服务请求数据，走的是内网服务会比外网更快，且客户端不同用户的设备性能不同请求api耗时也不尽相同;如果统一使用SSR，那么对于首屏性能将会有所优化；

本文主要介绍如何进行如何将首屏数据和 bundle 一起下发。

数据直出的核心思想是:预留标识位，拦截首屏请求，koa 服务请求，替换标识位数据

1. 代码编写阶段

// 预留标识位
window.__initialStateHolder = "__RN_STATE_PLACEHOLDER__";

// 预留state
this.store = createStore(
  combineReducers(reducer),
  window.__initialStateHolder || {},
  applyMiddleware.apply(null, middlewares)
);

// 拦截首屏请求
if (
  window &&
  window.__initialStateHolder &&
  window.__initialStateHolder.realData
) {
  return;
}
// RN真实的请求服务数据
this.props.fetchData();

2. SSR 阶段

const Koa = require("koa");
const app = new Koa();

app.use(async (ctx) => {
  const iosJSBundle = require(`./bundle/android.business.bundle`);
  ctx.isEnd = true;
  // 此处的state为koa请求的首屏数据
  ctx.body = iosJSBundle.replace(
    `__RN_STATE_PLACEHOLDER__`,
    JSON.stringify(state)
  );
});

app.listen(3000);

此处只是做一个简单的 demo，真实情况需要处理各种情况，比如根据不同的用户加载不同的 bundle，根据不同的平台加载不同的 bundle 等等