单Bundle打包

​ 在构建基本 ReactJs OpenHarmony 化环境后使用打包命令 react-native bundle-harmony，通过打包配置项配置输入文件路径、输出文件路径等。默认输入文件路径为 JS 项目根目录的 index.js 文件，默认输出文件路径为 ./harmony/entry/src/main/resources/rawfile/bundle.harmony.js。

一般应用ReactJs OpenHarmony后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点：

• 页面启动速度&内存占用增加 这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的消耗是不应该的。

• 更新流量消耗增加 要更新某块代码必须下发整个bundle，尽管只更新其中1/10部分的代码。

官方的打包并没有做类似拆分的事情，它打包出来就是一份bundle+资源。可能唯一值得一提的是它的unbundle ( https://github.com/facebook/react-native/blob/master/local-cli/bundle/output/unbundle/index.js )，它会将所有module进行拆分。那今天我就分享一下最近研究的成果，对RN打出来的bundle进行处理并自定义拆分代码&资源，一种无侵入式的后处理机制。不够完美，但是基本可用。

执行命令生成bundle 文件：

在 HarmonyRNShop 目录下运行生成 bundle 文件的命令。运行成功后，会在 HarmonyRNShop/harmony/entry/src/main/resources/rawfile 目录下生成 bundle.harmony.js 和 assets 文件夹，assets 用来存放图片（如果 bundle 中不涉及本地图片，则没有 assets 文件夹）。

npm run dev

如果运行时报错 “'react-native’不是内部或外部命令，也不是可运行的程序或批处理文件。”，请重新运行 npm install 命令。

可以在 HarmonyRNShop/harmony/entry/src/main/resources/rawfile 目录下看到生成的 bundle.harmony.js 和 assets 文件夹。

也可以使用 Metro 服务来加载 bundle 包：

Metro服务加载bundle包主要有三种方式，分别适用于不同场景：

1. 本地资源加载（rawfile）

将打包好的bundle文件（如bundle.harmony.js或Hermes字节码hermes_bundle.hbc）放入项目的entry/src/main/resources/rawfile/目录下。这种方式适合线上发布或无需热更新的场景，性能稳定可靠。

2. Metro服务加载（开发调试）

在开发阶段使用Metro开发服务器实现热重载功能。这种方式支持实时代码修改和快速刷新，极大提升开发效率。

3. 沙箱目录加载（文件系统）

从设备文件系统的沙箱目录中加载bundle文件，适合需要动态更新或分场景加载的应用。

Metro打包流程详解，Metro的打包过程分为三个独立阶段：

‌- 解析阶段‌：扫描所有模块并构建依赖关系图
‌- 转换阶段‌：将模块转换为目标平台可识别的格式
‌- 序列化阶段‌：将所有模块打包成一个或多个bundle文件

在原生工程中集成RNOH， 补充CPP侧代码在

cpp 目录下新增 CMakeLists.txt，并将 RNOH 的适配层代码添加到编译构建中生成 librnoh_app.so：

  project(rnapp)
  cmake_minimum_required(VERSION 3.4.1)
  set(CMAKE_SKIP_BUILD_RPATH TRUE)
  set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
  set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")

  set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp")
  set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
  set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
  set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
  add_compile_definitions(WITH_HITRACE_SYSTRACE)
  set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use

  add_subdirectory("${RNOH_CPP_DIR}" ./rn)

  add_library(rnoh_app SHARED
      "./PackageProvider.cpp"
      "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
  )

  target_link_libraries(rnoh_app PUBLIC rnoh)