「React Native」采用Hermes熱更新打包調(diào)整

一、背景說明:

  if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }

現(xiàn)在build.gradle下,新增了一個(gè)配置,如果開啟了就采用新的hermes,如果未開啟則采用老的jsc加載引擎。

二、熱更新傳統(tǒng)方案

目前 code-push 的兩種發(fā)布模式:
code-push release-react(打bundle并自動(dòng)上傳)
code-push release(需先打bundle,再通過該命令上傳)
如果采用code-push release-reactapp熱更新后,殺掉進(jìn)程重新進(jìn)入,app首屏加載速度又慢下來了。

老的方式.png

生成的bundle只是通過babel編譯轉(zhuǎn)碼(es6轉(zhuǎn)es5),然后js壓縮和削減。Hermes 仍然可以執(zhí)行純文本的 JS 代碼,效率比替換js引擎前更低。

三、熱更新打包優(yōu)化方案

(1)先打bundle

react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false

(2)將bundle轉(zhuǎn)成字節(jié)碼

1.下載hermes-engine(可以在一個(gè)測(cè)試rn工程中引入)

npm i hermes-engine

2. cd node_modules/hermes-engine/oxs-bin(根據(jù)平臺(tái),我這里是蘋果系統(tǒng),其他系統(tǒng)可以到hermes-engine,ls查看選擇。)
3.將bundle轉(zhuǎn)換成字節(jié)碼

./hermesc -emit-binary -out index.android.bundle.hbc /Users/xxxx/work/react-native/app/bundles/index.android.bundle

4.將之前bundle目錄下的index.android.bundle刪掉,將當(dāng)前的index.android.bundle.hbc重命名為index.android.bundle,mv到之前bundle目錄下。

(3)上傳bundle

code-push release AndroidAppNamexx ./bundles 1.0.0 --d Staging --des "描述" --m true

(4)測(cè)試熱更新

當(dāng)前熱更新首屏加載速度比直接上傳原始bundle的速度快了很多,但是比初次打包就是字節(jié)碼bundle的加載速度要慢一點(diǎn)點(diǎn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容