ReactNaive分包方法
RN中,发布js代码时,会打包成jsbundle形式。随着业务的增大,jsbundle体积也会逐渐增大,特别是多Module场景下,会生成多个jsbundle(包含相同的基础)。不仅增加APP、热更新包体积,也对jsbundle的加载效率造成很大影响。针对jsbundle的拆包,成为集成RN必须考虑的问题。
拆包目的
- 解决jsbundle体积过大
- 按需分步加载,提高加载效率
- 减少热更新包文件大小
react-native bundle 命令
react-native bundle是RN的将js代码打包成jsbundle命令。具体使用方式不再赘述,可以通过react-native bundle -help查看。对index.js进行打包,执行:
react-native bundle --entry-file ./index.js --dev false --bundle-output index.jsbundle --bundle-encoding utf-8 --platform "ios"
以index.js为入口,将index.js以及dependence文件打包,在当前目录生成index.jsbundle。分析index.jsbundle文件(删减后):
// header:各依赖模块引用部分
var __DEV__=false,__BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),process=this.process||{};process.env=process.env||{};process.env.NODE_ENV='production';
// body:入口模块和各业务模块定义部分
__d(function(e,r,a,i,l){var n=r(l[0]);babelHelpers.interopRequireDefault(n);r(l[1])},11,[12,17]);
// footer:入口模块注册部分
require(11);
生成的jsbundle基本分成3个部分:
- 头部:全局定义,主要是define,require等全局模块的定义
- 中部:模块定义,RN框架和业务的各个模块定义
- 尾部:引擎初始化和入口函数执行
__d是RN自定义的define,__d后面的数字是模块的id,是在RN打包过程中,解析依赖关系,自增长生成。__d结构:
__d(function(t,r,s,c){"use strict";var e=r(31);s.exports=e},30);
一个js文件就一片段__d定义,一个图片也会用__d定义
针对不同模块的入口js文件打包,将生成不同jsbundle对比,可以发现:
- jsbundle的头部相同
- 中部很多模块的定义存在大量重复
- 如果模块js中AppRegistry.registerComponent,尾部的入口模块id基本相同,如上例中的require(11)
实际上头部和中部重复的模块占用了500K的大小(RN框架js),每个入口js生成的jsbundle都会包含这500K代码。
拆包方案
对RN的bundle命令有了解,我们可以理清一个思路:将共通基础部分的模块define与具体的业务模块define分拆,避免重复写入jsbundle。
基于这个思路,有几种主流方案:
- diff and patch。将jsbundle通过diff,生成common和每个业务的patch包,然后在APP运行时对common和patch合并成执行的jsbundle。
- 修改RN的bundle命令打包流程,使得直接生成common+business包
- 修改RN的unbundle命令,生成common+business包
上面这3种方法本人觉得使用不方便,而且繁琐,需要了解的同学可以见繁琐的分包方案
这里给大家介绍一个十分方便的分包方案,一个命令就妥妥的。
三方命令分包
- 需要安装rnpackager bundle命令
Install
$ npm install rn-packager -g
rnpackager使用简介见
http://npm.taobao.org/package/ak-rn-packager
https://github.com/react-component/rn-packager
- 打对应的核心包(core.ios.jsbundle/core.andoid.jsbundle)
React-Native 0.33.0—iOS
rnpackager bundle --entry-file node_modules/react-native/Libraries/react-native/react-native.js --platform ios --bundle-output core.ios.jsbundle --dev false --reset-cache --manifest-output core.ios.manifest.json
React-Native 0.48.0—iOS
rnpackager bundle --entry-file node_modules/react-native/Libraries/react-native/react-native-implementation.js --platform ios --bundle-output core.ios.jsbundle --dev false --reset-cache --manifest-output core.ios.manifest.json
React-Native 0.48.0—android
rnpackager bundle --entry-file node_modules/react-native/Libraries/react-native/react-native-implementation.js --platform android --bundle-output core.android.jsbundle --dev false --reset-cache --manifest-output core.android.manifest.json
- 打业务包
这里的业务包指某个业务js为入口需要的其它业务js和图片js,不会把RN框架js打入的哟。
下面只做iOS介绍,安卓差不多,这需要用到第二步中生成的core.ios.manifest.json 文件
React-Native 0.33.0—iOS
rnpackager bundle --entry-file index.ios.js --platform ios --bundle-output ./SelfCheckout/iOS/selfcheckout.jsbundle --assets-dest ./SelfCheckout/iOS --dev false --reset-cache --manifest-file core.ios.manifest.json
React-Native 0.48.0—iOS
rnpackager bundle --entry-file index.ios.js --platform ios --bundle-output ./SelfCheckout/iOS/selfcheckout.jsbundle --assets-dest ./SelfCheckout/iOS --dev false --reset-cache --manifest-file core.ios.manifest.json
通过设置不同的--entry-file 入口文件就可以打不同的业务js包哟
对应的打包案例文件
案例文件
网友评论