优化构建阶段速度
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
构建 React Native 应用可能会非常耗时,每次构建都会占用开发者数分钟的时间。当项目规模增长时,或是在拥有多名 React Native 开发者的大型组织中,这个问题会变得尤为突出。
为了缓解这一性能瓶颈,本文将分享几种优化构建时间的有效方法。
请注意:这些优化方案属于高级功能,需要您对原生构建工具的工作原理有一定理解。
开发阶段仅构建一种 ABI(仅限 Android)
在本地构建 Android 应用时,默认会编译全部 4 种 应用二进制接口(ABI):armeabi-v7a、arm64-v8a、x86 和 x86_64。
但如果你只是在本地构建并在模拟器或物理设备上测试,通常不需要编译所有架构。
这种优化可以将原生构建时间减少约 75%。
如果使用 React Native CLI,可以在 run-android 命令后添加 --active-arch-only 标志。该标志会从正在运行的模拟器或已连接的设备自动选择正确的 ABI。验证方法:在控制台看到类似 info Detected architectures arm64-v8a 的信息即表示生效。
$ yarn react-native run-android --active-arch-only
[ ... ]
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1037 file(s) to forward-jetify. Using 32 workers...
info JS server already running.
info Detected architectures arm64-v8a
info Installing the app...
该机制依赖于 reactNativeArchitectures 这个 Gradle 属性。
因此,如果直接通过命令行使用 Gradle 构建(不通过 CLI),可以按以下方式指定要构建的 ABI:
$ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64
这在 CI 上构建 Android 应用时特别有用,你可以通过矩阵并行化编译不同架构。
如需在本地覆盖该值,可以修改项目顶层目录中的 gradle.properties 文件:
# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
构建正式发布版本时,请务必移除这些标志,因为你需要生成支持所有 ABI 的 apk/app bundle,而不仅仅是日常开发使用的单一架构。
启用配置缓存(仅限 Android)
自 React Native 0.79 起,您可启用 Gradle 配置缓存功能。
执行 yarn android 构建 Android 应用时,Gradle 构建过程分为两个阶段(来源):
-
配置阶段:解析评估所有
.gradle文件 -
执行阶段:实际执行编译 Java/Kotlin 代码等任务
启用配置缓存后,后续构建将跳过配置阶段。
该优化能显著提升原生代码频繁修改时的构建效率。
下图展示了 RN-Tester 在原生代码变更后启用配置缓存的加速效果:

在 android/gradle.properties 文件中添加以下配置即可启用:
org.gradle.configuration-cache=true
更多配置缓存资源请参阅 Gradle 官方文档。
使用 Maven 镜像(仅限 Android)
构建 Android 应用时,Gradle 需从 Maven Central 等远程仓库下载依赖项。
如果您的组织运行了 Maven 仓库镜像,建议您使用它,因为从镜像而非互联网下载构件将显著加快构建速度。
在 android/gradle.properties 文件中配置 exclusiveEnterpriseRepository 属性即可启用镜像:
# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true
# Use this property to configure a Maven enterprise repository
# that will be used exclusively to fetch all of your dependencies.
+exclusiveEnterpriseRepository=https://my.internal.proxy.net/
设置此属性后,构建过程将仅从指定仓库获取依赖。
使用编译器缓存
如果需要频繁进行原生构建(C++ 或 Objective-C),使用编译器缓存会带来显著收益。
具体有两种缓存类型可用:本地编译器缓存和分布式编译器缓存。
本地缓存
以下说明适用于 Android 和 iOS:
- 如果仅构建 Android 应用,可直接使用本方案
- 如果同时构建 iOS 应用,请额外遵循下方 Xcode 专属设置 的说明
建议使用 ccache 缓存原生构建的编译结果。它的工作原理是封装 C++ 编译器:存储编译结果,当遇到相同中间文件时直接跳过编译过程。
Ccache 可通过大多数操作系统的包管理器获取。在 macOS 上,我们可以使用 brew install ccache 命令安装。您也可以按照官方安装说明从源码编译安装。
你可以执行两次全新构建验证效果(例如在 Android 项目:先运行 yarn react-native run-android,删除 android/app/build 目录后再次运行)。第二次构建速度会明显提升(耗时从分钟级降至秒级)。构建过程中可通过 ccache -s 查看缓存命中率,验证 ccache 是否正常工作。
$ ccache -s
Summary:
Hits: 196 / 3068 (6.39 %)
Direct: 0 / 3068 (0.00 %)
Preprocessed: 196 / 3068 (6.39 %)
Misses: 2872
Direct: 3068
Preprocessed: 2872
Uncacheable: 1
Primary storage:
Hits: 196 / 6136 (3.19 %)
Misses: 5940
Cache size (GB): 0.60 / 20.00 (3.00 %)
注意,ccache 会累计所有构建的统计信息。你可以在构建前使用 ccache --zero-stats 重置统计信息,以验证缓存命中率。
如需清除缓存,可使用 ccache --clear 命令。
Xcode 特定设置
为确保 ccache 在 iOS 和 Xcode 中正常工作,你需要在 ios/Podfile 文件中启用 React Native 对 ccache 的支持。
在编辑器中打开 ios/Podfile 文件,并取消注释 ccache_enabled 这一行。
post_install do |installer|
# https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
# TODO: Uncomment the line below
:ccache_enabled => true
)
end
在 CI 上使用此方法
Ccache 在 macOS 上使用 /Users/$USER/Library/Caches/ccache 目录存储缓存。因此你也可以在 CI 上保存并恢复该目录来加速构建。
但需要注意以下几点:
-
在 CI 上,我们建议进行完全干净的构建以避免缓存污染问题。如果采用前文提到的并行构建方法(在 4 个不同 ABI 上构建),CI 上很可能不需要使用
ccache。 -
ccache依赖时间戳计算缓存命中,这在 CI 环境下效果不佳(每次运行都会重新下载文件)。解决方法是通过compiler_check content选项改用文件内容哈希机制。
分布式缓存
除本地缓存外,你还可以考虑为原生构建配置分布式缓存。这在频繁进行原生构建的大型组织中特别有用。
我们推荐使用 sccache 实现此功能。具体设置方法请参考 sccache 的分布式编译快速入门指南。