加速你的 Build 階段

建置你的 React Native 應用程式可能非常耗費資源，並佔用開發者數分鐘的時間。當你的專案成長，以及在有多位 React Native 開發人員的大型組織中，這可能會成為問題。

為了減輕這種效能衝擊，此頁面分享了一些關於如何改善你的建置時間的建議。

在開發期間僅建置單一 ABI (僅限 Android)

當在本機建置你的 Android 應用程式時，預設情況下你會建置所有 4 個應用程式二進制介面 (ABI)：armeabi-v7a、arm64-v8a、x86 & x86_64。

然而，如果你在本機建置並測試你的模擬器或實體裝置，你可能不需要建置所有這些。

這應該會減少你的 原生建置時間 約 75%。

如果你使用 React Native CLI，你可以將 --active-arch-only 標誌添加到 run-android 命令。此標誌將確保從正在運行的模擬器或插入的手機中選取正確的 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，而不僅僅是你日常開發工作流程中使用的 ABI。

使用編譯器快取

如果你頻繁運行原生建置 (C++ 或 Objective-C)，你可能會受益於使用編譯器快取。

具體來說，你可以使用兩種快取類型：本機編譯器快取和分散式編譯器快取。

本機快取

資訊

以下說明適用於 Android 和 iOS。如果你僅建置 Android 應用程式，你應該可以順利進行。如果你也建置 iOS 應用程式，請遵循下方XCode 特定設定章節中的說明。

我們建議使用 ccache 來快取你的原生建置的編譯。Ccache 的運作方式是封裝 C++ 編譯器，儲存編譯結果，並且如果最初儲存了中間編譯結果，則跳過編譯。

Ccache 在大多數作業系統的套件管理器中都可用。在 macOS 上，我們可以使用 brew install ccache 安裝 ccache。或者你可以遵循官方安裝說明從原始碼安裝。

然後你可以執行兩次乾淨的建置 (例如，在 Android 上，你可以先運行 yarn react-native run-android，刪除 android/app/build 資料夾，然後再次運行第一個命令)。你會注意到第二次建置比第一次快得多 (應該只需要幾秒鐘而不是幾分鐘)。在建置時，你可以驗證 ccache 是否正常運作，並檢查快取命中/未命中率 ccache -s

$ 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 行。

ruby
  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 上無法很好地運作，因為檔案在每次 CI 運行時都會重新下載。為了克服這個問題，你需要使用 compiler_check content 選項，該選項改為依賴檔案內容的雜湊。

分散式快取

與本機快取類似，你可能需要考慮為你的原生建置使用分散式快取。這對於頻繁進行原生建置的大型組織尤其有用。

我們建議使用 sccache 來實現此目的。關於如何設定和使用此工具的說明，我們參考 sccache 分散式編譯快速入門。

在開發期間僅建置單一 ABI (僅限 Android)​

使用編譯器快取​

本機快取​

XCode 特定設定​

在 CI 上使用此方法​

分散式快取​