前言
本文是基于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,业务包将会复用这些代码
<