如何在现有原生应用中合并多个React Native Bundle并解决重复引入JavaScript Core导致的体积膨胀问题

这个问题在集成多个独立RN模块的原生应用里相当常见，我之前帮团队处理过类似的体积膨胀问题，分享几个业界通用的标准解决方案：

1. 共享JSC实例，消除重复打包 #

每个RN模块默认会内嵌一份JSC（JavaScript Core）副本，这是体积暴涨的核心原因。解决思路是让所有模块共用同一份JSC库：

iOS端配置 #

• 在项目的Podfile中统一指定JSC的依赖，让三个RN模块都引用同一个版本的JSC，而不是各自内嵌。比如可以直接依赖系统的JavaScriptCore.framework（兼容RN版本前提下），或者使用RN提供的预编译JSC静态库：

  # 在Podfile中统一配置，让所有RN模块共享JSC
  pod 'React-jsc', :path => '../node_modules/react-native/ReactCommon/jsc'
  

• 协调三家合作方修改他们的RN模块Pod配置，移除自身内嵌的JSC，改为依赖项目中的公共JSC。

Android端配置 #

• 在项目根目录的build.gradle中统一引入JSC依赖：

  dependencies {
      implementation 'org.webkit:android-jsc:r250230'
  }
  

• 让每个RN模块的build.gradle中排除自身的JSC依赖，避免重复打包：

  dependencies {
      implementation project(':react-native-module-a') {
          exclude group: 'org.webkit', module: 'android-jsc'
      }
  }
  

2. 替换为Hermes引擎，从根源缩小体积 #

Hermes是RN官方推出的轻量级JavaScript引擎，体积比JSC小很多，还支持预编译优化。替换后不仅单个bundle体积会减小，也更容易实现引擎共享：

• 在每个RN模块的配置中启用Hermes：
  • Android：在模块的android/app/build.gradle中设置enableHermes = true
  • iOS：在模块的Podfile中配置use_react_native!(..., :hermes_enabled => true)
• 同样要确保所有模块共用同一个Hermes库，配置方式和共享JSC类似，统一依赖版本，排除模块自身的Hermes副本。

3. 合并多个JS Bundle，共用单份引擎 #

如果三个RN模块的业务逻辑可以兼容同一JS环境，推荐将它们的JS代码合并为一个bundle，这样只需要加载一份引擎（JSC或Hermes）：

• 协调三家合作方提供各自模块的JS入口文件，在统一的RN项目中整合这些入口，通过Metro打包生成一个合并后的combined.bundle
• 在原生应用中只初始化一次RN环境，加载这个合并后的bundle，通过RN的模块系统（比如require或动态import）调用各个合作方的组件/功能
• 提前排查全局变量冲突、依赖版本不一致等问题，必要时让合作方调整模块的代码隔离方案

4. 额外的代码优化措施 #

配合以上方案，还可以进一步压缩体积：

• 启用Metro的Tree Shaking功能，在metro.config.js中配置：

  module.exports = {
    transformer: {
      minifyEnabled: true,
      minifierConfig: {
        keep_fnames: false,
        keep_classnames: false,
      },
    },
  };
  

• iOS端开启Bitcode，让Apple在分发时自动优化二进制体积；Android端启用R8混淆和资源压缩
• 要求合作方清理模块中未使用的代码、第三方依赖，减少bundle冗余

注意事项 #

• 务必和三家合作方充分沟通，确认他们的模块支持共享引擎或合并bundle的方案，可能需要他们调整模块的构建配置
• 完成配置后要全面测试，确保三个模块的功能正常，没有引擎版本不兼容、JS环境冲突等问题
• 对齐所有RN模块的React Native版本、引擎版本，避免因版本差异导致的隐性问题

内容的提问来源于stack exchange，提问作者N Sharma