iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >React Native怎么采用Hermes热更新打包
  • 950
分享到

React Native怎么采用Hermes热更新打包

2023-06-30 14:06:09 950人浏览 泡泡鱼
摘要

这篇文章主要介绍“React Native怎么采用Hermes热更新打包”,在日常操作中,相信很多人在React Native怎么采用Hermes热更新打包问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希

这篇文章主要介绍“React Native怎么采用Hermes热更新打包”,在日常操作中,相信很多人在React Native怎么采用Hermes热更新打包问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React Native怎么采用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压缩和削减,代码的执行效率并不高。

React Native怎么采用Hermes热更新打包

而开启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热更新打包”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: React Native怎么采用Hermes热更新打包

本文链接: https://www.lsjlt.com/news/329671.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React Native怎么采用Hermes热更新打包
    这篇文章主要介绍“React Native怎么采用Hermes热更新打包”,在日常操作中,相信很多人在React Native怎么采用Hermes热更新打包问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希...
    99+
    2023-06-30
  • React Native采用Hermes热更新打包方案详解
    目录1, 背景2,热更新传统方案3,使用Hermes打包1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码。 if (enableH...
    99+
    2024-04-02
  • react 怎么实现热更新
    本教程操作环境:Windows10系统、react18版、Dell G3电脑。react 怎么实现热更新?[React] create-react-app 实现热更新一、使用以下命令行下载 react-hot-loaderyarn add ...
    99+
    2023-05-14
    React
  • java热更新jar包怎么实现
    要实现Java热更新jar包,可以使用以下几种方法: 使用类加载器:Java中的类加载器可以动态加载和卸载类,因此可以使用类加载...
    99+
    2023-10-25
    java jar
  • 怎么用import.meta实现热更新
    这篇“怎么用import.meta实现热更新”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用import.meta实现热...
    99+
    2023-06-30
  • 使用CocosCreator怎么实现热更新
    今天就跟大家聊聊有关使用CocosCreator怎么实现热更新,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。什么是热更热更(新)本质上是从服务器下载需要的资源到本地,并且可以执行新的...
    99+
    2023-06-14
  • react native中怎么利用FlatList实现下拉刷新上拉加载功能
    本篇文章为大家展示了react native中怎么利用FlatList实现下拉刷新上拉加载功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。android效果图总体...
    99+
    2024-04-02
  • React-Router6版本更新引起的路由变化怎么用
    这篇文章主要介绍了React-Router6版本更新引起的路由变化怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React-Router6版本更新引起的路由变化怎么用文章都会有所收获,下面我们一起来看看吧...
    99+
    2023-06-26
  • Win10 1903最新更新打印机和Office无法使用怎么办
    这篇文章给大家分享的是有关Win10 1903最新更新打印机和Office无法使用怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Win10 1903最新更新打印机和Office无法使用:目前,微软已经证实 ...
    99+
    2023-06-13
  • Win10/Win7/Win8.1怎么使用注册表给CAB更新包添加右键安装项?
    我们曾经介绍过手动安装CAB更新包的方式,不过这种方法还是有些麻烦。如果使用本文介绍的方法,就可以一劳永逸地直接安装此类更新包了。这个方法还是要用到注册表,但并不麻烦,适用于Win7/Win8.1/Win10系统。 软媒...
    99+
    2023-05-21
    Win10 CAB 注册表
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作