ReactNaive分包方法

ReactNaive分包方法

RN中，发布js代码时，会打包成jsbundle形式。随着业务的增大，jsbundle体积也会逐渐增大，特别是多Module场景下，会生成多个jsbundle（包含相同的基础）。不仅增加APP、热更新包体积，也对jsbundle的加载效率造成很大影响。针对jsbundle的拆包，成为集成RN必须考虑的问题。

拆包目的

• 解决jsbundle体积过大
• 按需分步加载，提高加载效率
• 减少热更新包文件大小

react-native bundle 命令

react-native bundle是RN的将js代码打包成jsbundle命令。具体使用方式不再赘述，可以通过react-native bundle -help查看。对index.js进行打包，执行：

react-native bundle --entry-file ./index.js --dev false --bundle-output index.jsbundle --bundle-encoding utf-8 --platform "ios" 

以index.js为入口，将index.js以及dependence文件打包，在当前目录生成index.jsbundle。分析index.jsbundle文件(删减后)：

// header：各依赖模块引用部分
var __DEV__=false,__BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),process=this.process||{};process.env=process.env||{};process.env.NODE_ENV='production';
// body：入口模块和各业务模块定义部分
__d(function(e,r,a,i,l){var n=r(l[0]);babelHelpers.interopRequireDefault(n);r(l[1])},11,[12,17]);
// footer：入口模块注册部分
require(11);

生成的jsbundle基本分成3个部分：

• 头部：全局定义，主要是define，require等全局模块的定义
• 中部：模块定义，RN框架和业务的各个模块定义
• 尾部：引擎初始化和入口函数执行

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

__d(function(t,r,s,c){"use strict";var e=r(31);s.exports=e},30);

一个js文件就一片段__d定义，一个图片也会用__d定义

针对不同模块的入口js文件打包，将生成不同jsbundle对比，可以发现：

• jsbundle的头部相同
• 中部很多模块的定义存在大量重复
• 如果模块js中AppRegistry.registerComponent，尾部的入口模块id基本相同，如上例中的require(11)
  实际上头部和中部重复的模块占用了500K的大小（RN框架js），每个入口js生成的jsbundle都会包含这500K代码。

拆包方案

对RN的bundle命令有了解，我们可以理清一个思路：将共通基础部分的模块define与具体的业务模块define分拆，避免重复写入jsbundle。
基于这个思路，有几种主流方案：

1. diff and patch。将jsbundle通过diff，生成common和每个业务的patch包，然后在APP运行时对common和patch合并成执行的jsbundle。
2. 修改RN的bundle命令打包流程，使得直接生成common+business包
3. 修改RN的unbundle命令，生成common+business包

上面这3种方法本人觉得使用不方便，而且繁琐，需要了解的同学可以见繁琐的分包方案

这里给大家介绍一个十分方便的分包方案，一个命令就妥妥的。

三方命令分包

1. 需要安装rnpackager bundle命令

Install

$ npm install rn-packager -g

rnpackager使用简介见

http://npm.taobao.org/package/ak-rn-packager

https://github.com/react-component/rn-packager

2. 打对应的核心包（core.ios.jsbundle/core.andoid.jsbundle）

React-Native 0.33.0—iOS

rnpackager bundle --entry-file  node_modules/react-native/Libraries/react-native/react-native.js  --platform ios --bundle-output core.ios.jsbundle  --dev false --reset-cache --manifest-output core.ios.manifest.json

React-Native 0.48.0—iOS

rnpackager bundle --entry-file  node_modules/react-native/Libraries/react-native/react-native-implementation.js  --platform ios --bundle-output core.ios.jsbundle  --dev false --reset-cache --manifest-output core.ios.manifest.json

React-Native 0.48.0—android

rnpackager bundle --entry-file  node_modules/react-native/Libraries/react-native/react-native-implementation.js  --platform android --bundle-output core.android.jsbundle  --dev false --reset-cache --manifest-output core.android.manifest.json

3. 打业务包

这里的业务包指某个业务js为入口需要的其它业务js和图片js，不会把RN框架js打入的哟。
下面只做iOS介绍，安卓差不多，这需要用到第二步中生成的core.ios.manifest.json 文件

React-Native 0.33.0—iOS

rnpackager bundle --entry-file  index.ios.js  --platform ios --bundle-output ./SelfCheckout/iOS/selfcheckout.jsbundle --assets-dest  ./SelfCheckout/iOS --dev false --reset-cache  --manifest-file core.ios.manifest.json

React-Native 0.48.0—iOS

rnpackager bundle --entry-file  index.ios.js  --platform ios --bundle-output ./SelfCheckout/iOS/selfcheckout.jsbundle --assets-dest  ./SelfCheckout/iOS --dev false --reset-cache  --manifest-file core.ios.manifest.json

通过设置不同的--entry-file 入口文件就可以打不同的业务js包哟

对应的打包案例文件
案例文件