ReactNative啟動性能優(yōu)化指南

1、ReactNative啟動性能優(yōu)化指南技術(shù)創(chuàng)新，變革未來為什么跨平臺？效率動態(tài)修復(fù)技術(shù)選型原生 + React Native 0.41按業(yè)務(wù)分bundle減小bundle體積局部動態(tài)修復(fù)雙刃劍加載速度慢不夠穩(wěn)定Part1：當(dāng)前的優(yōu)化方案Part2：未來的優(yōu)化方向Part1：當(dāng)前的優(yōu)化方案基石每次都初始化bridge，慢！Bridge實例較多，內(nèi)存占用高！Bridge全局緩存，只初始化一次。提高二次加載速度同業(yè)務(wù)共享bridge。如果有N個業(yè)務(wù)，最多有N個bridge實例。提高同業(yè)務(wù)頁面加載速度，減少內(nèi)存使用。Bridge復(fù)用接口集成復(fù)用和緩存邏輯副作用避免沖突并發(fā)加載留意“初始化”代碼RNBu

2、ndle *bundle = RNBundleManager sharendInstance bundleWithName:name;bundle loadBridge: (RCTBridge *bridge) RCTRootView *rootView = RCTRootView allocinitWithBridge:bridgemoduleName:mobile initialProperties:mProps copy;rootView.frame = self.view.bounds; self.view addSubview: rootView;一個Bridge對應(yīng)多個界面，可能造

3、成數(shù)據(jù)沖突！RN為每個root view分配唯一root tag，并同步到JS?？衫么藰?biāo)識來區(qū)分不 同root view的數(shù)據(jù)。以下類型數(shù)據(jù)可能發(fā)生沖突：全局變量單例事件用戶有可能快速切換頁面，導(dǎo)致重復(fù)加載。標(biāo)記某個bridge是否正在加載。如果在加載中，則不執(zhí)行加載。在加載完成后，統(tǒng)一調(diào)用回調(diào)block。Bridge復(fù)用可能導(dǎo)致一些只需要執(zhí)行一次的代碼被執(zhí)行多次。5004504003503002502001501005001234567891011121314151617181920優(yōu)化前耗時（MS）優(yōu)化后耗時（MS）優(yōu)勢簡單易實現(xiàn)。對RN源代碼無侵入。劣勢沒有做到核心、業(yè)務(wù)代碼拆分，造成

4、核心代碼多次加載。核心部分JS不能被多個業(yè)務(wù)共享。不同業(yè)務(wù)之間不能通過JS來跳轉(zhuǎn)，只能推新的Container VC。還是不夠快！Part2：未來的優(yōu)化方向探究只有一個bridge。核心代碼和業(yè)務(wù)代碼分離到不同bundle。核心bundle只加載一次。業(yè)務(wù)bundle實現(xiàn)懶加載。探究bundle文件結(jié)構(gòu)。修改打包流程。實現(xiàn)業(yè)務(wù)包懶加載。三個組成部分：定義polyfills。定義模塊（JS文件）。執(zhí)行入口代碼。ModuleIdBundle中JS模塊的唯一標(biāo)識。定義、獲取模塊都通過這個標(biāo)識。生成全局唯一moduleId。使用文件存取用過的moduleId。下次打包時，直接取用上次生成好的modul

5、eId。如果沒有，產(chǎn)生一個 新id并存儲。分離核心、業(yè)務(wù)代碼。使用模塊路徑判斷是否為核心代碼。根據(jù)條件過濾掉不需要的代碼。業(yè)務(wù)包在最后手動require入口模塊。/ 生成moduleIdfunction createModuleIdFactory() return (path: modulePath) = if (!(modulePath in fileToIdMap) globalfileToIdMapmodulePath = globalfileToIdMapnextId; globalfileToIdMapnextId += 1;return globalfileToIdMapmodul

6、ePath;/ 讀文件var fs = require(fs)var module2Id = fs.readFileSync(/Users/admin/module2Id, utf-8) globalfileToIdMap = JSON.parse(module2Id) | nextId: 0 / 寫文件fs.writeFile(/Users/admin/module2Id, JSON.stringify(globalfileToIdMap), err = console.log(err)核心包包含RN源碼、路由系統(tǒng)。業(yè)務(wù)包包含本業(yè)務(wù)所有頁面的路由配置、所有業(yè)務(wù)模塊。跳轉(zhuǎn)到一個未注冊路由的頁面

7、時，嘗試加載業(yè)務(wù)包。需要維護(hù)頁面和業(yè)務(wù)包 的關(guān)系。function loadPage (navigator, name) if (!route.hasRoute(name) let map = page1: business1, page2: business1, page3: business2NativeModules.RNDynamic.loadJSBundle(mapname).finally() = navigator.push(route.getRoute(name)returnnavigator.push(route.getRoute(name)RCT_EXPORT_METHOD

8、(loadJSBundle:(NSString *)bundleName fullfil:(RCTPromiseResolveBlock)fullfil reject:(RCTPromiseRejectBlock)reject) NSString *bundleURL = NSBundle mainBundle pathForResource:bundleName ofType:jsbundle;if (!bundleURL) reject(0, 0, nil); return;NSData *jsData = NSData dataWithContentsOfFile:bundleURL;id exe = self.bridge moduleForName:RCTBridgeModuleNameForClass(NSClassFromString(RCTJSCExecutor); exe executeApplicationScript:jsDatasourceURL:NSURL URLWithString:bundleURL onC