淺談React Native 按需加載
推薦 + 挑錯(cuò) + 收藏(0) + 用戶評(píng)論（0）
開(kāi)發(fā)過(guò)React Native的同學(xué)，大體都對(duì)白屏界面有所了解。作為RN原生自帶功能，基本上每個(gè)使用RN的業(yè)務(wù)都在優(yōu)化這一階段。通過(guò)對(duì)狼人殺的測(cè)試來(lái)看，首次從RN啟動(dòng)到渲染，耗時(shí)基本有1.7s左右。而這些耗時(shí)數(shù)據(jù)還是在iPhone6s中測(cè)試得出，可想低端局的情況可能會(huì)更加糟糕。
分析性能
工欲善其事必先利其器，要分析其耗時(shí)。還得從源頭著手，根據(jù)常規(guī)做法，都會(huì)將React Native打包的js拆分成Base Bundle和業(yè)務(wù)Bundle。從上圖，RN 加載流程來(lái)看，加載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)化的開(kāi)始，我們可能一直把精力放在BaseBundle中，認(rèn)為BaseBundle是RN的公共庫(kù)，體積肯定不小。但是從數(shù)據(jù)來(lái)看，我們的狼人殺業(yè)務(wù)Bundle已經(jīng)是1.8MB（純js代碼，不包括資源文件）而B(niǎo)aseBundle只有918KB，已經(jīng)是兩倍的體量。現(xiàn)在還只是狼人殺業(yè)務(wù)的初期，隨著業(yè)務(wù)的快速迭代，業(yè)務(wù)Bundle只會(huì)更快的增加。而過(guò)大的業(yè)務(wù)Bundle所導(dǎo)致的加載時(shí)間也會(huì)加長(zhǎng)。
可能有同學(xué)會(huì)說(shuō)，這不是有預(yù)加載嘛。我承認(rèn)，預(yù)加載確實(shí)解決了絕大部分業(yè)務(wù)Bundle的加載耗時(shí)。但是，并不是每次預(yù)加載都可以剛剛好預(yù)加載好業(yè)務(wù)Bundle。雖然業(yè)務(wù)Bundle加載耗時(shí)變長(zhǎng)，預(yù)加載好的幾率就會(huì)慢慢變低。
非常好我支持^.^
(0) 0%
不好我反對(duì)
(0) 0%