[RN] React Native bundle拆分与合并之安卓篇

在网上看到携程之前拆分的一些经验

先来说一组数据，一个Helloorld的App，如果使用0.30 RN 官方命令react-native bundle打包出来的JSBundle文件大小大约为531KB，RN框架JavaScript本身占了530KB， zip压缩之后也有148KB。

如果只有一两个业务使用，这点大小算不了什么，但是对于我们这种动辄几十个业务的场景，如果每个业务的JSBundle都需要这么大的一个RN框架本身，那将是不可接受的。

因此，我们需要对RN官方的打包脚本做改造，将框架代码拆分出来，让所有业务使用一份框架代码。

开始拆分之前, 我们先以HelloWorld的RNApp为基础介绍几个背景知识。

上述是一个HelloWorld RNApp代码的结构，基本分为3部分

头部：各依赖模块引用部分；

中间：入口模块和各业务模块定义部分；

尾部：入口模块注册部分；

上述是HelloWorld RNApp打包之后JSBundle文件的结构，基本分为3部分 头部：全局定义，主要是define，require等全局模块的定义； 中间：模块定义，RN框架和业务的各个模块定义； 尾部：引擎初始化和入口函数执行；

__d是RN自定义的define，符合CommonJS规范，__d后面的数字是模块的id，是在RN打包过程中，解析依赖关系，自增长生成的。

如果所有业务代码，都遵照一个规则：入口JS文件首先require的都是react/react-native, 则打包生成的JSBundle里面react/react-native相关的模块id都是固定的。

拆分方案一

基于上面2点背景知识介绍，我们很容易发现，如果将打包之后的JSBundle文件，拆分成2部分(框架部分+业务模块部分)，使用的时候合并起来，然后去加载，即可实现拆分功能。

具体实现步骤：

创建一个空工程，入口文件只需要2行代码，require react/react-native即可；

使用react-native bundle命令，打包该入口文件，生成common.js;

使用react-native bundle打包业务工程(有一点要保证，业务工程入口文件前面2行代码也是require react/react-native), 生成business_all.js；

开发工具，从business_all.js里面删除common.js的内容，剩下的就是business.js;

App加载的时候将common.js和business.js合并在一起，然后加载；

貌似功能完成，可是回到Dive into React Native performance， 这么做还是优化不了JSBundle的执行时间，因为我们不能把拆分开的2个文件分别执行，因为加载common.js会提示找不到RNApp的入口，先执行business.js,会提示一堆依赖的RN模块找不到。

显然，这种拆分方式不能满足我们这种需要。

那这个方案就完全没有价值吗？不是的，如果你做的是一个纯RNApp，native只是一个壳，里面业务全是RN开发的，完全可以使用这种方式做拆分，这种方案简单，无侵入，实现成本低，不需要修改任何RN打包代码和RN Runtime代码。

拆分方案二

RN框架部分文件(common.js)大小530KB，如此大的js文件，占用了绝大部分的JS执行时间，这块时间如果能放到后台预先做完，进入业务也只需执行业务页面的几个JS文件，将可以大大提升页面加载速度，参考上面的RN性能瓶颈图，预估可以提升100%。

按照这个思路，能后台加载的JS文件, 实际上是就是一个RNApp，因此 我们设计了一个空白页面的FakeApp，这个FakeApp做一件事情，就是监听要显示的真实的业务JS模块，收到监听之后，渲染业务模块，显示页面。

FakeApp设计如下：

为了实现该拆包方案，需要改造react-native的打包命令；

基于FakeApp打common.js包的时候， 需要记录RN各个模块名和模块id之间的mapping关系；

打业务模块包的时候，判断，如果已经在mapping文件里面的模块，不要打包到业务包中

改造页面加载流程：

因为要能够后台加载，所以需分离UI和JS加载引擎;

进入业务RN页面时候，获取预加载好的JS引擎，然后发送消息给FakeApp，告知该渲染的业务JS模块；

通过后台预加载，省去了绝大部分的JS加载时间，似乎问题已经完美解决。

但是，如果随着业务不断膨胀，一个RN业务JS代码也达到500KB，进入这个业务页面，500多KB JS文件读取出来，执行，整个JS执行的时间瓶颈会再次出现。

拆分方案三

正在此时，我们研究RN在Facebook App里面的使用情况，发现了Unbundle，简单点说，就是将所有的JS模块都拆分成独立的文件。

下面截图就是unbundle打包的文件格式：

entry.js就是global部分定义+RNApp入口；

UNBUNDLE文件是用于标识这是一个unbundle包的flag；

12.js,13.js就是各个模块，文件名就是模块id；

在业务执行，需要加载模块(require)的时候，就去磁盘查找该文件，读取、执行。

RN里面加载模块流程说明,以require(66666)模块为例：

首先从__d<就是前文提到的define>的缓存列表里面查找是否有定义过模块66666，如果有，直接返回，如果没有走到下面第二步的nativeRequire；

nativeRequire根据模块id，查找文件所在路径，读取文件内容；

定义模块，_d(66666)＝eval(JS文件内容)，会将这个模块ID和JS代码执行结果记录在define的缓存列表里面；

打包通过react-native unbundle 命令，可以给android平台打出这样的unbundle包。

顺便提一下，这个unbundle方案，只在android上有效，打ios平台的unbundle包，是打不出来的，在RN的打包脚本上有一行注释，大致意思是在iOS上众多小文件读取，文件IO效率不够高，android上没这样的问题，然后判断如果是打iOS的unbundle包的时候，直接return了。

相对应的，iOS开发了一个prepack的打包模式，简单点说，就是把所有的JS模块打包到一个文件里面，打包成一个二进制文件，并固定0xFB0BD1E5为文件开始，这个二进制文件里面有个meta-table，记录各个模块在文件中的相对位置，在加载模块(require)的时候，通过fseek，找到相应的文件开始，读取，执行。

在Unbundle的启发下，我们修改打包工具，开发了CRNUnbunle，做了简单的优化，把众多零散的JS文件做了简单的合并。

将common部分的JS文件，合并成一个common_ios(android).js.

_crn_config记录了这个RNApp的入口模块ID以及其他配置信息，详见下图：

main_module为当前业务模块入口模块ID；

module_path为业务模块JS文件所在当前包的相对路径；

666666=0.js,说明666666这个模块在0.js文件里面；

做完这个拆包和加载优化之后，我们用自己的几个业务做了下测试，下图是当时的测试验证数据。

可以看出，iOS和android基本都比官方打包方式的加载时间，减少了50%。

这是自己单机测试的数据，那上线之后，数据如何呢？

下图，是我们分析一天的数据，得出的平均值<排除掉了5s以上的异常数据，后面实测下来5s以上数据极少>；

看到这个数据，发现和我们自己测试的基本一致，但是还有一个疑问，加载的时间分布，是否服从正态分布，会不会很离散，快的设备很快，慢的设备很慢呢？

然后我又进一步分析这一天的数据，按照页面加载时间区间分布统计。

看图上数据，很明显，iOS&Android基本一致，将近98%的用户都能在1s内加载完成页面，符合我们期望的正态分布，所以bundle拆分到此基本完成。

实践

我先用bundle打包命令打一个bundle出来

react-nativebundle --platform android --devfalse--entry-file index.android.js --bundle-output finalbundle/index.android.bundle --assets-dest finalbundle/

只有一个简单的3k左右的index.android.js,打出了一个五百多k的index.android.bundle，看看里面是些什么

密密麻麻但又有规则

!function打头的是公共的头部部分

_d(function是JS文件，用ctrl+s搜索welcome，找到我们的index.android.js,原来是在第一行的_d(function,而且结尾有个参数0，其余部分其实都是公共的js

;require(120)，是基础文件的配置入口，require（0）则是业务的入口

基于以上，能想到一个办法：

内置一个common.js文件，里面包含了bundle文件公共部分的代码，

业务代码单独生成一个js文件

在需要展示加载某一个页面的时，将common.js和当前页面需要加载的业务js合并，然后再加载

这个办法解决了一部分问题，但加载时还是一个整体。如果common部分能重用，就能大大提升效率。所以就来试试上面提到的unbundle命令

react-nativeunbundle --platform android --devfalse--entry-file index.android.js --bundle-output build/index.android.bundle

生成的bundle只有14行了

但多了一个js-modules文件夹，里面的xx.js里面的内容就是将之前的__d(xx)抽出来单独放到一个文件里面，通过require(xx)加载到内存供调用

基于unbundle命令再设计一个上面提到的fake页面用来加载相应的业务模块，这个页面可以预先在后台初始化js引擎，将公共部分的common.js文件读取到内存，然后设置一个监听事件，通过emmit方式，当需要加载某个页面的的module的时候讲这个页面的module的id传递过来，然后通过require方法调用这个模块。

思路差不多是这样了，来试试看实现起来有没什么坑。

首先

我拿例子跑了一下，瞬间明白了流程是怎么回事，有几个关键：

DeviceEventEmitter

前端发起监听，后端需要用的时候调用emit触发，通过返回模块id,然后return React.createElement(返回的模块ID,this.props)即可定制加载

配置文件

这个配置文件之前不是很理解为什么好多等于0.js、等于1.js,现在明白其实就是不同bu的入口JS,因为都是单页路由的形式，不过这个配置其实是一套打包的一个流程，不在这里做，以后研究打包工具的时候加上。

然后

我试着把这样融入到之前的demo里。

先建两个test页面，用于测试切换。

importReact, { Component }from'react';

import{

AppRegistry,

StyleSheet,

Text,

View,

}from'react-native';

classtesteightextendsComponent{

render() {

return(

Welcome to Test 8888

);

}

}

conststyles = StyleSheet.create({

welcome: {

fontSize:20,

textAlign:'center',

margin:10,

}

});

module.exports = testeight;

然后在index.android.js加入切换按钮

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

importReact, { Component }from'react';

import{

AppRegistry,

StyleSheet,

Text,

View,

Image,

NativeModules,

DeviceEventEmitter,

}from'react-native';

exportdefaultclassAwesomeProjectextendsComponent{

constructor(props){

super(props);

this.state = {

content:null,showModule:false

};

DeviceEventEmitter.addListener("test", (result) => {

letmainComponent =require(result.name);

this.setState({

content:mainComponent,

showModule:true

})

});

}

render() {

let_content =null;

if(this.state.content){

_content = React.createElement(this.state.content,this.props);

return_content;

}else{

return(

Welcome to React Native!

To get started, edit index.android.js

Double tap R on your keyboard to reload,{'\n'}

Shake or press menu button for dev menu

this.showToast()}>

点我调用原生

this.updateBundle()}>

点我更新bundle

this.goNine()}>

点我加载页面9999

this.goEight()}>

点我加载页面8888

source={require('./img/music_play.png')}

style={{width:92,height:92}}

/>

);

}

}

updateBundle () {

NativeModules.updateBundle.check("5.0.0");

}

showToast () {

//调用原生

NativeModules.RNToastAndroid.show('from native',100);

}

goNine () {

NativeModules.BundleLoad.goPage(9999);

}

goEight () {

NativeModules.BundleLoad.goPage(8888);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

AppRegistry.registerComponent('rnandnative', () => AwesomeProject);

然后把index.android和两个test页面都用unbundle打包

react-nativeunbundle --platform android --devfalse--entry-file index.android.js --bundle-output unbundle/index.android.bundle

react-nativeunbundle --platform android --devfalse--entry-file bundletest1.js --bundle-output unbundle/index.android.bundle1

react-nativeunbundle --platform android --devfalse--entry-file bundletest2.js --bundle-output unbundle/index.android.bundle2

然后把index.android.bundle1、index.android.bundle2中除了_d的那句打头的去掉,把__d(0的0改为9999、8888，把文件名改为9999.js和8888.js丢到js-modules里，这个讲的估计不是很明白，但去看看代码就懂了。

然后建一个触发emit的方法

public class RNBundleLoadModule extends ReactContextBaseJavaModule{

private ReactApplicationContext reactApplicationContext;

public RNBundleLoadModule(ReactApplicationContext reactApplicationContext){

super(reactApplicationContext);

}

@Override

public String  getName(){

return "BundleLoad";

}

@ReactMethod

public void goPage(final Integer pageid){

System.out.print("########"+pageid+"########");

// failedCallback.invoke();

WritableMap params = Arguments.createMap();

params.putInt("name", pageid);

reactApplicationContext

.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("test", params);

}

}

跑起来，一切OK。

参考

https://github.com/pukaicom/reactNativeBundleBreak