Facebook推出React Native能够比较好的解决了IOS、Android平台之间的差异性,近几年越来越多的公司加入到React Native怀抱,尤其是像携程、阿里、腾讯的加入,验证了React Native技术的可行性和稳定性。
对公司来说,使用React Native遇到的第一个问题也许就是拆包。公司会根据不同的业务拆分成不同的js-bundle包,但是rn框架本身就比较大,我使用0.57版本打出一个没有业务的包就有650k左右,也许业务本身很简单,但是打出的包很多,增加了app的大小和占用用户更多的网络资源,如果有10个业务包,光是rn本身就达6m,而且这些代码是一样的,完全可以值需要一份就解决。
先查看一下bundle包结构,
bundle包分为三部分:
- 第一部分定义了一些变量,及__d函数和__r函数;可以看到__d 就是define函数,__r是require函数
- 第二部分全是__d()函数调用,这里的调用,每一个__d()函数就是一个资源(js文件、图片等)
- 第三部分是__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