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

3、成數據沖突！RN為每個root view分配唯一root tag，并同步到JS。可利用此標識來區分不 同root view的數據。以下類型數據可能發生沖突：全局變量單例事件用戶有可能快速切換頁面，導致重復加載。標記某個bridge是否正在加載。如果在加載中，則不執行加載。在加載完成后，統一調用回調block。Bridge復用可能導致一些只需要執行一次的代碼被執行多次。5004504003503002502001501005001234567891011121314151617181920優化前耗時（MS）優化后耗時（MS）優勢簡單易實現。對RN源代碼無侵入。劣勢沒有做到核心、業務代碼拆分，造成

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

5、eId。如果沒有，產生一個 新id并存儲。分離核心、業務代碼。使用模塊路徑判斷是否為核心代碼。根據條件過濾掉不需要的代碼。業務包在最后手動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源碼、路由系統。業務包包含本業務所有頁面的路由配置、所有業務模塊。跳轉到一個未注冊路由的頁面

7、時，嘗試加載業務包。需要維護頁面和業務包 的關系。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