拆包是React-Native项目不得不面临的一个重要技术门槛。
为什么要拆包？
bundle文件过大： 一个Helloworld的App，如果使用0.53RN 官方命令react-native bundle打包出来的JSBundle文件大小大约为530KB，RN依赖模块本身占了99.9%。
页面加载慢： 如果使用热更新，从网络获取整个包的下载时间很长，每次进入RN页面都需要执行RN基础模块的定义。
如果只是一个单独的新APP，纯RN的，或者只有一两个业务使用，这点大小算不了什么。
但是对于很多业务的公司项目，如果每个业务的JSBundle都需要这么大的一个RN框架，那将是没必要的。
Facebook官方有没有解决方案呢？
Facebook的打包工具是metro, metro自带unbundle命令，不过，打包结果不符合预期；
Android端是将每一个模块输出到单个文件并以模块ID命名；IOS端是将模块以流形式打到一个文件中；
方案
调研的方案可以分三类：
1.手动拆分&合并后再加载
使用RN打包工具打包，手动将文件分开分成基础包A.js, 业务包B.js;然后在APP加载该页面的时候将A,B两个文件合并再执行；
优点：成本低，不需要改打包工具；
缺点：性能没有提升，不能优化执行时间，反而会增加；
2.动态更新
可以从编译产物看到require(moduleID)；这个方案的思路是：编写一个空的React容器组件，利用DeviceEventEmitter监听一个Native事件，在需要加载页面时，Native下载将模块保存下来，以对应模块ID命名，然后通过DeviceEventEmitter对应模块的id发给React来调用require(msg.id),比如：
export default class App extends Component {
constructor(){
super();
this.state = {
dynamicModule : null
}
}
componentDidMount(){
DeviceEventEmitter.addListener('LoadBundle',(events) =>{
let moduleId = parseInt(events.moduleID, 10))
let dynamicModule = require(moduleId);
self.setState({ dynamicModule:dynamicModule });
});
}
render() {
const { dynamicModule } = this.state;
if (dynamicModule) {
return React.createElement(dynamicModule, this.props);
} else {
return (
<View><Text>空空的容器</Text></View>
);
}
}
}
但是在编译前使用require(moduleID)会报错，因为编译前根本就未生成模块Id，所以需要改动打包工具。
优点：性能好，能优化执行时间, 加载时只是执行了React容器组件的render()方法；
缺点：成本很大，需要修改Naive的RN源码来重写require方法，android在unbundle调用的是assets目录下，不能通过网络动态获取，而且需要改打包工具。
3.动态执行
将bundle分为两部分，在内存中先执行基础模块的定义，然后再需要打开页面时，执行该页面的业务模块文件；
优点：性能好，能优化执行时间；
缺点：成本大, 需要改Native加载方式，打包工具也许修改。
Rabbit-bundler是按照此方案实现的打包工具。
具体请参考：Rabbit-bundler介绍
