React native 拆包

拆包是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 (
        空空的容器
      );
    }
  }
}

但是在编译前使用require(moduleID)会报错，因为编译前根本就未生成模块Id，所以需要改动打包工具。
优点：性能好，能优化执行时间, 加载时只是执行了React容器组件的render()方法；
缺点：成本很大，需要修改Naive的RN源码来重写require方法，android在unbundle调用的是assets目录下，不能通过网络动态获取，而且需要改打包工具。

3.动态执行

将bundle分为两部分，在内存中先执行基础模块的定义，然后再需要打开页面时，执行该页面的业务模块文件；
优点：性能好，能优化执行时间；
缺点：成本大, 需要改Native加载方式，打包工具也许修改。

Rabbit-bundler是按照此方案实现的打包工具。
具体请参考：Rabbit-bundler介绍

本文参考

• 携程是如何做React Native优化的
• react-native bundle 解释与拆解