招商证券 react-native 热更新优化实践

react-native bundle --platform ios --dev false --entry-file index.js --bundle-output __test__/example/index.ios.jsbundle --assets-dest __test__/example/

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,    r.__d = function(r,i,n) {    if(null != e[i])       return;    e[i] = {      dependencyMap:n,factory:r,hasError:!1,importedAll:t,importedDefault:t,isInitialized:!1,publicModule:{exports:{}}    }  },   r.__c = n;    ....   })();__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);

// split.jsconst DiffMatchPatch = require('diff-match-patch');const fs = require('fs'); const dmp = new DiffMatchPatch();
fs.readFile(`${process.cwd()}/common.ios.jsbundle`, 'utf8', (e, data) => {  let commonData = data;  fs.readFile(`${process.cwd()}/business.ios.jsbundle`, 'utf8', (e, data) => {    let businessData = data;    const patch = dmp.patch_make(commonData, businessData); // 生成补丁    const patchText = dmp.patch_toText(patch); // 生成补丁文本     fs.writeFileSync(`${process.cwd()}/diff.ios.patch`, patchText);  });});

@@ -761599,32 +761599,83 @@ ent(s.Text,null,+%22Hello World%22),o.default.createElement(s.Text,null, this.state.param

// createModuleIdFactory.jsfunction createModuleIdFactory() {  const fileToIdMap = new Map();    let nextId = 0;    return path => {      let id = fileToIdMap.get(path);      if (typeof id !== 'number') {        id = nextId++;        fileToIdMap.set(path, id);      }      return id;    };}
module.exports = createModuleIdFactory;

function createModuleIdFactory() {
  if (!process.env.__PROD__) { // debug模式    const fileToIdMap = new Map();    let nextId = 0;    return path => {      let id = fileToIdMap.get(path);      if (typeof id !== 'number') {        id = nextId++;        fileToIdMap.set(path, id);      }      return id;    };  } else { // 生产打包使用具体包路径代替id，方便拆包处理    // 定义项目根目录路径    const projectRootPath = `${process.cwd()}`;    // path 为模块路径名称    return path => {      let moduleName = '';      if(path.indexOf('node_modules\\react-native\\Libraries\\') > 0) {          moduleName = path.substr(path.lastIndexOf('\\') + 1);      } else if(path.indexOf(projectRootPath)==0){          moduleName = path.substr(projectRootPath.length + 1);      }        moduleName = moduleName.replace('.js', '');      moduleName = moduleName.replace('.png', '');      moduleName = moduleName.replace('.jpg', '');      moduleName = moduleName.replace(/\\/g, '_'); // 适配Windows平台路径问题      moduleName = moduleName.replace(/\//g, '_'); // 适配macos平台路径问题        return moduleName;    };  }  }
module.exports = createModuleIdFactory;

// base.jsrequire('react-native');require('react');...这里可以引入更多的第三方模块及自己的公共模块

// index.jsclass App extends Component {    render() {        return (            <View>                <Text>                    hello world                </Text>            </View>        )    }}
AppRegistry.registerComponent("business", () => App);

react-native bundle --platform ios --dev false --entry-file base.js --bundle-output __test__/example/common.ios.jsbundle --assets-dest __test__/ios/

react-native bundle --platform ios --dev false --entry-file index.js --bundle-output __test__/example/business.ios.jsbundle --assets-dest __test__/ios/

comm -2 -3 ./__test__/ios/business.ios.jsbundle ./__test__/ios/common.ios.jsbundle > ./__test__/ios/diff.ios.jsbundle

// diff.js: 找出common和business的不同行
var fs = require('fs');var readline = require('readline');
function readFileToArr(fReadName,callback){  var fRead = fs.createReadStream(fReadName);  var objReadline = readline.createInterface({      input:fRead  });  var arr = new Array();  objReadline.on('line',function (line) {      arr.push(line);      //console.log('line:'+ line);  });  objReadline.on('close',function () {     // console.log(arr);      callback(arr);  });}
var argvs = process.argv.splice(2);var commonFile = argvs[0]; // common.ios.jsbundlevar businessFile = argvs[1]; // business.ios.jsbundlevar diffOut = argvs[2]; // diff.ios.jsbundlereadFileToArr(commonFile, function (c_data) {  var diff = [];  var commonArrs = c_data;  readFileToArr(businessFile, function (b_data) {    var businessArrs = b_data;    for (let i = 0; i < businessArrs.length; i++) {      if (commonArrs.indexOf(businessArrs[i]) === -1) { // business中独有的行        diff.push(businessArrs[i]);      }    }    // console.log(diff.length);    var newContent = diff.join('\n');    fs.writeFileSync(diffOut, newContent); // 生成diff.ios.jsbundle  });});

node ./__test__/diff.js ./__test__/ios/common.ios.jsbundle ./__test__/ios/business.ios.jsbundle ./__test__/ios/diff.ios.jsbundle

public class MainActivity extends ReactActivity {
    /**     * 返回index.js下AppRegistry.registerComponent()方法传入的appKey，     * 用来渲染视图。     */    @Override    protected String getMainComponentName() {        return "RN_bundle_split";    }}

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {    @Override    public boolean getUseDeveloperSupport() {      return BuildConfig.DEBUG;    }
    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(          new MainReactPackage()      );    }
    @Override    protected String getJSMainModuleName() {      return "index";    }  };
  @Override  public ReactNativeHost getReactNativeHost() {    return mReactNativeHost;  }
  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);  }}

/** * Base Activity for React Native applications. */public abstract class ReactActivity extends Activityimplements DefaultHardwareBackBtnHandler, PermissionAwareActivity {  private final ReactActivityDelegate mDelegate;
  protected ReactActivity() {    mDelegate = createReactActivityDelegate();  }    /**   * 返回从JavaScript注册的主要组件的名称，用于组件的渲染。   * e.g. "RN_bundle_split"   */  protected @Nullable String getMainComponentName() {    return null;  }
  /**   * Called at construction time, override if you have a custom delegate implementation.   */  protected ReactActivityDelegate createReactActivityDelegate() {    return new ReactActivityDelegate(this, getMainComponentName());  }
  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    mDelegate.onCreate(savedInstanceState);  }     /**   * 获取 ReactNativeHost 实例   */  protected final ReactNativeHost getReactNativeHost() {    return mDelegate.getReactNativeHost();  }
  /**   * 获取 ReactInstanceManager 实例   */  protected final ReactInstanceManager getReactInstanceManager() {    return mDelegate.getReactInstanceManager();  }
  /**   * 加载 JSBundle   */  protected final void loadApp(String appKey) {    mDelegate.loadApp(appKey);  }}

// MyReactApplication.javapublic class MyReactApplication extends Application implements ReactApplication {    public static MyReactApplication mInstance;    private WeakReference<Application> appReference;    public static ReactNativeHost mReactNativeHost;        private MyReactApplication() {    }
    public static MyReactApplication getInstance() {        if (mInstance == null) {            synchronized (MyReactApplication.class) {                if (mInstance == null) {                    mInstance = new MyReactApplication();                }            }        }        return mInstance;    }
    // 初始化ReactNativeHost    public void init(Application application) {        appReference = new WeakReference<>(application);        mReactNativeHost = new ReactNativeHost(application) {            @Override            protected String getBundleAssetName() {                // 指向业务包                return "business.jsbundle";            }
            @Override            public boolean getUseDeveloperSupport() {                return false;            }
            @Override            protected List<ReactPackage> getPackages() {                return Arrays.<ReactPackage>asList(                        new MainReactPackage()                );            }        };    }

    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }}

public class MainApplication extends Application implements ReactApplication {    ...  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);    // MyReactApplication初始化    MyReactApplication.getInstance().init(this);  }}

public class MyReactActivityDelegate extends ReactActivityDelegate {    ...    @Override    public ReactNativeHost getReactNativeHost() {        return MyReactApplication.getInstance().getReactNativeHost();    }    ...}

public class SubActivity extends ReactActivity {
    @Nullable    @Override    protected String getMainComponentName() {        return "RN_bundle_split_business";    }
    @Override    protected ReactActivityDelegate createReactActivityDelegate() {        // 使用MyReactActivityDelegate覆盖原ReactActivityDelegate        return new MyReactActivityDelegate(this, getMainComponentName());    }
}

public class SubActivity extends Activity   implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {            ...}

...public void init(Application application) {        appReference = new WeakReference<>(application);        mReactNativeHost = new ReactNativeHost(application) {            @Override            protected String getBundleAssetName() {                return "common.jsbundle";            }
            @Override            public boolean getUseDeveloperSupport() {                return false;            }
            @Override            protected List<ReactPackage> getPackages() {                return Arrays.<ReactPackage>asList(                        new MainReactPackage()                );            }        };    }...

    @Override    protected void onCreate(final Bundle savedInstanceState) {        super.onCreate(savedInstanceState);                Log.d("rndebug", "初始化MyReactActivityDelegate");        mDelegate = new MyReactActivityDelegate(this, "RN_bundle_split_business");
        Log.d("rndebug", "初始化MyReactApplication");        MyReactApplication.getInstance().init(MainApplication.mainApplication);

        final ReactInstanceManager manager = getReactNativeHost().getReactInstanceManager();
        manager.addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {            @Override            public void onReactContextInitialized(ReactContext context) {                Log.d("rndebug", "基础包加载完毕");                loadScript(); // 加载业务包                initView(); // 加载视图                manager.removeReactInstanceEventListener(this);            }        });        getReactNativeHost().getReactInstanceManager().createReactContextInBackground();
    }

public static void loadScriptFromAsset(Context context,                                           CatalystInstance instance,                                           String assetName,boolean loadSynchronously) {        String source = assetName;        if(!assetName.startsWith("assets://")) {            source = "assets://" + assetName;        }        ((CatalystInstanceImpl)instance).loadScriptFromAssets(context.getAssets(), source,loadSynchronously);    }

protected void initView(){  mDelegate.onCreate(null);}

// MyReactActivityDelegate.java...    @Override    public void onCreate(Bundle savedInstanceState) {        if (mMainComponentName != null) {            loadApp(mMainComponentName);        }        mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();    }
    @Override    public void loadApp(String appKey) {        if (mReactRootView != null) {            throw new IllegalStateException("Cannot loadApp while app is already running.");        }        mReactRootView = createRootView();        mReactRootView.startReactApplication(                getReactNativeHost().getReactInstanceManager(),                appKey,                getLaunchOptions());        getPlainActivity().setContentView(mReactRootView);    }...

@implementation AppDelegate  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  NSURL *jsCodeLocation;  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];    // 初始化react-native rootview  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                      moduleName:@"RN_bundle_split"                                               initialProperties:nil                                                   launchOptions:launchOptions];  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];  UIViewController *rootViewController = [UIViewController new];    // 将react-native view加载到viewController中  rootViewController.view = rootView;  self.window.rootViewController = rootViewController;  [self.window makeKeyAndVisible];  return YES;}

#import "RCTBridge.h"
NSURL *jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"common.jsbundle" ofType:nil]];  bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation                                 moduleProvider:nil launchOptions:launchOptions];

#import <Foundation/Foundation.h>
@interface RCTBridge (RnLoadJS)
 - (void)executeSourceCode:(NSData *)sourceCode sync:(BOOL)sync;
@end

NSLog(@"subapp:业务包加载开始");NSString * busJsCodeLocation = [[NSBundle mainBundle] pathForResource:@"business.ios.jsbundle" ofType:nil];
NSData * sourceBus = [NSData dataWithContentsOfFile:busJsCodeLocation options:NSDataReadingMappedIfSafe error:nil];
[(RCTBridge *)bridge.batchedBridge executeSourceCode:sourceBus sync:YES];NSLog(@"subapp:业务包加载结束");

RCTRootView * root = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"RN_bundle_split_business" initialProperties:initialProperties];
self.view = root;