本文針對(duì)使用React Native開(kāi)發(fā)混合應(yīng)用的過(guò)程中iOS端白屏問(wèn)題，提出了react-native預(yù)加載優(yōu)化方案格遭，本文主要圍繞以下幾個(gè)方面展開(kāi)分析:

• 白屏
• 解決白屏

本文react-native基于0.48.0版本

白屏

在開(kāi)發(fā)React-Native（下面簡(jiǎn)稱RN）頁(yè)面的時(shí)候义桂，都會(huì)看到下面加載白屏現(xiàn)象

 NSURL *bridgeURL = [[NSBundle mainBundle] URLForResource:@"業(yè)務(wù)全包名"
                                                   withExtension:@"jsbundle"];
 RCTBridge *bridge = [[RCTBridge alloc]initWithBundleURL:bridgeURL
                                                 moduleProvider:nil
                                                  launchOptions:nil];

解決白屏

上面描述了白屏產(chǎn)生過(guò)程栈顷，接下來(lái)講講怎么解決這個(gè)問(wèn)題逆日。

1. 實(shí)現(xiàn)簡(jiǎn)介

簡(jiǎn)單思路就是不要在進(jìn)入RN頁(yè)面的時(shí)候才去實(shí)例化RCTBridge，提前初始化好后緩存下來(lái)萄凤，打開(kāi)頁(yè)面創(chuàng)建RootView的時(shí)候使用已經(jīng)創(chuàng)建好了的RCTBridge室抽，這樣會(huì)直接跳過(guò)JS init+Require過(guò)程。這就是所謂的以空間換時(shí)間做法靡努，但是具體做法很很多中情況坪圾，下面來(lái)看看各種情況具體實(shí)現(xiàn)

2. 具體實(shí)現(xiàn)

首先我們來(lái)看看正常情況怎么創(chuàng)建一個(gè)RootView的

//步驟一：創(chuàng)建bridge
NSURL *bridgeURL = [[NSBundle mainBundle] URLForResource:@"包名字"
                                                   withExtension:@"jsbundle"];
RCTBridge *bridge = [[RCTBridge alloc]initWithBundleURL:bridgeURL
                                                 moduleProvider:nil
                                                  launchOptions:nil];
//步驟二：創(chuàng)建rootView
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                             moduleName:[self moduleName]
                                      initialProperties:self.pageParams];
//步驟三：rootView添加到需要顯示的父View中
[self.view addSubview:rootView];

情況一：你的APP中就一個(gè)RN bundle包（全部緩存）

在你的項(xiàng)目中僅僅有一個(gè)jsbundle包，由于只有only 唯一的包惑朦，我們?cè)贏PP一啟動(dòng)的時(shí)候就實(shí)現(xiàn)步驟一創(chuàng)建bridge（提前緩存）兽泄，我們這用個(gè)單例來(lái)保存這個(gè)bridge。
1：創(chuàng)建一個(gè)單例：

#import <React/RCTBridge.h>
#import "SynthesizeSingleton.h"
@interface BridgeManage : NSObject
SYNTHESIZE_SINGLETON_FOR_CLASS_HEADER(BridgeManage)
@property(nonatomic,strong) RCTBridge *bridge;
@end

#import "BridgeManage.h"
@implementation BridgeManage
SYNTHESIZE_SINGLETON_FOR_CLASS(BridgeManage)
- (instancetype)init
{
    self = [super init];
    if(self)
    {
        
        NSURL *bridgeURL = [[NSBundle mainBundle] URLForResource:@"包名"
                                                   withExtension:@"jsbundle"];
        RCTBridge *bridge = [[RCTBridge alloc]initWithBundleURL:bridgeURL
                                                 moduleProvider:nil
                                                  launchOptions:nil];
        _bundleURL = [[NSMutableDictionary alloc]init];
    }
    return self;
}
@end

2：AppDelegate 中實(shí)例化這個(gè)單例

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //放在最前面喲漾月，盡早實(shí)例化
    [BridgeManage sharedInstance];
    //其它程序啟動(dòng)處理
    return YES;
}

3：使用

RCTBridge *bridge =[BridgeManage sharedInstance].bridge;
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                             moduleName:[self moduleName]
                                      initialProperties:self.pageParams];
[self.view addSubview:rootView];

注意：BridgeManage 實(shí)例化需要盡早病梢，如果不第一時(shí)間實(shí)例化，進(jìn)入RN頁(yè)面的時(shí)候才調(diào)用[BridgeManage sharedInstance]梁肿。在第一次進(jìn)入RN頁(yè)面的時(shí)候也會(huì)出現(xiàn)白屏蜓陌。

情況二：你的APP中有多個(gè)RN bundle包

如果APP中是分業(yè)務(wù)模塊開(kāi)發(fā)的，就會(huì)出現(xiàn)多個(gè)jsbundle包吩蔑。這個(gè)時(shí)候就不能將這些jsbundle的Bridge實(shí)例后緩存下來(lái)钮热，會(huì)出現(xiàn)內(nèi)存過(guò)大，浪費(fèi)用戶不用的模塊占用手機(jī)內(nèi)存烛芬。而且有些模塊是通過(guò)網(wǎng)絡(luò)動(dòng)態(tài)下發(fā)到APP中的這是無(wú)法提前緩存的隧期。一般大家都是用到對(duì)應(yīng)jsbundle的時(shí)候創(chuàng)建Rootview實(shí)時(shí)創(chuàng)建Bridge（當(dāng)然會(huì)出現(xiàn)白屏）。那這種情況怎么優(yōu)化呢赘娄？仆潮？？
首先我們可以看看官方提供的打包shell命令打包出來(lái)的jsbundle結(jié)構(gòu)
命令如下：

//官方打包命令
react-native bundle --entry-file  enterJsFile  --platform ios --bundle-output ./xxx.jsbundle --assets-dest  photoPath --dev false --reset-cache > /dev/null

__d是RN自定義的define擅憔，__d后面的數(shù)字是模塊的id鸵闪，是在RN打包過(guò)程中，解析依賴關(guān)系暑诸，自增長(zhǎng)生成蚌讼。__d結(jié)構(gòu)：

__d(function(t,r,s,c){"use strict";var e=r(31);s.exports=e},30);

一個(gè)js文件就一片段__d定義辟灰，一個(gè)圖片也會(huì)用__d定義

針對(duì)不同模塊的入口js文件打包，將生成不同jsbundle對(duì)比篡石，可以發(fā)現(xiàn)：

• jsbundle的頭部相同
• 中部很多模塊的定義存在大量重復(fù)
• 如果模塊js中AppRegistry.registerComponent芥喇，尾部的入口模塊id基本相同，如上例中的require(11)
  實(shí)際上頭部和中部重復(fù)的模塊占用了500K的大谢巳（RN框架js）继控，每個(gè)入口js生成的jsbundle都會(huì)包含這500K代碼。

了解了打包后的jsbundle結(jié)構(gòu)后胖眷，出現(xiàn)了一種優(yōu)化猜想武通，可不可以各個(gè)模塊的RootView 公用這些公共的JS代碼（在一個(gè)JS內(nèi)核中都可以相互調(diào)用），通過(guò)嘗試發(fā)現(xiàn)是可行的珊搀。下面說(shuō)說(shuō)具體實(shí)現(xiàn)冶忱。

1.先把RN架構(gòu)核心庫(kù)js和業(yè)務(wù)代碼js 想辦法分離

分離方法見(jiàn)：ReactNaive分包方法

這是分包加載的第一步，分包出來(lái)的包名字我們這樣定義core.ios.jsbundle (RN 系統(tǒng)js)和 bussess.ios.jsbundle (RN 各業(yè)務(wù)js)和 common.ios.jsbundle（RN各業(yè)務(wù)公共的js）

2.單例實(shí)例化核心Bridge

#import <React/RCTBridge.h>
#import "SynthesizeSingleton.h"
@interface BridgeManage : NSObject
SYNTHESIZE_SINGLETON_FOR_CLASS_HEADER(BridgeManage)
@property(nonatomic,strong) RCTBridge *bridge;
-(void)addBundelURL:(NSString*)url;
-(BOOL)isLoadBundleURL:(NSString*)url;
@end

#import "BridgeManage.h"
@interface BridgeManage ()
@property(nonatomic,strong) NSMutableDictionary *bundleURL;
@end
@implementation BridgeManage
SYNTHESIZE_SINGLETON_FOR_CLASS(BridgeManage)
- (instancetype)init
{
    self = [super init];
    if(self)
    {
        //這兒的url決定了rn加載本地資源圖片的根目錄喲＞澄觥Ｇ羟埂！
//        NSURL *bridgeURL = [[NSBundle mainBundle] URLForResource:@"personalcenter.bundle/core.ios" withExtension:@"jsbundle"];
        NSURL *bridgeURL = [[NSBundle mainBundle] URLForResource:@"core.ios" withExtension:@"jsbundle"];
        _bridge = [[RCTBridge alloc]initWithBundleURL:bridgeURL moduleProvider:nil launchOptions:nil];
        _bundleURL = [[NSMutableDictionary alloc]init];
    }
    return self;
}
-(void)addBundelURL:(NSString*)url{
    self.bundleURL[url]=url;
}
-(BOOL)isLoadBundleURL:(NSString*)url{
    if (self.bundleURL[url]) {
        return YES;
    }
    return NO;
}
@end

2: 由于我們需要使用RCTBridge.m中的私有方法enqueueApplicationScript或者executeApplicationScriptSync劳淆，于是定義一個(gè)extend 擴(kuò)展類RCTBridge+ReactExecuteScript.h如下：

#import <React/RCTBridge.h>

@interface RCTBridge ()
- (void)executeApplicationScriptSync:(NSData *)script url:(NSURL *)url;
@end

3：AppDelegate 中實(shí)例化這個(gè)BridgeManage并向core Bridge中注入common.ios.jsbundle 業(yè)務(wù)公共js

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //放在最前面喲链沼，盡早實(shí)例化
    [BridgeManage sharedInstance];
     NSURL *bundleURL = [[NSBundle mainBundle] URLForResource:@"common.ios" withExtension:@"jsbundle"];
     NSData *busJSCode = [NSData dataWithContentsOfURL:bundleURL];
        //    dispatch_async(dispatch_get_main_queue(), ^{
        //        [bridge.batchedBridge enqueueApplicationScript:busJSCode url:bundleURL onComplete:^{
        //            NSString *test = @"====";
        //            NSLog(@"==%@",test);
        //        }];
        //    });
     [[BridgeManage sharedInstance].bridge.batchedBridge executeApplicationScriptSync:busJSCode url:bundleURL];
    //其它程序啟動(dòng)處理
    return YES;
}

注意：需要在APPDelegate中import RCTBridge+ReactExecuteScript 不然是無(wú)法調(diào)用executeApplicationScriptSync這個(gè)方法喲。
4：創(chuàng)建RootView

RCTBridge *bridge =[BridgeManage sharedInstance].bridge;
NSURL *bundleURL = [[NSBundle mainBundle] URLForResource:@"bussess.ios" withExtension:@"jsbundle"];
if (![[BridgeManage sharedInstance] isLoadBundleURL:[bundleURL absoluteString]]) {
        NSData *busJSCode = [NSData dataWithContentsOfURL:bundleURL];
        [bridge.batchedBridge executeApplicationScriptSync:busJSCode url:bundleURL];
        [[BridgeManage sharedInstance]addBundelURL:[self sourcePath]];
    }
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                             moduleName:[self moduleName]
                                      initialProperties:self.pageParams];
[self.view addSubview:rootView];