淺談React Native 按需加載

　　開發(fā)過React Native的同學(xué)，大體都對白屏界面有所了解。作為RN原生自帶功能，基本上每個(gè)使用RN的業(yè)務(wù)都在優(yōu)化這一階段。通過對狼人殺的測試來看，首次從RN啟動(dòng)到渲染，耗時(shí)基本有1.7s左右。而這些耗時(shí)數(shù)據(jù)還是在iPhone6s中測試得出，可想低端局的情況可能會(huì)更加糟糕。

　　分析性能

　　工欲善其事必先利其器，要分析其耗時(shí)。還得從源頭著手，根據(jù)常規(guī)做法，都會(huì)將React Native打包的js拆分成Base Bundle和業(yè)務(wù)Bundle。從上圖，RN 加載流程來看，加載BaseBundle與業(yè)務(wù)Bundle的耗時(shí)是可以有優(yōu)化空間的。

　　優(yōu)化的方案和大多數(shù)人的思路一樣，只需在業(yè)務(wù)啟動(dòng)前預(yù)加載BaseBundle與業(yè)務(wù)Bundle即可達(dá)到優(yōu)化時(shí)間的效果。

　　目前所遇到的瓶頸

　　在優(yōu)化的開始，我們可能一直把精力放在BaseBundle中，認(rèn)為BaseBundle是RN的公共庫，體積肯定不小。但是從數(shù)據(jù)來看，我們的狼人殺業(yè)務(wù)Bundle已經(jīng)是1.8MB（純js代碼，不包括資源文件）而BaseBundle只有918KB，已經(jīng)是兩倍的體量。現(xiàn)在還只是狼人殺業(yè)務(wù)的初期，隨著業(yè)務(wù)的快速迭代，業(yè)務(wù)Bundle只會(huì)更快的增加。而過大的業(yè)務(wù)Bundle所導(dǎo)致的加載時(shí)間也會(huì)加長。

　　可能有同學(xué)會(huì)說，這不是有預(yù)加載嘛。我承認(rèn)，預(yù)加載確實(shí)解決了絕大部分業(yè)務(wù)Bundle的加載耗時(shí)。但是，并不是每次預(yù)加載都可以剛剛好預(yù)加載好業(yè)務(wù)Bundle。雖然業(yè)務(wù)Bundle加載耗時(shí)變長，預(yù)加載好的幾率就會(huì)慢慢變低。