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

這篇文章主要介紹“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壓縮和削減，代碼的執行效率并不高。

而開啟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熱更新打包”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！