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等全局?？榈亩ㄒ?/li>
- 中部：?？槎ㄒ?，RN框架和业务的各个模块定义
- 尾部：引擎初始化和入口函数执行
__d是RN自定义的define，__d后面的数字是?？榈膇d，是在RN打包过程中，解析依赖关系，自增长生成。__d结构：
__d(function(t,r,s,c){"use strict";var e=r(31);s.exports=e},30);
一个js文件就一片段__d定义，一个图片也会用__d定义
针对不同?？榈娜肟趈s文件打包，将生成不同jsbundle对比，可以发现：
- jsbundle的头部相同
- 中部很多?？榈亩ㄒ宕嬖诖罅恐馗?/li>
- 如果?？閖s中AppRegistry.registerComponent，尾部的入口?？閕d基本相同，如上例中的require(11)
实际上头部和中部重复的?？檎加昧?00K的大?。≧N框架js），每个入口js生成的jsbundle都会包含这500K代码。
拆包方案
对RN的bundle命令有了解，我们可以理清一个思路：将共通基础部分的模块define与具体的业务?？閐efine分拆，避免重复写入jsbundle。
基于这个思路，有几种主流方案：
- diff and patch。将jsbundle通过diff，生成common和每个业务的patch包，然后在APP运行时对common和patch合并成执行的jsbundle。
- 修改RN的bundle命令打包流程，使得直接生成common+business包
- 修改RN的unbundle命令，生成common+business包
上面这3种方法本人觉得使用不方便，而且繁琐，需要了解的同学可以见繁琐的分包方案
这里给大家介绍一个十分方便的分包方案，一个命令就妥妥的。
三方命令分包
- 需要安装rnpackager bundle命令
Install
$ npm install rn-packager -g
rnpackager使用简介见
http://npm.taobao.org/package/ak-rn-packager
https://github.com/react-component/rn-packager
- 打对应的核心包（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
- 打业务包
这里的业务包指某个业务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包哟
对应的打包案例文件
案例文件
