詳解React Native項目中啓用Hermes引擎

引言

目前，最新版本的React Native（0.70.0及以上版本）已經默認開啓了Hermes引擎。而Hermes則是專門針對React Native應用而優化的全新JavaScript引擎，啓用Hermes引擎可以優化啓動時間，減少內存佔用以及空間佔用。

一、啓用 Hermes 引擎

1.1 Android

如果我們打開React Native項目的Android源碼，會在app/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引擎，只需要將enableHermes屬性值設置成true即可，如下所示。

project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]

另外，如果您正在使用ProGuard，還需要在ProGuard -rules.pro中添加如下的混淆規則。

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

然後，使用如下的命令重新編譯項目，並運行項目。

cd android && ./gradlew clean
npx react-native run-android

1.2 iOS

從React Native 0.64開始，Hermes也支持在iOS上運行。要啓用Hermes for iOS，需要打開iOS/Podfile文件，並進行如下更改。

   use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
     # By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
     # You can enable/disable it manually by replacing `flags[:hermes_enabled]` with `true` or `false`.
-    :hermes_enabled => flags[:hermes_enabled],
+    :hermes_enabled => true
   )

如果需要在iOS中開啓Hermes引擎，需要將上面的hermes_enabled 的值修改爲 true。完成上述配置之後，再使用下面的命令重新運行項目。

cd ios && pod install
npx react-native run-ios

如果iOS使用的是Mac M1的架構，可能還會遇到Cocoapods 的一些兼容問題。如果在安裝 pods依賴時出現問題，可以嘗試運行下面的命令：

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

以上命令會安裝ffi包，用於在安裝和裝載 pods 時調用合適的系統架構。

二、Hermes 引擎使用

2.1 檢查 Hermes 引擎是否啓用

如果我們創建了一個新的React Native應用程序，想要在應用中查看是否啓用Hermes，那麼可以使用下面的方式。

const isHermes = () => !!global.HermesInternal;

想要體驗開啓Hermes帶來的好處，可以嘗試重新運行項目來進行對比。

npx react-native run-android --variant release
npx react-native run-ios --configuration Release

2.2 綁定Hermes

從React Native 0.69開始，每個版本的React Native都會綁定一個Hermes版本。每當我們發佈React Native的新版本時，官方都會爲開發者構建一個Hermes的版本，目的是確保使用的Hermes版本與React Native版本的完全兼容。

這是因爲，從歷史上版本來看，我們在匹配Hermes的版本和React Native的版本時遇到過兼容性問題。爲了完全消除這類問題，我們爲開發者提供了一個與特定React Native版本兼容的JS引擎。

同時，這些更改對React Native開發者是完全透明的，您仍然可以根據配置來啓用/禁用Hermes引擎。

2.3 使用DevTools在Hermes上調試JS

Hermes通過實現Chrome檢查器協議來支持Chrome調試器，這意味着，我們可以直接使用Chrome的DevTools工具來直接調試運行JavaScript代碼。

同時，Chrome通過Metro連接運行在設備上的Hermes，所以我們需要知道Metro監聽的端口。通常，默認的監聽地址是localhost:8081，不過這都是可以配置的。當運行yarn啓動時，該地址在啓動時被寫入stdout。

一旦我們知道了Metro服務器監聽的端口，接下來就可以使用以下步驟連接Chrome：

• 在Chrome瀏覽器中輸入chrome://inspect。
• 然後在Chrome瀏覽器中輸入localhost:8081開啓調試。

現在，會看到一個帶有“inspect”鏈接的“Hermes React Native”目標，可以用來調出調試器；如果沒有看到“inspect”鏈接，請確保Metro服務器正在運行。

現在，我們就可以使用Chrome調試工具進行代碼調試了，如下圖所示。