美文网首页React Native学习
ReactNaive分包方法

ReactNaive分包方法

作者: 翰墨_42a6 | 来源:发表于2018-10-24 16:15 被阅读0次

    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。
    基于这个思路,有几种主流方案:

    1. diff and patch。将jsbundle通过diff,生成common和每个业务的patch包,然后在APP运行时对common和patch合并成执行的jsbundle。
    2. 修改RN的bundle命令打包流程,使得直接生成common+business包
    3. 修改RN的unbundle命令,生成common+business包

    上面这3种方法本人觉得使用不方便,而且繁琐,需要了解的同学可以见繁琐的分包方案

    这里给大家介绍一个十分方便的分包方案,一个命令就妥妥的。

    三方命令分包

    1. 需要安装rnpackager bundle命令

    Install

    $ npm install rn-packager -g
    

    rnpackager使用简介见

    http://npm.taobao.org/package/ak-rn-packager

    https://github.com/react-component/rn-packager

    1. 打对应的核心包(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
    
    1. 打业务包

    这里的业务包指某个业务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包哟

    对应的打包案例文件
    案例文件

    相关文章

      网友评论

        本文标题:ReactNaive分包方法

        本文链接:https://www.haomeiwen.com/subject/cglxtqtx.html