如何提升esbuild编译速度？优化打包性能的实用技巧-七爪网

优化 React Native 构建速度，把等待时间从几分钟缩短到几秒，是每个开发团队都应该重视的投资。当项目代码量增长，一次本机构建动辄消耗五分钟，不仅打断开发节奏，更在多人协作时成倍浪费团队生产力。以下六个实战技巧能帮你显著改善这一状况。

开发环境按需构建

React Native 默认会为四个 CPU 架构分别构建本地库，这在开发阶段其实是多余的。你平时只在某一台模拟器或真机上调试，根本用不上所有架构的版本。

通过给构建命令添加 –active-arch-only 参数，系统会自动检测当前连接的设备架构，只构建对应的那一份。这意味着本机构建时间能直接减少约 75%。

在项目根目录的 gradle.properties 文件里，你甚至可以写入 android.buildOnlyTargetAbi=true 来永久固定这个行为。不过要记得，打包发布版本时必须删除这个配置，否则生成的 APK 无法在其他架构的设备上运行。

$ 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...

启用配置缓存加速

$ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64

从 React Native 0.7 版本开始，Gradle 构建引入了配置缓存特性。常规的构建过程包含配置阶段和执行阶段，每次改动代码都得重复这两个步骤。

开启配置缓存后，Gradle 会记住配置阶段的结果，后续构建直接跳过这个环节。特别是当你频繁修改原生代码时，这个优化能明显缩短构建周期。

# 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

在 android/gradle.properties 文件中加入 org.gradle.configuration-cache=true 这行配置即可启用。第一次开启后的第二次构建，你就能感受到速度的提升。

配置本地 Maven 镜像

每次构建时，Gradle 都需要从 Google 的 Maven 仓库和中央仓库下载依赖项。这些请求跨网传输，速度受网络状况影响很大。

如果你的公司搭建了内部的 Maven 仓库镜像，就应该优先使用它。在项目级的 build.gradle 文件中配置好镜像地址后，所有依赖都会从内网获取。

org.gradle.configuration-cache=true

通过设置 repositories 的 url 指向内部镜像，构建过程就不再受外网波动的影响。这个改动对持续集成环境尤其友好，能大幅降低构建失败率和等待时间。

引入编译器缓存工具

频繁编译 C++ 代码是 React Native 构建耗时的另一个重要原因。编译器缓存工具能记住每次编译的结果，当相同输入再次出现时直接复用。

# 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/

在 macOS 上通过 brew install ccache 安装后，执行两次干净的构建做对比测试。第二次你会看到构建时间从几分钟锐减到几十秒，这就是缓存在起作用。

使用 ccache -s 命令可以查看缓存的命中率。在 CI 环境中，注意将缓存目录持久化，并且启用基于文件内容的哈希校验模式，避免因时间戳变化导致缓存失效。

打通 Xcode 编译链路

在 iOS 开发中，ccache 同样能发挥作用，但需要额外配置。打开 ios/YourProject.xcodeproj/project.pbxproj 文件，找到并取消注释包含 ccache 的那行配置。

这行配置的作用是让 Xcode 在编译时也通过 ccache 进行中转。完成这个设置后，iOS 端的二次编译速度会明显加快，特别是在频繁调试原生模块时效果突出。

需要注意的是，首次编译时 ccache 会建立缓存，速度提升要在后续构建中才能体现。如果遇到缓存异常，可以通过 ccache –clear 命令清空缓存重新开始。

探索分布式编译方案

当团队规模扩大，本地缓存已经无法满足需求时，可以考虑分布式编译。这种方案让多台机器共享编译结果，即使在新机器上首次构建也能获得极快速度。

$ 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 %)

Gradle 远程缓存和 ccache 的分布式版本都是可行的选择。配置时需要搭建中央缓存服务器，并确保各构建环境的一致性，避免因环境差异导致缓存不匹配。

这个方案适合拥有专门构建基础设施的大型团队。实施前建议先评估投入产出比，如果只是几个人的小项目，优化本地缓存已经能解决大部分问题。

你现在的项目构建一次需要多长时间？有没有尝试过其他提速技巧？欢迎在评论区分享你的经验，点个赞让更多开发者看到这些实用方法。

  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