React Native采用Hermes热更新打包方案详解

目录
  • 1， 背景
  • 2，热更新传统方案
  • 3，使用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热更新打包方案详解的文章就介绍到这了,更多相关React Native热更新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈react-native热更新react-native-pushy集成遇到的问题

    主要步骤按官方文档实现,这里只记录遇到的一些小坑 官方文档 run-android时NDK报错 前提是NDK已安装并且环境变量已设置 根据报错提示在 android/local.properties 文件里加入 ndk.dir=~/Library/Android/android-ndk-r10e //这里改成你自己的ndk路径 以上这篇浅谈react-native热更新react-native-pushy集成遇到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • React Native 实现热更新并自动签名打包功能

    项目背景:手动link的安卓App 1.下载 react-native-code-push npm install --save react-native-code-push 2.在android/settings.gradle文件下新增: include ':app', ':react-native-code-push' project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../no

  • 浅谈React Native打包apk的坑

    浅谈React Native打包apk的坑

    RN的打包,大家可以根据官网一步一步来,但这里有几个地方注意,一下简单介绍: 生成一个签名密钥 在项目的目录下打开cmd命令窗口输入一下命令运行: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息.最后它会生成一个叫做my-re

  • React Native采用Hermes热更新打包方案详解

    React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • React Native 中实现确认码组件示例详解

    React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • IDEA SpringBoot项目配置热更新的步骤详解(无需每次手动重启服务器)

    IDEA SpringBoot项目配置热更新的步骤 1.在pom.xml中添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> 2.在pom.xml中添加插件: <

  • react组件的创建与更新实现流程详解

    react组件的创建与更新实现流程详解

    目录 React源码执行流程图 legacyRenderSubtreeIntoContainer legacyCreateRootFromDOMContainer createLegacyRoot ReactDOMBlockingRoot createRootImpl createContainer createFiberRoot createHostRootFiber createFiber updateContainer 总结 这一章节就来讲讲ReactDOM.render()方法的内部实现

  • 微信Android热更新Tinker使用详解(星空武哥)

    微信Android热更新Tinker使用详解(星空武哥)

    Tinker是什么 Tinker是微信官方的Android热补丁解决方案,它支持动态下发代码.So库以及资源,让应用能够在不需要重新安装的情况下实现更新.当然,你也可以使用Tinker来更新你的插件. 它主要包括以下几个部分: gradle编译插件: tinker-patch-gradle-plugin 核心sdk库: tinker-android-lib 非gradle编译用户的命令行版本: tinker-patch-cli.jar 为什么使用Tinker 当前市面的热补丁方案有很多,其中比较

  • React Native Modal 的封装与使用实例详解

    React Native Modal 的封装与使用实例详解

    目录 背景 Android FullScreenModal 的封装使用 Android 原生实现全屏 Dialog 封装给 RN 进行相关的调用 Android 原生部分实现 JS 部分实现 使用 RootSiblings 封装 Modal 实现界面 Render 相关 实现 Modal 展示动画相关 使用 View 封装 Modal 整体 Modal 控件的封装 其他 Android Back 键的注意 View 封装 Modal 时候的注意 最后 背景 在使用 React Native(以下

  • React Native中NavigatorIOS组件的简单使用详解

    一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android

  • Android使用美团多渠道打包方案详解

    Andorid渠道市场有多分散呢?分散到比Android碎片化还严重,你还在为多渠道打包而头疼吗?美团提供了速度快到白驹过隙的多渠道打包方案.说的有点夸张,对,虽然夸张,但是确实很快,不夸张不足以形容其快.废话不多说,先讲原理,再讲实践方法. 新旧打包方法原理对比讲解 传统方式 在AndroidManifest定义渠道的年代,多渠道打包无非以下两种方案: 方案一:完全的重新编译,即在代码重新编译打包之前,在AndroidManifest中修改渠道标示: 方案二:通过ApkTool进行解包,然后修

  • React的生命周期函数初始挂载更新移除详解

    React的生命周期函数初始挂载更新移除详解

    目录 概述 constructor 初始 挂载 更新 移除 概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数 初始 当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被

  • vite + electron-builder 打包配置详解

    目录 创一个vite项目 安装打包工具 配置桌面环境 创建 主进程 main.js 添加electron 运行命令 打包项目,生成dist 解决资源无法加载 开发环境:热更新 两个工具 concurrently wait-on 打包exe 解决index.html找不到的问题 创一个vite项目 npm init vite 安装打包工具 npm i -D electron // 20.1.0 npm i -D electron-builder // 23.3.3 electron是开发时运行环境

随机推荐