iOS 动态化模式接入Hermes引擎

大约 6 分钟

iOS 动态化模式接入Hermes引擎

概述

本文档主要介绍如何在Kuikly JS模式下接入Hermes引擎。

Hermes引擎是由Facebook开发的专为移动平台设计的高效JavaScript引擎，旨在提供更快的启动速度和更小的内存占用，目前已在React Native、Hippy等项目中得到广泛应用。默认情况下，Kuikly JS模式在iOS平台使用JavaScriptCore引擎。本文档将详细介绍如何在Kuikly JS模式下接入Hermes引擎，并进行相关配置。

环境要求

支持iOS 12.0及以上版本。 SDK版本：2.8.0-beta 及以上 （内网版本）

Tips： 内网产物版本查询地址：https://git.woa.com/T-CocoaPods/Specs/tree/master/KuiklyIOSRender/open in new window 具体版本特性内容可在Github release中查看：https://github.com/Tencent-TDS/KuiklyUI/releasesopen in new window

接入步骤

Tips： 首先请参考《iOS 动态化》文档完成Kuikly JS模式接入，再根据本文进行Hermes引擎切换。

1. iOS平台侧接入指引

1.1 更新Podfile文件

在项目Podfile文件中，更新原有KuiklyIOSRender依赖为使用Hermes引擎的版本，并新增Hermes引擎的相关依赖。具体更新如下：

# hermes版本规则为在标准版本上添加“-hermes”后缀
# 比如内网“2.8.0-beta”对应的支持hermes的版本就为“2.8.0-beta-hermes”
pod 'KuiklyIOSRender', :tag => '2.8.0-beta-hermes'
pod 'hippy_hermes', '1.0.2' # 新增Hermes引擎依赖

修改后, 执行pod install命令更新依赖。

1.2 修改iOS项目接入代码，启用Hermes引擎

完成上述依赖更新后，项目已具备了切换至Hermes引擎的能力，但默认情况下Hermes引擎是禁用的，需要在 Kuikly 框架接入代码中主动启用。

KuiklyHermes 模块在KuiklyRenderViewControllerDelegatorDelegate协议中新增了如下方法，用于启用Hermes引擎。

/*
 * @brief JS模式下是否使用Hermes JS引擎（默认使用JSC引擎）
 * @return 是否启动Hermes引擎
 */
- (BOOL)shouldUseHermesEngine:(NSString *)pageName;
/*

 * @brief JS HotReload模式下是否加载Hermes hbc文件（默认使用js文件）
 * @return 是否加载hbc文件
 * 一般情况下无需设置，推荐hermes调试时使用js文件
 */
- (BOOL)useHermesHBCForHotReload:(NSString *)pageName;

在Kuikly框架的接入代码中实现该协议方法，返回YES即可启用Hermes引擎。是否启用Hermes引擎的逻辑可以在shouldUseHermesEngine:方法中进行配置，例如根据页面名称或者特定条件来决定是否启用Hermes引擎。

注意： Hermes动态化模式下必须实现KuiklyRenderViewControllerDelegatorDelegate 的 - (NSURL *)contextUrl; 代理方法，返回正确的Hermes hbc文件 url。否则引擎将无法正常初始化。

2. Kuikly项目侧接入指引

在Kuikly JS模式下，原输出产物为.js文件。启用Hermes引擎后，需使用Hermes编译器将输出产物预编译为.hbc文件，以发挥Hermes引擎的最佳性能。（Hermes引擎也支持直接加载.js文件，但性能不佳，因此仅可在开发调试阶段使用，生产环境务必使用.hbc文件。）

主要步骤如下：

2.1 安装Hermes编译器依赖项

Hermes 编译器可以将 JavaScript 代码转换为 Hermes 字节码（HBC），以便在 Hermes 引擎中运行。为了在项目中使用Hermes编译器，需要安装相关的依赖项。

在项目根目录执行以下命令：

npm install @hippy/hermesc --save-dev

执行后会将Hermes编译器添加到项目的开发依赖中，以便在构建过程中使用。

2.2 修改build.gradle.kts文件

首先，确保项目依赖的kuikly插件（com.tencent.kuikly:core-gradle-plugin）版本支持Hermes引擎，例如大于等于xxxx（待发布正式版，请联系kuikly团队）。

然后，在对应Kuikly模块的build.gradle.kts文件中，修改kuikly插件配置项以启用Hermes编译，配置示例如下：

kuikly {
    js {
        outputName(jsOutputName)

        // 开启Hermes编译，输出HBC文件
        enableHermesCompile = true
    }
    // 其他配置项...
}

修改后，在Android Studio中，点击File -> Sync Project with Gradle Files，确保所有依赖项已正确同步。

至此，你已经成功启用了Kuikly插件的Hermes编译功能。可尝试执行如下命令来验证Hermes编译是否成功：

./gradlew :your_module_name:packLocalJSBundleRelease

如果一切顺利，你将看到输出文件中包含HBC文件，这表明Hermes编译已成功启用。

注意，由于Hermes引擎不支持部分语法（Hermes语法兼容性说明open in new window），因此Debug模式下还需要禁用js local eval模式，以便Hermes引擎能够正常工作，具体步骤参见如下小节。

2.3 新增webpack.config.d配置项（for Debug模式）

在对应模块的根目录下创建一个名为webpack.config.d的文件夹，并在其中添加一个js文件，比如source-map-no-eval.js（文件名可自定义），内容如下：

config.devtool = 'source-map';
image.png
image.png

2.4 充分验证Hermes引擎在调试模式以及Release模式下均能正常工作

至此，Hermes引擎的集成和配置已经完成。接下来需要验证Hermes引擎在调试模式以及Release模式下均能正常工作，并且在不同设备上的兼容性和性能表现均符合预期。

3. Q&A

3.1 Hermes引擎性能效果如何？

Hermes引擎在性能方面表现出色，特别是在启动速度和内存占用方面有着显著的优势。根据Kuikly微博Demo场景测试数据，Hermes引擎的启动速度比JavaScriptCore快了47%，首次进入内存占用减少了约50%（测试环境：iPhone12，iOS18.4）。这对于移动应用来说是一个巨大的提升，能够显著改善用户体验。

3.2 安装包大小会增加多少？

IPA增加约1~2MB。增量主要来自于Hermes引擎的引入；同时，如果发布产物会内置到应用中，由于Hermes编译产物（HBC文件）相比原始JS文件更大，因此安装包大小也会略有增加，这部分与具体项目有关，增量相对较小。

3.3 必须一次性升级所有相关模块吗？

不需要一次性升级所有模块，Kuikly支持仅对特定模块开启Hermes引擎（Page级别），具体操作可参考上述集成步骤。

3.4 试用Hermes引擎后如何调试？

目前Hermes引擎的调试主要依赖于日志输出，未来我们会考虑增加更多调试手段。因此开发模式下建议暂时依然使用JSC引擎进行调试，生产模式下再切换到Hermes引擎。

3.5 其他注意事项

  • 由于Hermes与JSC引擎产物格式不兼容，因此升级后需特别注意资源文件加载的正确性，避免因版本不兼容导致的问题。
  • 在升级过程中，建议先在小范围内进行测试，确保无误后再大规模推广。
  • 如果遇到问题，可以参考Hermes官方文档或联系Kuikly团队获取帮助。
上次编辑于:
Kuikly AI助手