Przyspieszanie fazy budowania

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Budowanie aplikacji React Native może być kosztowne czasowo i zajmować programistom kilka minut. Problem ten narasta wraz z rozrostem projektu i jest szczególnie odczuwalny w większych organizacjach z wieloma programistami React Native.

Aby zminimalizować te problemy wydajnościowe, na tej stronie znajdziesz sugestie, jak skrócić czas budowania.

informacja

Pamiętaj, że te sugestie to zaawansowane funkcje wymagające podstawowego zrozumienia działania natywnych narzędzi do budowania.

Buduj tylko jedną ABI podczas rozwoju (tylko Android)

Podczas lokalnego budowania aplikacji na Androida domyślnie kompilujesz wszystkie 4 Application Binary Interfaces (ABIs): armeabi-v7a, arm64-v8a, x86 i x86_64.

Jednak prawdopodobnie nie potrzebujesz wszystkich tych architektur, jeśli testujesz lokalnie na emulatorze lub fizycznym urządzeniu.

To podejście powinno skrócić czas budowania natywnego o około 75%.

Jeśli używasz React Native CLI, dodaj flagę --active-arch-only do polecenia run-android. Flaga ta zapewni pobranie poprawnej ABI z działającego emulatora lub podłączonego urządzenia. Działanie możesz potwierdzić komunikatem w konsoli np. 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...

Mechanizm ten opiera się na właściwości Gradle reactNativeArchitectures.

Jeśli budujesz bezpośrednio przez Gradle z linii poleceń (bez CLI), możesz określić docelową ABI w następujący sposób:

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

Może to być przydatne przy budowaniu aplikacji na CI z wykorzystaniem macierzy do zrównoleglenia kompilacji różnych architektur.

Wartość tę możesz również nadpisać lokalnie, używając pliku gradle.properties z głównego folderu projektu:

# 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

Przy budowaniu wersji produkcyjnej pamiętaj o usunięciu tych flag - finalny apk/pakiet aplikacji powinien obsługiwać wszystkie ABI, nie tylko tę używaną podczas codziennego rozwoju.

Włącz buforowanie konfiguracji (tylko Android)

Od React Native 0.79 możesz włączyć buforowanie konfiguracji Gradle (Configuration Caching).

Podczas budowania Androida komendą yarn android wykonujesz proces Gradle składający się z dwóch faz (źródło):

• Faza konfiguracji: ewaluacja wszystkich plików .gradle

• Faza wykonania: kompilacja kodu Java/Kotlin i wykonywanie zadań

Buforowanie konfiguracji pozwala pomijać fazę konfiguracji w kolejnych budowaniach.

Funkcja jest szczególnie przydatna przy częstych zmianach kodu natywnego, gdyż znacząco skraca czas budowania.

Przykład przyspieszenia ponownego budowania RN-Tester po zmianie kodu natywnego:

Aby włączyć buforowanie konfiguracji Gradle, dodaj następującą linię w pliku android/gradle.properties:

org.gradle.configuration-cache=true

Więcej informacji o buforowaniu konfiguracji znajdziesz w oficjalnej dokumentacji Gradle.

Korzystanie z lustra Maven (tylko Android)

Podczas budowania aplikacji na Androida, proces Gradle będzie musiał pobrać niezbędne zależności z Maven Central i innych repozytoriów internetowych.

Jeśli twoja organizacja korzysta z lustra repozytorium Maven, warto rozważyć jego użycie – przyspieszy to budowanie, pobierając artefakty z lustra zamiast bezpośrednio z internetu.

Lustro możesz skonfigurować, dodając właściwość exclusiveEnterpriseRepository w pliku android/gradle.properties:

diff

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

Ustawienie tej właściwości sprawi, że proces budowania będzie pobierał zależności wyłącznie z twojego repozytorium, ignorując inne źródła.

Używanie cache kompilatora

Jeśli często budujesz natywny kod (C++ lub Objective-C), możesz skorzystać z cache kompilatora.

Dostępne są dwa typy cache: lokalny cache kompilatora i rozproszony cache kompilatora.

Cache lokalny

informacja

Poniższe instrukcje działają zarówno na Androidzie, jak i iOS. Jeśli budujesz tylko aplikacje na Androida, możesz od razu przystąpić. Jeśli budujesz także na iOS, postępuj zgodnie z instrukcjami w sekcji Konfiguracja dla Xcode poniżej.

Zalecamy użycie ccache do cache'owania kompilacji kodu natywnego. Ccache działa poprzez opakowanie kompilatorów C++, przechowywanie wyników kompilacji i pomijanie jej, jeśli dany wynik pośredni był już wcześniej zapisany.

Ccache jest dostępny w menedżerach pakietów większości systemów operacyjnych. Na macOS instalujemy go poleceniem brew install ccache. Możesz też postępować według oficjalnych instrukcji instalacji do instalacji ze źródeł.

Następnie wykonaj dwie czyste kompilacje (np. na Androidzie: uruchom yarn react-native run-android, usuń folder android/app/build i ponownie uruchom komendę). Zauważysz, że druga kompilacja jest znacznie szybsza (powinna zająć sekundy zamiast minut). Podczas budowania możesz sprawdzić działanie ccache i statystyki trafień/chybień cache poleceniem 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 %)

Uwaga: ccache agreguje statystyki ze wszystkich kompilacji. Możesz zresetować je przed kompilacją poleceniem ccache --zero-stats, aby zweryfikować współczynnik trafień cache.

Jeśli potrzebujesz wyczyścić cache, użyj polecenia ccache --clear.

Konfiguracja dla Xcode

Aby ccache działał poprawnie z iOS i Xcode, musisz włączyć obsługę ccache w pliku ios/Podfile.

Otwórz ios/Podfile w edytorze i odkomentuj linię 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

Stosowanie tego podejścia na CI

Ccache przechowuje cache w folderze /Users/$USER/Library/Caches/ccache na macOS. Dlatego na CI możesz zapisywać i przywracać ten folder, aby przyspieszyć kompilacje.

Należy jednak zwrócić uwagę na dwie kwestie:

1. Na CI zalecamy pełną czystą kompilację, aby uniknąć problemów z uszkodzonym cache. Jeśli zastosujesz podejście opisane w poprzednim akapicie (równoległe budowanie dla 4 ABI), prawdopodobnie nie będziesz potrzebować ccache na CI.

2. ccache opiera się na znacznikach czasu do obliczania trafień cache. To nie działa optymalnie na CI, gdzie pliki są pobierane od nowa przy każdym uruchomieniu. Aby to obejść, użyj opcji compiler_check content, która bazuje na haszowaniu zawartości pliku.

Cache rozproszony

Podobnie jak w przypadku cache lokalnego, warto rozważyć użycie rozproszonego cache dla kompilacji natywnych. Jest to szczególnie przydatne w większych organizacjach często budujących kod natywny.

Aby to osiągnąć, zalecamy użycie sccache. Szczegółowe instrukcje konfiguracji i użytkowania tego narzędzia znajdziesz w przewodniku szybkiego startu dla kompilacji rozproszonej sccache.