1、分包——混合开发的必备技术
观察现在一些接入React native的大厂，如菜鸟、大搜车、去哪儿，都将react native 的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了，不了解的可以去搜索看看。我这边只总结下：react native原生打出来的包都只有一个jsbundle(除了rambundle)，里面包含了业务代码和react native代码和依赖的第三方库代码(当然还有polyfill)，如果是纯rn代码这倒没什么差别，但一般大厂都是原生应用内接入react native页面，而且一个应用内有许多不同业务，很可能是不同部门开发的，这样一个应用内就有许许多多jsbundle，如果不分包，那就有许许多多的重复的react native代码和第三方库，所以一般做法都是将重复的react native代码和第三方库打包成一个基础包，然后各个业务在基础包的js环境下运行，这样做可以减少内存开销且热更新的时候只需要下载几十KB的业务包，要知道react native代码和第三方库压缩前一般都能上1M多(依赖的多的可能有2M多)。
所以分包主要有两点优势：1、多业务情况下减少js代码冗余和减少内存使用 2、减少热更新下载的bundle大小3、大幅缩短react native页面的加载速度
2、分包的方法
网上有许多分包的方法，我这边列举并列举其优缺点
1、moles-packer
简介：携程大厂推出，稳定可靠，针对react native0.44时代的版本
优点：重写了react native自带的打包工具，重写就是为了分包，为分包而生的项目，肯定可靠
缺点：2 years ago，只适合rn老版本用户了，现在都8012了，0.5以上的rn版本全部扑街
2、自己修改打包代码
简介：现在很多教程都是让你去修改打包的源码，在里面判断分包，就是教程有的是几年前了
优点：如果自己很懂打包源码，这个做法灵活，定制化强，100%没问题
缺点：现在没人敢说自己完全看得懂打包源码，网上的教程在新版本容易扑街
3、diff patch
简介：大致的做法就是先打个正常的完整的jsbundle，然后再打个只包含了基础引用(react和第三方module)的基础包，比对一下patch，得出业务包，这样基础包和业务包都有了
优点：简单暴力，如果只是想简单做下分包的可以尝试下
缺点：1、不利于维护，由于module后面都是rn生成数字，依赖变了数字也变，导致基础包变了所有包都需要变2、图片没法分包，有的第三方库是包含图片的，这个方法只处理jsbundle不处理图片
现在都8012了我们来看看0.57版本的react native如何分包：
未来的分包趋势——metro bundle
官网：https://facebook.github.io/metro/
这个就是现在rn版本使用的官方打包工具，是由之前的rn打包代码中抽取出来成为一个单独的项目，metro更新迅速，一个月一个样，现在我觉得已经比较完善了，可以拿出来溜溜
全新的做法
其实react native在0.5时代就已经引入了metro bundle，但由于其还是在不断完善，无法完成分包大任，现在0.57已经可以完全支持分包了
其实react native打包是支持配置的：https://facebook.github.io/metro/docs/en/configuration
配置是不是眼花缭乱，其实分包只要用到两个配置：createModuleIdFactory和processModuleFilter
createModuleIdFactory函数传入的是你要打包的module文件的绝对路径返回的是这个module的id
processModuleFilter函数传入的是module信息，返回是boolean值，如果是false就过滤不打包
做法就很清晰了，配置createModuleIdFactory让其每次打包都module们使用固定的id(路径相关)，
配置processModuleFilter过滤基础包打出业务包
具体的配置看我的github吧
分包过程中遇到的坑
用官方的分包也不是一帆风顺，遇到一些小坑，总结下分享给大家：
1、0.55版本的react native正常是要支持createModuleIdFactory的配置的，但是经测试发现该项配置无效，如果是使用0.55版本之前rn的同学建议直接升级到最新的0.57版本，因为0.55版本线上还会出现android原生的崩溃bug（ Attempt to invoke virtual method 'int android.view.View.getId()' on a null object reference at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:536)），官方在0.57版本修护了这个问题https://github.com/facebook/react-native/issues/21149
2、基础包的babel runtime不完善，由于业务包只包含业务代码所以基础包需要提供所有业务包依赖的代码，但babel runtime这个东西是动态依赖的，如果业务包依赖了某种babel特性但基础包没有，这个情况就会提示Requiring unknown module的提示，比如我的github示例代码中：import EmptyExport from './platformEmptyDefaultExport';，这行代码视为了让基础包引入node_modules_@babel_runtime_helpers_interopRequireDefault而添加的，如果不添加将会报错，这个情况一般比较少见，由于例子中是包含了react naitve所以需要支持的babel特性较少，才会出现这个问题，一般项目都会依赖一些第三方库，babel的特性就会比较完善
3、升级到0.57出现的一个报错：A trailing comma is not permitted after the rest element，这个是一个第三方库的问题：
const SceneComponent = (Props) => {
const {shouldUpdated,...props, }=Props;
....................................................^这里多了个逗号，去掉就行
加载多bundle
现在网上流传的一些方法都还是demo级别的方法，react-native-multibundler做法是尽量与react native兼容
android直接重写ReactActivity，只在运行module前加载了业务包文件，这样可以让代码有完整的生命周期
iOS监听基础包加载成功的消息，基础包加载后再加载业务包，顺序和时机都是完美
详见：https://github.com/smallnew/react-native-multibundler