React?Native采用Hermes熱更新打包方案詳解
1， 背景
如果我們打開(kāi)RN的Android源碼，在build.gradle中回看到這樣一段代碼。
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}此段代碼的含義是，如果開(kāi)啟了就采用新的hermes，如果未開(kāi)啟則采用老的jsc加載引擎。Hermes 是專(zhuān)門(mén)針對(duì) React Native 應(yīng)用而優(yōu)化的全新開(kāi)源 JavaScript 引擎。對(duì)于很多應(yīng)用來(lái)說(shuō)，啟用 Hermes 引擎可以?xún)?yōu)化啟動(dòng)時(shí)間，減少內(nèi)存占用以及空間占用。
2，熱更新傳統(tǒng)方案
在傳統(tǒng)的熱更新方案中，我們實(shí)現(xiàn)熱更新需要借助code-push開(kāi)源方案，熱更新包的發(fā)布有兩種方式：
- code-push release-react：打bundle并自動(dòng)上傳
- code-push release：需先打bundle，再通過(guò)該命令上傳
如果采用code-push release-reactapp熱更新后，殺掉進(jìn)程重新進(jìn)入，app首屏加載的時(shí)候速度會(huì)很慢，甚至可能出現(xiàn)白屏。這是因?yàn)樯傻腷undle只是通過(guò)babel編譯轉(zhuǎn)碼，然后經(jīng)過(guò)js壓縮和削減，代碼的執(zhí)行效率并不高。
而開(kāi)啟Hermes引擎后，可以執(zhí)行純文本的 JS 代碼，效率比替換js引擎前更低，執(zhí)行效率也更高。
3，使用Hermes打包
首先，我們執(zhí)行react-native bundle命令進(jìn)行打包，比如。
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false
接下來(lái)，我們需要將bundle轉(zhuǎn)成字節(jié)碼。轉(zhuǎn)化前，我們需要先下載hermes-engine。
npm i hermes-engine
接著，執(zhí)行如下命令將bundle轉(zhuǎn)換成字節(jié)碼
cd node_modules/hermes-engine/oxs-bin ./hermesc -emit-binary -out index.android.bundle.hbc /Users/xxxx/work/react-native/app/bundles/index.android.bundle
將之前bundle目錄下的index.android.bundle刪掉，將當(dāng)前的index.android.bundle.hbc重命名為index.android.bundle，再移動(dòng)到之前bundle目錄下。最后，使用下面的命令執(zhí)行 bundle熱更新包的發(fā)布。
code-push release AndroidAppNamexx ./bundles 1.0.0 --d Staging --des "描述" --m true
使用這種方式后，下次有熱更新的時(shí)候，加載的速度比之前也有明顯的提升，特別是bundle包內(nèi)容比較大的時(shí)候。
到此這篇關(guān)于React Native采用Hermes熱更新打包方案詳解的文章就介紹到這了,更多相關(guān)React Native熱更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼
這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了React-hooks中的useEffect,對(duì)于React組件來(lái)說(shuō)，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動(dòng)修改DOM、發(fā)送ajax請(qǐng)求），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決React報(bào)錯(cuò)Property value does not exist&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property value does not exist on type HTMLElement解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React Fiber的工作原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了React組件中的this的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
這篇文章主要介紹了React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié),需本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，要的朋友可以參考下2021-08-08