react-native拆包&热更体系搭建-代码拆包

一、前言

触过react-native的小伙伴都知道热更是rn最大的特点之一，掌握了热更就可以随时上线新的迭代、线上bug hotfix，这样一来发版也更有底气了从此告别跑路的担忧，code-push（以下简称cp）是大多数人接触的第一款热更库,功能很强大但是也有一些弊端，在刚开始接触热更的时候我有遇到bundle包因为某种来自东方的神秘力量阻挡无法下载的问题，后来我又发现了code-push-server这个开源的配套服务，细心的小伙伴们会发现这个项目最后一次commit已经在两年前，而且配套的cli工具早就升级到与某软的xxx center强绑定了，在此我个人不推荐再使用这个库来实现热更了。

二.CLI工具 （rn-multi-bundle）

Github：rn-multi-bundle

这是我开发的一款辅助拆包的cli工具，使用方法很简单

安装cli工具

npm install rn-multi-bundle -D

yarn add rn-multi-bundle -D

修改模块注册格式如下：
必须修改，cli工具通过分析ComponentMap对象拆离每个业务包

const ComponentMap = {

  [appName]: Home,

  [ComponentName.Home]: Home,

  [ComponentName.Test]: Test,

};


Object.keys(ComponentMap).forEach(name => {

  AppRegistry.registerComponent(name, () => ComponentMap[name]);

});

打包方法（公共包和所有业务包）

yarn rn-multi-bundle

打业务增量包方法

yarn rn-multi-bundle -u

后面考虑会做内联优化RAM Bundles 和内联引用优化

三、拆包与热更的关系

在大型项目中一般会使用AppRegistry.registerComponent来注册多个模块，每个模块各司其职可以是衍生产品或者零时活动，研究过cp的人都知道它的原理是替换单个bundle包，即时你改动一行代码发版那也是替换整个bundle包，这样造成的问题：一是对资源的浪费很多代码其实还是能够复用的用户的流量也是要钱的、二是不利于优化rn的启动速度。我想要实现的是每个模块可以独立更新，所以拆包对热更来说很重要！！！

四、如何实现拆包？

react-native的官方打包工具叫metro，metro提供了两个重要的apiprocessModuleFilter与createModuleIdFactory,两个api都能获取到模块（文件）的路径，也就是栗如/src/utils/constant.tsx这样的字符串，从方法名可以了解到processModuleFilter可以判断是否要过滤出某个文件返回true表示这个文件需要打入bundle中，false则相反。createModuleIdFactory是为每个文件生成一个id，这个id其实就是commonjs规范中每个模块生成的id也就是一个索引。

五、拆出公共包

公共包顾名思义里边全是公共的代码可复用程度高，可以被各个模块使用到，比如node_modules中的第三方依赖，公共组件components、以及一些工具方法utils，所以我们只需要把文件路径属于这几个文件夹的文件用processModuleFilterapi过滤出来，这样就产生了一个公共包。

六、拆出业务包

在拆公共包的过程中，生成一个source map记录每个文件的id。利用这个文件使用processModuleFilter把已经存在公共包中的模块过滤掉，然后再使用createModuleIdFactory返回对应的id，这样业务包就能调用公共包中的各种模块

七、打包结果

初始包

业务增量包