Hermes: Facebook 的高性能 JavaScript 引擎

Hermes: Facebook 的高性能 JavaScript 引擎

hermesA JavaScript engine optimized for running React Native.项目地址:https://gitcode.com/gh_mirrors/hermes/hermes

项目介绍

Hermes 是由 Facebook 开发的一款专门用于 React Native 应用程序的高性能 JavaScript 引擎. 它旨在提高应用程序在运行时的性能，提供更好的开发体验并优化内存使用。Hermes 通过其即时（JIT）编译器显著提升应用执行速度。

Hermes 还能够支持自动内存管理，这使得开发者不需要关心垃圾回收的问题，从而能够更专注于应用程序的功能开发。此外，它还提供了与现有 React Native 项目无缝集成的能力，这意味着开发者可以轻松地将现有的 React Native 应用转换为使用 Hermes 的版本。

项目快速启动

要使用 Hermes 快速启动一个新项目或向现有项目添加 Hermes，你可以遵循以下步骤：

步骤一：安装 Hermes

首先，确保你的系统已经安装了 Git 和 Node.js。然后，在终端中运行下面的命令以克隆 Hermes 的仓库到本地:

git clone https://github.com/facebook/hermes.git
cd hermes/

接下来, 在 hermes 文件夹中执行 npm install 来安装所有必要的依赖项:

npm install

步骤二：配置项目以使用 Hermes

对于一个新的 React Native 项目，你可以在创建项目时指定使用 Hermes 引擎:

react-native init myProject --hermes
cd myProject

对于现有的 React Native 项目，你需要修改android/app/build.gradle文件中的enableHermes属性使其为 true:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "30.0.3"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31
        ndkVersion = "21.3.6528147"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.1.0")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.facebook.react:react-native:+'
        // Enables Gradle to resolve the react-native module instead of downloading it from a repository.
        classpath "com.facebook.react:react.gradle:+"        
        classpath 'com.google.gms:google-services:4.3.10'

        if (!hasProperty("ANDROID_DISABLE_NDK")) {
            classpath "com.facebook.fbjni:javacpp-presets:${version.fbjni}"
        }

        implementation "org.mozilla.rust-android-ffi:rffi:0.2.0"

        // Workaround until https://fburl.com/fix-nodemodules-duplication is fixed.
        def dedupeNodeModules = { String groupId -> configurations.implementation.matching { it.name.contains(groupId) }.each {
            configurations.implementation.remove it;
        }};
        dedupeNodeModules('com.facebook.react');
        dedupeNodeModules('com.facebook.common');
        dedupeNodeModules('com.facebook.drawee');
        dedupeNodeModules('com.facebook.imagepipeline');

        // Uncomment this line to use a specific version of the RN SDK
        // rootProject.ext["reactNativeSDKVersion"] = "0.68.3"
    }
}

allprojects {
    repositories {
        mavenLocal()
        mavenCentral()

        google()
        jcenter()

        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }

        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
    }
}

apply plugin: 'com.facebook.jni-lib-builder'

apply plugin: 'com.android.application'

apply from: "../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"

apply plugin: 'com.google.gms.google-services'

def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def enablesCrashlyticsCollection = false


project.ext.react = [
        entryFile: "index.js",
        enableHermes: false   // Switch it to true if you want to use Hermes instead of JSC
]

apply plugin: "com.facebook.react.Application"

dependencies {
    debugImplementation(name:'react',ext:'debug') 
    releaseImplementation(name:'react',ext:'release')
    annotationProcessor "com.sun:tools:1.6.0"
}


task wrapper(type: Wrapper) {
    gradleVersion = '6.8.3'
}

确保将 enableHermes 设置为 true。这样，当你构建项目时，React Native 将使用 Hermes 而不是默认的 JavaScriptCore 引擎。

步骤三：构建项目

最后，你需要使用react-native run-android命令来构建和运行你的项目：

cd path/to/my-project
npx react-native run-android

完成这些步骤后，你应该能在 Android 设备上看到带有 Hermes 引擎的应用程序正在运行。

应用案例和最佳实践

Hermes 可以为各种类型的 React Native 应用带来显著的性能改进。一些主要的应用场景包括高负载图形交互、实时数据处理以及复杂的动画效果。在这些情况下，Hermes 通过对代码进行预编译和优化，减少了应用程序的加载时间，并提高了用户界面的响应速度。

最佳实践

为了充分利用 Hermes 的优势，建议采取以下最佳实践：

利用 Hermes 的热更新能力

Hermes 支持 Hot Module Replacement (HMR)，允许你在不重新加载整个应用程序的情况下替换组件。这对于快速迭代和调试非常有用。

使用 Hermes 对生产环境进行性能优化

当部署应用程序时，将 Hermes 作为默认的 JavaScript 引擎启用。这将帮助减少内存消耗和提高渲染性能。

避免频繁重绘

避免不必要的 UI 更新可以帮助保持 Hermes 的高效运作。尽量复用组件和状态来减少重绘次数。

缓存和复用

利用缓存机制来存储计算结果或渲染过的部分。这样可以降低每次请求所需的时间成本，尤其是在数据密集型应用中尤为重要。

模块化架构设计

采用模块化设计可以使代码更加易于维护和扩展。同时，通过将功能分解成独立的小模块，可以更容易地对它们进行性能分析和优化。

典型生态项目

Hermes 不仅仅局限于 React Native。随着它的成熟与发展，越来越多的相关项目和技术开始融入 Hermes 生态系统中。以下是一些值得关注的典型案例：

1. Expo : Expo 构建平台已宣布支持 Hermes，这意味着你可以将 Hermes 引入 Expo 创建的应用中，以获得更好的性能表现。

2. Amplify : AWS Amplify CLI 也集成了对 Hermes 的支持，使开发者能够在使用 AWS Amplify 开发的项目中享受到 Hermes 带来的性能提升。

3. Detox : Detox 是一种端到端测试框架，适用于 React Native 应用。最新版的 Detox 已经进行了更新，以确保与 Hermes 的兼容性。

4. Flipper : Flipper 是 Facebook 开源的一种调试工具，现在也支持 Hermes 引擎，使开发者可以通过 Flipper 更深入地了解应用程序的运行情况。

5. MSAL : Microsoft 身份验证库 MSAL 也已更新以支持 Hermes。使用 MSAL 的 React Native 应用现在可以更好地利用 Hermes 提供的优势。

以上是 Hermes 目前已知的一些典型生态项目。随着时间推移，这个列表将会不断增长，因为更多的开发者和团队认识到 Hermes 所带来的好处，并选择将其整合进自己的项目中。

hermesA JavaScript engine optimized for running React Native.项目地址:https://gitcode.com/gh_mirrors/hermes/hermes