RN拆包解决方案(一) bundle拆分

前言

本文是基于react-native 0.55， react 16.3.1版本展开

目的

• 减少业务包体积（app瘦身）
• 节省热更新流量
• 提升模块加载速度

实现方式

• 打通用包，包括react-native框架、code-push框架、常用第三方框架、rnlib代码等
• 打全量bundle包
• 全量包基于通用包打出差异包（业务包）
• 通用包和业务包同时引入工程
• 原生端预先加载通用包，当进入rn页面只加载业务包
• code-push分别更新通用包和业务包

jsbundle解析（全量包）

var 
__DEV__ = false,
__BUNDLE_START_TIME__ = this.nativePerformanceNow ? nativePerformanceNow() : Date.now(),
process = this.process || {};
process.env=process.env || {};
process.env.NODE_ENV = "production";
!(function(r) {
"use strict";
	r.__r = o, 
   ....
})();
__d(function(r,o,t,i,n){t.exports=r.ErrorUtils},18,[]);
...
...
__d(function(c,e,t,a,n){var r=e(n[0]);r(r.S,'Object',{create:e(n[1])})},506,[431,460]);
require(46);
require(11);

大致分为四个部分

• var 声明的变量，对当前运行环境的定义，bundle 的启动时间、Process进程环境相关信息;
• (function() { })() 闭包中定义的代码块，其中定义了对 define（__d）、 require（__r）、clear（__c） 的支持，以及 module（react-native及第三方dependences依赖的module） 的加载逻辑;
• __d 定义的代码块，包括RN框架源码 js 部分、自定义js代码部分、图片资源信息，供 require 引入使用;
• require定义的代码块，找到 __d 定义的代码块并执行，其中require中的数字即为 __d定义行中最后出现的那个数字。

如果每个业务都单独打全量包，那第一、二部分和大量第三部分代码将会重复，因此我们需要提取这部分代码做为通用部分，common.jsbundle，业务包将会复用这些代码

<