React native拆包的正确姿势——基于metro bundle

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多)。

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吧

加载多bundle

现在网上流传的一些方法都还是demo级别的方法，我的做法是尽量与react native兼容

android是直接重写ReactActivity，只在运行module前加载了业务包文件，这样可以让代码有完整的生命周期

iOS监听基础包加载成功的消息，基础包加载后再加载业务包，顺序和时机都是完美

 

详见：https://github.com/smallnew/react-native-multibundler