本文共 1763 字，大约阅读时间需要 5 分钟。

拆包是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是按照此方案实现的打包工具。

具体请参考：

本文参考

 

作者：乘着风 链接：https://www.jianshu.com/p/ab94a94d58bb 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。