使用 新的 Hermes 引擎
Hermes 是专门针对 React Native 应用而优化的全新开源 JavaScript 引擎。对于很多应用来说,启用 Hermes 引擎可以优化启动时间,减少内存占用以及空间占用。从 React Native 0.70 版本开始 Hermes 已经默认启用,无需开发者再做任何配置。
Bundled Hermes
React Native 自带一个捆绑版本的 Hermes。 每当我们发布新版本的 React Native 时,我们都会为您构建一个 Hermes 版本。这将确保您使用的 Hermes 版本与您使用的 React Native 版本完全兼容。
历史上,我们在将 Hermes 版本与 React Native 版本匹配方面遇到了问题。这完全消除了这个问题,并为用户提供了与特定 React Native 版本兼容的 JS 引擎。
这个改变对 React Native 的用户来说是完全透明的。您仍然可以使用本页描述的命令禁用 Hermes。 您可以在此页面上阅读更多有关技术实现的信息。
确认 Hermes 引擎是否启用
如果您最近从头开始创建了一个新的应用程序,则可以在欢迎视图中查看是否启用了 Hermes:
一个名为HermesInternal
的全局变量将在 JavaScript 中可用,可用于验证是否正在使用 Hermes:
const isHermes = () => !!global.HermesInternal;
如果您使用了某种非标准的 JS bundle 加载方式,则可能会出现虽然HermesInternal
变量存在,但并没有启用高度优化的预编译字节码的情况。请确认您正在使用.hbc
文件,并按照以下详细说明进行测试前/测试后的性能比较。
要了解 Hermes 的优势,请尝试编译应用的正式发布版本来进行测评。例如:
$ npx react-native run-android --variant release
# or for iOS:
$ npx react-native run-ios --configuration Release
这将在构建时将 JavaScript 编译为字节码,从而提高应用程序在设备上的启动速度。
使用 Google Chrome 的 DevTools 来调试 Hermes 上的 JS
Hermes 通过实现 Chrome 检查器协议来支持 Chrome 调试器。这意味着 Chrome 的工具可以直接在模拟器或实际物理设备上调试 Hermes 上运行的 JavaScript 代码。
请注意,这与调试文档部分中记录的应用内开发人员菜单中的“Remote JS Debugging”非常不同,后者实际上通过您的开发电脑上的 Chrome 的 V8 引擎来运行 JS 代码。
Chrome 通过 Metro 连接到设备上运行的 Hermes,因此您需要知道 Metro 正在侦听的位置。通常这将在localhost:8081
上,但这是可配置的。运行yarn start
时,地址将在启动时写入 stdout。
一旦您知道 Metro 服务器正在侦听的位置,就可以使用以下步骤使用 Chrome 进行连接:
-
在 Chrome 浏览器中导航到
chrome://inspect
。 -
使用
Configure...
按钮添加 Metro 服务器地址(通常为localhost:8081
,如上所述)。
-
现在您应该看到一个名为 "Hermes React Native" 的目标,带有一个 "inspect" 链接,可以用来打开调试器。如果您没有看到 "inspect" 链接,请确保 Metro 服务器正在运行。
-
现在您可以使用 Chrome 调试工具。例如,要在下次运行某些 JavaScript 时设置断点,请单击暂停按钮,并触发您的应用程序中会导致 JavaScript 执行的操作。