React-Native 分包实践

对于很多在使用react-native开发应用的小伙伴们肯定都会遇到一个问题,功能越来越复杂,生成的jsbundle文件越来越大,无论是打包在app内发布还是走http请求更新bunlde文件都是噩梦,这个时候我们应该如何来更新呢?来看看我们的方案。

我们可以在打包的时候直接讲基础文件打包到内部, 在请求线上的业务bundle合并后初始化react-native,对于在rn初始化后 如果还有新业务的话 也可以直接加载业务代码b 通过bridge enqueueApplicationScript注入到jscontext,再使用runAppcation 展示模块。 下面我们来看下这里实现的具体细节吧。

  1. jsbundle文件如何生成

finalize会根据参数runMainModule在生成的代码插入执行代码,然后我们就能获得生成的bundle文件了。

2.拆分jsbundle

通过上面的过程了解后,我们可以在原有的基础上进行扩展,在获取到denpendencies后(onResolutionResponse)通过请求参数,选择过滤基础模块或者仅基础模块,这时就能生成我们需要的文件。

//react-native/packager/react-packager/src/Bundler/index.js onResolutionResponse
 if (withoutSource) {
    response.dependencies = response.dependencies.filter(module =>
        !~module.path.indexOf('react-native')
    );
  }else if (sourceOnly) {
    response.dependencies = moduleSystemDeps.concat(response.dependencies.filter(module =>
        ~module.path.indexOf('react-native')
    ));
  }

对于这里我们需要在Server中增加对应的参数透传给Bundler, 通过bundle命令的也需要在对应的local-cli/bundle下增加withoutSource、sourceOnly参数传递

实际业务中可以扩展这里的过滤方式,这里相对比较简单

3.react-native加载文件

通过上面的文件拆分生成之后,我们可以通过自定义ReactView的方式, 通过RCTBridgeDelegate扩展loadSourceForBridge的方法自定义bundle的加载方式

////  ReactView.h
#import <UIKit/UIKit.h>
@interfaceReactView : UIView
- (instancetype)initWithFrame:(CGRect)frame module:(NSString*)module;
 @end
//  ReactView.m
#import "ReactView.h
"#import "RCTRootView.h
"#import "ReactNativePackageManager.h"
@interface ReactView()<RCTBridgeDelegate>
@property(nonatomic, strong) NSString *moduleName;
@property(nonatomic, strong) RCTRootView *rootView;
@end
@implementation ReactView
- (instancetype)initWithFrame:(CGRect)frame
                       module:(NSString*)module
{
  self = [super initWithFrame:frame];
    if (self){
    _moduleName = module;
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
    _rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:module initialProperties:nil];
  }
  
  [self addSubview:_rootView];
  _rootView.frame = self.bounds;
  return self;
}
#pragma mark -- RCTBridgeDelegate --
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true&withoutSource=true"];
}

- (void)loadSourceForBridge:(RCTBridge *)bridge withBlock:(RCTSourceLoadBlock)onComplete
{
    NSURL *jsCodeLocation; 
     //这里需要加载本地的基础文件(main.jsbundle)
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];  
  NSString *filePath = jsCodeLocation.path;  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{    NSError *error = nil;
    NSData *source = [NSData dataWithContentsOfFile:filePath
                                            options:NSDataReadingMappedIfSafe
                                              error:&error];    
     //加载线上模块合并初始化react-native
    [ReactNativePackageManager load:_moduleName withBlock:^(NSError *error, NSData* data){
    
      NSMutableData *concatData =[[NSMutableData alloc]init];
      [concatData appendData:(NSData*)source];
      [concatData appendData:(NSData*)data];
      
      onComplete(nil, concatData);
    }];
  });
}
@end

在上述的代码中,我们会将本地打包好的基础文件读出然后再加载网络上的bundle文件初始化react-native 。

启动react-native app
#import "AppDelegate.h
"#import "ReactView.h"
@implementationAppDelegate
- (BOOL)application:(UIApplication *)application 
didFinishLaunchingWithOptions:(NSDictionary
 *)launchOptions
 {   

   //设置初始化模块名称   
   ReactView *reactView = [[ReactView alloc]
 initWithFrame:[UIScreen mainScreen].bounds
 module:@"testApp"];
           self.window = [[UIWindow alloc] initWithFrame:
[UIScreen mainScreen].bounds];
       UIViewController *rootViewController =
 [UIViewController new];   
   rootViewController.view = reactView;
   self.window.rootViewController = rootViewController;   
  [self.window makeKeyAndVisible];
returnYES; 
}  

@end


4.按需加载jsbundle

对于需要异步加载的模块,我们可以扩展Native Module方式增加异步加载功能,同时修改RCTbridge暴露enqueueApplicationScript接口来将加载后的source运行到javascript core, 同时我们讲模块的加载统一管理起来保证不会重复加载和插入jscore造成额外消耗。

//  ReactNativePackageManager.m
#import "ReactNativePackageManager.h"
#import "RCTBridge.h"
#import "RCTUtils.h"
#import "RCTPerformanceLogger.h"
#import "RCTBridgeDelegate.h"

@implementation ReactNativePackageManager
RCT_EXPORT_MODULE();

@synthesize bridge = _bridge;
static NSMutableDictionary *modules;
//实际使用中根据业务设置加载的链接和规则
static NSString *url = @"http://localhost:8081/%@.ios.bundle?platform=ios&dev=false&withoutSource=true";

+(void) load:(NSString *)module withBlock:(RCTSourceLoadBlock)onComplete
{
  if (!modules) {
    modules =[NSMutableDictionary new];
  }  
  if ([modules objectForKey:module]) {
    onComplete(nil, modules[module]);
  }else{
      NSURL *scriptURL = [NSURL URLWithString:[NSString stringWithFormat:url, module]];
      // Load remote script file
    NSURLSessionDataTask *task =
    [[NSURLSession sharedSession] dataTaskWithURL:scriptURL
                                completionHandler:
     ^(NSData *data, NSURLResponse *response, NSError *error) {
       // Handle general request errors
       if (error) {
         onComplete(error, nil);         
         return;
       }       
       // Parse response as text
       NSStringEncoding encoding = NSUTF8StringEncoding;
         
       if (response.textEncodingName != nil) {
         CFStringEncoding cfEncoding = CFStringConvertIANACharSetNameToEncoding((CFStringRef)response.textEncodingName);         if (cfEncoding != kCFStringEncodingInvalidId) {
           encoding = CFStringConvertEncodingToNSStringEncoding(cfEncoding);
         }
       }
        // Handle HTTP errors
       if ([response isKindOfClass:[NSHTTPURLResponse class]] && ((NSHTTPURLResponse *)response).statusCode != 200) {
         NSString *rawText = [[NSString alloc] initWithData:data encoding:encoding];
         NSDictionary *userInfo;
         NSDictionary *errorDetails = RCTJSONParse(rawText, nil);
           if ([errorDetails isKindOfClass:[NSDictionary class]] &&
             [errorDetails[@"errors"] isKindOfClass:[NSArray class]]) {
                NSMutableArray<NSDictionary *> *fakeStack = [NSMutableArray new];
                for (NSDictionary *err in errorDetails[@"errors"]) {
                  [fakeStack addObject: @{
                    @"methodName": err[@"description"] ?: @"",
                    @"file": err[@"filename"] ?: @"",
                    @"lineNumber": err[@"lineNumber"] ?: @0
                   }];
                }
                userInfo = @{
                  NSLocalizedDescriptionKey: errorDetails[@"message"] ?: @"No message provided",
                   @"stack": fakeStack,
                };
         } else {
           userInfo = @{NSLocalizedDescriptionKey: rawText};
         }
         error = [NSError errorWithDomain:@"JSServer"
              code:((NSHTTPURLResponse *)response).statusCode
                                 userInfo:userInfo];
         onComplete(error, data);
         return;
       }
       
       [modules setObject:data forKey:module];
       onComplete(nil, data);
     }];
    
    [task resume];
  }
};

-(void) runModule:(NSString *)moduleName
{    NSDictionary *appParameters = @
    {
      @"rootTag": @1,
      @"initialProps": @{},
    };
    
    [_bridge enqueueJSCall:@"AppRegistry.runApplication"
                      args:@[moduleName, appParameters]];
}

RCT_EXPORT_METHOD(loadModule:(NSString *) moduleName)
{
  if ([modules objectForKey:moduleName]) {
    [self runModule:moduleName];
  }else{
    [ReactNativePackageManager load:moduleName withBlock:^(NSError *error, NSData* data){
      [_bridge enqueueApplicationScript:data url:[_bridge bundleURL] onComplete:^(NSError *scriptLoadError) {
        [self runModule:moduleName];
      }];
    }];
  }
}

@end

调用的话相应的要使用NativeModules.ReactNativePackageManager.loadModule('moduleName');

同时通过统一的load方式保证模块不会重复加载,这里在加载失败的情况下还可以考虑更多走到erroView来处理展示。

这样我们就基本完成了拆分工作,保证加载的bundle文件最小化。react-native自身需要加载多模块的话 也可以通过这样的方式调用直接注入到jscontext运行。

实际业务中 js模块还有需要解决多个Component共同依赖通过js module的情况,这里就需要对生成拆分的业务模块有更多要求。

原文发布于微信公众号 - QQ音乐技术团队(gh_287053a877e6)

原文发表时间:2016-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青玉伏案

iOS开发之新浪微博山寨版代码优化

  之前发表过一篇博客“IOS开发之新浪围脖”,在编写代码的时候太偏重功能的实现了,写完基本功能后看着代码有些别扭,特别是用到的四种cell的类,重复代码有点多...

2079
来自专栏一个爱瞎折腾的程序猿

个人项目框架搭建 -- Autofac简单使用记录

1382
来自专栏Alice

ios app url scheme跳转到淘宝商品详情页 唤醒app

好的东西就应该大家一块分享。 今天项目中要求,类似于启动页是淘宝的广告,然后点击广告,跳转到淘宝的详情页。 实现这个要求我是各种百度,不过最后发现呢,大部分东西...

1.3K6
来自专栏Alice

iOS afnetworking最新版报错 没有AFHTTPRequestOperationManager类了

今天开了一个小项目   用的是pod   然后  安装好 Afnetworking之后   发现 AFHTTPRequestOperationManager  ...

5999
来自专栏iOS开发攻城狮的集散地

iOS 全屏侧滑手势/UIScrollView/UISlider间滑动手势冲突

方案一:这个跟UIScrollView的一个属性delaysContentTouches有关。

4232
来自专栏移动端开发

Telegram学习解析系列(二):这我怎么给后台传输数据?

写在前面:          在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetwork...

52510
来自专栏coding...

iOS开发实战-时光记账Demo 网络版效果分析客户端部分服务端部分Demo地址简书主页

user表 相反Tally与Users的关系就是:一对多

982
来自专栏進无尽的文章

实践-小细节 III

Title:nil message:nil 标题和信息都设为 nil 不能设置为 @“” 这样还是会出现空白的标题

982
来自专栏進无尽的文章

推送-JPush(极光推送)的使用

推送服务可以说是所有 App 的标配,不论是哪种类型的 App,推送都从很大程度上决定了 App 的 打开率、使用率、存活率 。因此,熟知并掌握推送原理及方法,...

1.1K1
来自专栏iOS开发随笔

Unity项目嵌入现有iOS项目的方法

3037

扫码关注云+社区

领取腾讯云代金券