Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how React Native uses Hermes hot update packaging". In daily operation, I believe many people have doubts about how React Native uses Hermes hot update packaging. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how React Native uses Hermes hot update packaging"! Next, please follow the small series to learn together!

1, background

If we open RN's Android source code, we will see this code in 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 }

This code means that if it is turned on, the new hermes will be used, if it is not turned on, the old jsc loading engine will be used. Hermes is a new open source JavaScript engine optimized for React Native apps. For many applications, enabling the Hermes engine optimizes startup time and reduces memory and space usage.

2, hot update traditional program

In the traditional hot update solution, we need to use code-push open source solution to implement hot updates. There are two ways to release hot update packages:

code-push release-react: bundle and upload automatically

code-push release: you need to type bundle first, and then upload it through this command

If you use code-push release-reactapp hot update, kill the process to re-enter, the app first screen loading speed will be very slow, and even white screen may appear. This is because the bundle generated is only transcoded by babel, and then compressed and reduced by js, and the code execution efficiency is not high.

After opening the Hermes engine, you can execute plain text JS code, which is less efficient than before replacing the JS engine, and the execution efficiency is higher.

3, using Hermes packaging

First, we execute the react-native bundle command to package, for example.

react-native bundle --platform android --entry-file index.android.js --bundle-output ./ bundles/index.android.bundle --assets-dest ./ bundles --dev false

Next, we need to convert the bundle into bytecode. Before conversion, we need to download hermes-engine.

npm i hermes-engine

Next, execute the following command to convert the bundle to bytecode

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

Remove index.android.bundle from the previous bundle directory, rename the current index.android.bundle.hbc to index.android.bundle, and move it to the previous bundle directory. Finally, perform the release of the bundle hot update package using the following command.

code-push release AndroidAppNamexx ./ bundles 1.0.0 --d Staging --des "Description" --m true

Using this method, the next time there is a hot update, the loading speed is also significantly faster than before, especially when the bundle content is relatively large.

At this point, the study of "How to use Hermes hot update package for React Native" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.