【React Native】一个简单的拆分Bundle&资源做法

本文的RN代码基于0.43版本

一般应用React Native(RN)后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点：

• 页面启动速度&内存占用增加 这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的消耗是不应该的。

• 更新流量消耗增加 要更新某块代码必须下发整个bundle，尽管只更新其中1/10部分的代码。

官方的打包并没有做类似拆分的事情，它打包出来就是一份bundle+资源。可能唯一值得一提的是它的unbundle ( https://github.com/facebook/react-native/blob/master/local-cli/bundle/output/unbundle/index.js )，它会将所有module进行拆分。那今天我就分享一下最近研究的成果，对RN打出来的bundle进行处理并自定义拆分代码&资源，一种无侵入式的后处理机制。不够完美，但是基本可用。

Bundle代码结构一览

RN打出来的Bundle其实就是一个js文件，如果设置了--assets-dest则会将引用到的资源输出，它的结构由上至下分为三部分，我们来分别探索一下：

1. Polyfills

它们是Bundle最开始的一段代码，主要是向Javascript解释器上下文注入一些能力，比如模块系统、require、console等都在这里注入。

默认要注入的polyfill在packager/defaults.js( https://github.com/facebook/react-native/blob/master/packager/defaults.js )中可以看到：

这些polyfills的用途根据其名字就大概能猜到了，有兴趣的朋友可以自行探索，这里不展开讲。除了它们，还会加入额外两个polyfill，它们相当于是元组件，是连这些polyfills都需要依赖的几个组件，会出现在bundle的最前面，它们是：

1. global.__DEV__的设置模块；

• 1. 模块系统，模块定义函数、require函数，都在这里定义，这样javascript解释器才能拥有模块系统的功能。

  它们被引用的地方在packager/src/Resolver/index.js( https://github.com/facebook/react-native/blob/master/packager/src/Resolver/index.js#L119 )，获取模块系统依赖时会将它们转换成polyfills，并在使用时插入到polyfills列表最前端。

  

  这些polyfills生成到bundle的代码就是闭包的调用，生成规则在packager/src/Resolver/index.js中可以看到：

  

  我们看到它是函数的定义&调用，通过注入global变量来将一些全局使用的元素attach到global上。

  2. Module Declaration

  这里通过解析入口模块ÿ