React?Native怎么采用Hermes熱更新打包

蝸牛 互聯網技術資訊 2022-05-19 52 0

這篇文章主要介紹“React?Native怎么采用Hermes熱更新打包”,在日常操作中,相信很多人在React?Native怎么采用Hermes熱更新打包問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”React?Native怎么采用Hermes熱更新打包”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

1, 背景

如果我們打開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
????}

此段代碼的含義是,如果開啟了就采用新的hermes,如果未開啟則采用老的jsc加載引擎。Hermes 是專門針對 React Native 應用而優化的全新開源 JavaScript 引擎。對于很多應用來說,啟用 Hermes 引擎可以優化啟動時間,減少內存占用以及空間占用。

2,熱更新傳統方案

在傳統的熱更新方案中,我們實現熱更新需要借助code-push開源方案,熱更新包的發布有兩種方式:

  • code-push release-react:打bundle并自動上傳

  • code-push release:需先打bundle,再通過該命令上傳

如果采用code-push release-reactapp熱更新后,殺掉進程重新進入,app首屏加載的時候速度會很慢,甚至可能出現白屏。這是因為生成的bundle只是通過babel編譯轉碼,然后經過js壓縮和削減,代碼的執行效率并不高。

React?Native怎么采用Hermes熱更新打包  react 第1張

而開啟Hermes引擎后,可以執行純文本的 JS 代碼,效率比替換js引擎前更低,執行效率也更高。

3,使用Hermes打包

首先,我們執行react-native bundle命令進行打包,比如。

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

接下來,我們需要將bundle轉成字節碼。轉化前,我們需要先下載hermes-engine。

npm?i?hermes-engine

接著,執行如下命令將bundle轉換成字節碼

?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刪掉,將當前的index.android.bundle.hbc重命名為index.android.bundle,再移動到之前bundle目錄下。最后,使用下面的命令執行 bundle熱更新包的發布。

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

使用這種方式后,下次有熱更新的時候,加載的速度比之前也有明顯的提升,特別是bundle包內容比較大的時候。

到此,關于“React?Native怎么采用Hermes熱更新打包”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注蝸牛博客網站,小編會繼續努力為大家帶來更多實用的文章!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看