ReactNaitve拆包(一)

Facebook推出React Native能够比较好的解决了IOS、Android平台之间的差异性，近几年越来越多的公司加入到React Native怀抱，尤其是像携程、阿里、腾讯的加入，验证了React Native技术的可行性和稳定性。

对公司来说，使用React Native遇到的第一个问题也许就是拆包。公司会根据不同的业务拆分成不同的js-bundle包，但是rn框架本身就比较大，我使用0.57版本打出一个没有业务的包就有650k左右，也许业务本身很简单，但是打出的包很多，增加了app的大小和占用用户更多的网络资源，如果有10个业务包，光是rn本身就达6m，而且这些代码是一样的，完全可以值需要一份就解决。

先查看一下bundle包结构，

bundle包分为三部分：

1. 第一部分定义了一些变量，及__d函数和__r函数；可以看到__d 就是define函数，__r是require函数
2. 第二部分全是__d()函数调用，这里的调用，每一个__d()函数就是一个资源(js文件、图片等)
3. 第三部分是__r()函数调用，这是入口文件

可以看到没一个资源(.js文件、图片)在bundle中就是一个__d函数，同时给文件分配了一个id，代码中访问文件就变成了对id查找；所以拆包就变成了打包的时候过滤基础文件就ok了

在React Native0.56之后，facebook将打包拆出来成一个单独的工程metro,可以查看源码及配置；所以现在拆包就比较简单，只要修改配置就可以：

serializer:{
    createModuleIdFactory, // 根据文件生成唯一id
    processModuleFilter // 是否过滤，true不过滤，false过滤
}

注:rn自带打包是生成自增id，这样可以减少bundle包的大小(整数占用的字节少)，但是有一个缺点，就是基础库如果文件有变化，id会变，导致原来所有业务包要重新打包，所以我建议根据文件生成md5码，这样虽然增大了bundle包，但是基础库后期可以添加文件。

暂时写到这里，后期会将具体实现加到github